Twitter: raymondcamden


Address: Lafayette, LA, USA

Simple Google Maps demo with Custom Markers

12-01-2012 25,090 views JavaScript 70 Comments

This isn't anything special, but a reader today asked if I could modify some code I did for an earlier blog post: Simple introduction to Google Maps - Part 2 - Markers. This was a blog post I had done as part of a series introducing folks to using the Google Maps SDK. While partially focused on ColdFusion (and replacing <cfmap>), it was applicable to anyone who wanted to try out the SDK on their web site.

The final demo in that blog post (available here) showed how to add dynamic markers to a map and provided a simple UI to select and focus on each marker.

My reader had two main questions. First, he wanted to know how to customize the marker. Second, he wanted to build in a basic filtering system based on a type of content. He was building a map of medical related locations and he wanted to be able to filter by pharmacies or hospitals. I whipped up a demo of both of these concepts and I thought folks might like to see the code.

Let's begin by talking about custom markers. This is really an incredibly trivial thing to do. While you have a few different options for customizing the marker, the simplest way to do so is to point to a URL. So given this code to create a marker:

You can tell Google to use a custom image like so:

In this case, I'm pointing to a file called drugstore.png that exists on my server. If you google for "google map icons", you'll find a great selection of icons out there, many free to use. I found a great set here: http://mapicons.nicolasmollet.com/ In fact, he even had a medical category. I grabbed that zip, downloaded it, and expanded it.

To make use of these icons, I took some static code he rewrote and created a more generic version of it. In my code, I had an array of locations. Each location included a title and an address. I then added a "type" property that mapped to the types of things he was looking to filter. This then allowed me to build a utility that could map the medical type to an image file. I also could have allowed for completely custom icons. For example, maybe making use of a hospital's logo. But for now, I went with a simple type to icon solution. Here's how I set up the sample data and the icon "mapping" code. Obviously I made some guesses here and went with a silly choice for the default.

Here's how it looks now:

Filtering was easy too. I used jQuery to bind to changes to the checkboxes on top. I then did a show/hide on both the left hand list of locations and the markers as well. (Google had a simple API to show/hide markers.)

And that's it. A good modification to this would be to use the Google API that 'centers' around markers. I'm not sure if that is smart enough to handle hidden markers, but it could be useful as you filter to adjust the map. (Then again that may be disorienting to users.)

You can view the full demo below.

Related Blog Entries

70 Comments

  • SuperAlly #
    Commented on 12-01-2012 at 3:57 PM
    Thanks Ray. I'm in the middle of this very thing, and this will be a big help.
  • SuperAlly #
    Commented on 12-01-2012 at 11:25 PM
    Ray
    This was a great help. One thing I noticed when putting my own map together, when you click on a link in the sidebar, it closes the previous infowindow, but if you click on the map markers themselves, it leaves previous infowindows open.
    Any idea how to work around that? I thought calling infowindow.close() before infowindow.open would suffice, but no luck.
  • SuperAlly #
    Commented on 12-02-2012 at 12:00 AM
    Ray, my apologies for the repeated posts, but I got the infowindows working properly by changing this:
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });

    to this slight mod of the other block of code:
    google.maps.event.addListener(marker, 'click', function() {
    if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
    marker.infowindow.open(map, marker);
    lastinfowindow = marker.infowindow;
    });

    Just wanted to pass it along, and thanks again.
  • Misty #
    Commented on 12-02-2012 at 1:03 AM
    Hi ray, I had build this and filtering a long but with xml and javascript . cfmap was not introduced then. was pretty easy the way. But you make nice usage and it looks awesome

    Cheers
  • Commented on 12-02-2012 at 9:16 AM
    No need to apologize, SuperAlly, thanks for finding that and fixing it.
  • Paul #
    Commented on 12-03-2012 at 12:04 PM
    I love the function and the code, but I think the people of Denver or Sante Fe may not like their new locations ;)
  • Commented on 12-03-2012 at 12:15 PM
    Paul - sorry - what? Did the geocode fail?
  • Paul #
    Commented on 12-03-2012 at 12:59 PM
    It was on the first demo, orders 5 & 6.
  • Commented on 12-03-2012 at 1:01 PM
    Interesting. Definitely a bug there. Well, it's old, so I'm not going to worry about it. ;)
  • Commented on 12-03-2012 at 4:30 PM
    Follow up post with SuperAlly's fix in it:

    http://www.raymondcamden.com/index.cfm/2012/12/3/S...
  • Commented on 01-14-2013 at 9:21 AM
    I an a novice to joomla and am not a programmer. I do my own websites and have been looking for a plugin or module that would allow me to reference google icons in a menu; in other words, have a menu with an image that matches an icon on a map. Do you have any suggestions?
  • Commented on 01-14-2013 at 9:22 AM
    For Joomla? I don't use it. Sorry.
  • Hicham #
    Commented on 01-22-2013 at 5:42 AM
    Hi Raymond Camden,

    Thank you so much for this code, exactly what i was searching for :)
    Is it possible to ad a mailto: link for email in the map ?
  • Commented on 01-22-2013 at 6:25 AM
    The title values for those markers can include HTML - just use it there.
  • denis #
    Commented on 04-12-2013 at 2:32 PM
    I'm trying to building a web app using google maps, and seeing the aplicatios of the demo, it's what I'm finding, I'm studing the code e creating my work!But now, the mission is to create an application where people clicks on checkbox e just show the icons by category. Adress isn't necessary in my context. What class or library I should to use to finish the web app? I'm using in this application javascript and html5
  • Commented on 04-13-2013 at 3:04 PM
    Um. I don't know if I really understand you. I believe you want JavaScript but honestly I can't tell.
  • Lara #
    Commented on 04-15-2013 at 2:30 AM
    Hi, i'm trying to building a web site for the people create markers about crime in a city. Do you know if can i open a box for it? Save in a database and load after?
  • Commented on 04-15-2013 at 6:02 AM
    "Do you know if can i open a box for it? Save in a database and load after?" Not sure what you mean by open a box. If you mean, "Can I allow people to add markers (with some text data too) and store it" then the answer is yes.
  • Cruelcrome #
    Commented on 04-17-2013 at 2:06 AM
    Any1 know if I want to zoom/bound to only the active markers(by the checkboxes) and fit the map after them?
    ... And if no checkboxes are selected then go back to default map zoom/center ?? .
  • Commented on 04-17-2013 at 6:28 AM
    "Any1 know if I want to zoom/bound to only the active markers(by the checkboxes) and fit the map after them?" Afaik, the Google Maps API has the ability to zoom/fit things, so this should be possible.
  • Cruelcrome #
    Commented on 04-18-2013 at 3:07 AM
    ok, ty i'll try that...

    do you have any clue on how i highlight(by chance the loc class somehow) so i can see which marker is active at the sidebar?

    regards Cruelcrome
  • Commented on 04-18-2013 at 6:25 AM
    Nope. I'd recommend going to the docs. :)
  • denis #
    Commented on 04-19-2013 at 3:28 PM
    Yes. Javascript is tme main language that i'm using. But, I'm tring to use jQuery to show and hide markers in the map based on the checkboxes that are selected.
  • Commented on 04-19-2013 at 3:31 PM
    Which is what I demoed, right?
  • denis #
    Commented on 04-25-2013 at 5:27 PM
    Yes, I saw this demo , that gave me an orientation to building in an web application
  • Commented on 04-25-2013 at 6:50 PM
    Sorry, but what exactly are you trying to ask me?
  • denis #
    Commented on 04-30-2013 at 6:06 PM
    Ok, let's go. I'm using a web application that shows in a map the icons , using google maps . For this,I want using a <select> tag to filter the icons by categories, instead of checkboxes. I hope that you undestad!
  • Commented on 04-30-2013 at 9:31 PM
    So, step one then would be for you to add a dropdown and notice the change. Can you handle that portion? That's simple jQuery event handling.
  • Stuart #
    Commented on 05-29-2013 at 6:43 AM
    Hi.I have followed your guides, they are great by the way. Do you know how to insert something like this into a wordpress site?
  • Commented on 05-29-2013 at 9:02 AM
    Nope, I don't use Wordpress. This entire demo is just HTML and JavaScript. I assume Wordpress has some way to let you do that.
  • Roge #
    Commented on 05-29-2013 at 4:40 PM
    Hi! Nice tutorial!!
    How can i change the data of the geolocation (adress:") for the lat. and long. ('position') ?? i don't want to use the geolocation api to create the marks.

    Tnx!
  • Commented on 05-29-2013 at 4:46 PM
    Well, obviously you would change address to longitude and latitude. And then instead of doing a geolocation, just add the markers with those values.
  • Roge #
    Commented on 05-29-2013 at 5:18 PM
    Hi again! Sorry for this, I'm a little beginner over here, can you give me some example of code?
    If is too much for ask, thanks anyway, and great job!!
  • Commented on 05-30-2013 at 5:45 PM
    Sorry, I can't. You should be able to modify the code I've provided, or use the API docs.
  • Commented on 06-18-2013 at 4:27 AM
    Hi. Thanks for this, but I can not use. My skills of Javascript are limited. I only need copy font code? Could you upload the complete example. I dont know how use it. Thanks and regards.
  • Commented on 06-18-2013 at 9:11 AM
    To be honest, I would not recommend using this if you do not having basic JavaScript skills.
  • Ed Stephenson #
    Commented on 07-22-2013 at 7:38 AM
    Hi Raymond,

    Thanks for the really helpful tutorial! It's solved an issues i've spent weeks on.

    I have one question: Is there anyway to sort the data that comes through on the locs section?

    I see that yours is conveniently in alphabetical order. However I've used the maps API to find out how far away a user would be from the locations of the markers. I want to order the sidebar results by distance from the user....Would you be willing to give me any pointers?

    Thanks,

    Ed
  • Commented on 07-22-2013 at 8:40 AM
    If you know the distance then sure - you could sort the array. I'd Google for "javascript array sort" to start. It should be simple.
  • Commented on 07-22-2013 at 11:43 AM
    Although I only have basic skills I have finished! But I have a problem, why only appear 11 items in the sidebar?? I need much more and I dont know where change this limit. When any checkbox is on all point must be appear.

    Please, I need help.

    My map is here:

    http://jjmontalban.com/map/


    Thanks and regards
  • Commented on 07-22-2013 at 1:37 PM
    Looking at your code I see /* around some data. I think you commented part out.
  • Commented on 07-23-2013 at 5:42 AM
    Yes, I have commented part of address. But appear 18 address and only appear 11. If I uncomment all address only still appear 11 too.

    Where is the problem??

    Thanks and regards.
  • Commented on 07-23-2013 at 6:39 AM
    It probably failed to Geocode. Try uncommenting this:

    alert("Geocode was not successful for the following reason: " + status)

    Ah... and I bet I know why. Google puts a limit on the # of addresses you can Geocode in a certain time.

    So what I recommend is geocoding the addresses one time - manually - and skipping the geocode process in your production app.
  • Commented on 07-30-2013 at 1:19 PM
    How can I geocoding manually? My skill still are short but I need this map.

    When I uncomment the alert show the problem but show all addresses!

    Thanks and regards
  • Commented on 07-30-2013 at 1:37 PM
    Well there are a few ways. Right now your code is geocoding SOME of the data. In your code, just use a console.log to report it, and then copy those values down. Then remove those addresses and do the rest. After one or two loads you will have all the data you need and can skip that entire process.
  • Commented on 07-31-2013 at 5:29 AM
    Sorry to ask again, but do not understand how to use console.log. I can not find the solution to the problem. I tried with the geocoder object, but do not know where to use it or how exactly.

    greetings and thanks
  • Commented on 07-31-2013 at 6:23 AM
    I recommend you learn how to use it. Here is one doc on it:

    https://developer.mozilla.org/en-US/docs/Web/API/c...

    And here is another one, just for Chrome:

    https://developers.google.com/chrome-developer-too...
  • Commented on 08-09-2013 at 5:34 AM
    Great tutorial. it's just the thing I've been looking for, so thank you.

    I've made a good start integrating this with WordPress but for some reason can't seem to get it to display more than 11 markers. Is there anything in the script that could be causing this, I couldn't see anything obvious?
  • Commented on 08-09-2013 at 5:56 AM
    See the earlier comments (pretty much the ones right before here). Google limits you to how many addresses you can geolocate at once. You will want to geolocate them manually and use those addresses instead.
  • Commented on 08-09-2013 at 6:04 AM
    Ah yes, I see that now. What a bummer! Thanks for the quick response though, much appreciated.
  • Commented on 08-09-2013 at 6:07 AM
    It is easy to fix though. I'm writing a blog post now on it.
  • Commented on 08-09-2013 at 6:10 AM
    Ok great, I may wait for that as my project isn't urgent.
  • Commented on 08-09-2013 at 6:20 AM
    Nice - I actually already did this. sigh. Check this:

    http://www.raymondcamden.com/index.cfm/2012/12/3/S...

    and what I just wrote:

    http://www.raymondcamden.com/index.cfm/2013/8/9/Go...
  • Commented on 08-09-2013 at 6:20 AM
    Btw, the update was under "Related Entries" above - which is why you may have missed it. I missed it too.
  • natali #
    Commented on 01-04-2014 at 7:43 AM
    how can i add more categories for filtering?
    (i want another group of checkboxs, another value to filter by. this is filtering by "type", and i want to filter by "country")
  • Commented on 01-04-2014 at 8:25 AM
    Well, adding more categories is as simple as just adding more of the input fields.

    If you want to add another "group" of checkboxes, you would need do something like this:

    a) Add code that listens for clicks in that group
    b) On click, your filter function now needs to check both groups to see what is being filtered and then apply that logic to the original data.
  • natali #
    Commented on 01-04-2014 at 8:39 AM
    here's what I've done so far, but its not working !
    could you tell me the problem?

    http://natalipolishuk.com/volunteer/index.html
  • Commented on 01-04-2014 at 8:57 AM
    No, I cannot. I'm happy to help, guide, etc, but you need to do the gist of the work. I'd begin by asking, what isn't working. Did you add new categories first and test that? You had wanted to do 2 different things, so I'd focus on the one at a time.
  • Neo #
    Commented on 03-03-2014 at 1:03 AM
    I like this example, I was wondering if you had any code to put a search box in for locations? thanks!
  • Commented on 03-05-2014 at 8:32 AM
    No, not pre-built. Wouldn't be hard though.
  • Jan #
    Commented on 03-29-2014 at 7:18 AM
    Very usefull. Thank you for this demo. I make few changes, but the idea is still same and pretty clear.

    // filtering by category

    function doFilter(category) {
    data.forEach(function(entry) {
    if(entry.category_id == category || category == 0)
    {
    markers[entry.id].setVisible(true);
    }
    else
    {
    markers[entry.id].setVisible(false);
    }
    });
    }
  • Commented on 06-16-2014 at 12:33 PM
    This really a very good article , help me a lot to understand the things. I will be very grate ful if you provide me some code or article over this to filter this record on basis of google circle radius.
  • Commented on 06-16-2014 at 8:12 PM
    Nope. I do have an article where I demonstrate drawing a polygon to limit search results.
  • nish #
    Commented on 07-24-2014 at 9:17 PM
    great script..

    I want to hide all markers by default. means when no checkbox is selected no marker should be shown. plus how can i use Geo coordinates instead of address of place.

    thanks
  • Commented on 07-25-2014 at 6:17 AM
    "I want to hide all markers by default. means when no checkbox is selected no marker should be shown."

    Are you asking if you can do that? If so - of course. It would be a minor tweak to the code. Please go ahead and try .

    "plus how can i use Geo coordinates instead of address of place."
    That would actually made the code simpler as you can skip the Geocoding and just place the markers with the data you already have.
  • Tom #
    Commented on 10-10-2014 at 5:52 AM
    Is there a way to auto start showing locations? One by one after for example 3 secs?
  • Commented on 10-10-2014 at 5:55 AM
    Yes. Generically speaking you want to use setTimeout or setInterval to do so.
  • Tom #
    Commented on 10-10-2014 at 6:12 AM
    Can You help me, which part of Your code should I change to have that? I want to loop showing these locations. SetTimeout can auto start showing locations (I shoul use onload() to auto start that?).
  • Commented on 10-10-2014 at 6:19 AM
    Speaking generically, if you have an array of values, and you want to do stuff with them in an interval, you could use pseudo-code like so:

    var current = 0;
    var interval = window.setInterval(showNext, 2000);

    function showNext() {
    // do something with the array at position current
    //add one to current. if current = array size, then window.clearInterval(interval)
    }
  • Tom #
    Commented on 10-10-2014 at 6:22 AM
    Sorry for my previous comment - not logically...
    Can you help me, where to put: "setInterval(function(), 3000);" to "play" clicking next locations?
  • Tom #
    Commented on 10-10-2014 at 6:26 AM
    Thank you for your help, but I thought it will be much easier - one, two simple JS lines. Unfortunately I don't know as much JS to do that...

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty