Simple Google Maps demo with Custom Markers

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by SuperAlly posted on 12/2/2012 at 2:57 AM

Thanks Ray. I'm in the middle of this very thing, and this will be a big help.

Comment 2 by SuperAlly posted on 12/2/2012 at 10:25 AM

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.

Comment 3 by SuperAlly posted on 12/2/2012 at 11: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.

Comment 4 by Misty posted on 12/2/2012 at 12:03 PM

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

Comment 5 by Raymond Camden posted on 12/2/2012 at 8:16 PM

No need to apologize, SuperAlly, thanks for finding that *and* fixing it.

Comment 6 by Paul posted on 12/3/2012 at 11: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 ;)

Comment 7 by Raymond Camden posted on 12/3/2012 at 11:15 PM

Paul - sorry - what? Did the geocode fail?

Comment 8 by Paul posted on 12/3/2012 at 11:59 PM

It was on the first demo, orders 5 & 6.

Comment 9 by Raymond Camden posted on 12/4/2012 at 12:01 AM

Interesting. Definitely a bug there. Well, it's old, so I'm not going to worry about it. ;)

Comment 10 by Raymond Camden posted on 12/4/2012 at 3:30 AM

Follow up post with SuperAlly's fix in it:

http://www.raymondcamden.co...

Comment 11 by Jim Cato posted on 1/14/2013 at 8:21 PM

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?

Comment 12 by Raymond Camden posted on 1/14/2013 at 8:22 PM

For Joomla? I don't use it. Sorry.

Comment 13 by Hicham posted on 1/22/2013 at 4:42 PM

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 ?

Comment 14 by Raymond Camden posted on 1/22/2013 at 5:25 PM

The title values for those markers can include HTML - just use it there.

Comment 15 by denis posted on 4/12/2013 at 11: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

Comment 16 by Raymond Camden posted on 4/14/2013 at 12:04 AM

Um. I don't know if I really understand you. I believe you want JavaScript but honestly I can't tell.

Comment 17 by Lara posted on 4/15/2013 at 11: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?

Comment 18 by Raymond Camden posted on 4/15/2013 at 3:02 PM

"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.

Comment 19 by Cruelcrome posted on 4/17/2013 at 11: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 ?? .

Comment 20 by Raymond Camden posted on 4/17/2013 at 3:28 PM

"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.

Comment 21 by Cruelcrome posted on 4/18/2013 at 12:07 PM

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

Comment 22 by Raymond Camden posted on 4/18/2013 at 3:25 PM

Nope. I'd recommend going to the docs. :)

Comment 23 by denis posted on 4/20/2013 at 12:28 AM

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.

Comment 24 by Raymond Camden posted on 4/20/2013 at 12:31 AM

Which is what I demoed, right?

Comment 25 by denis posted on 4/26/2013 at 2:27 AM

Yes, I saw this demo , that gave me an orientation to building in an web application

Comment 26 by Raymond Camden posted on 4/26/2013 at 3:50 AM

Sorry, but what exactly are you trying to ask me?

Comment 27 by denis posted on 5/1/2013 at 3:06 AM

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!

Comment 28 by Raymond Camden posted on 5/1/2013 at 6:31 AM

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.

Comment 29 by Stuart posted on 5/29/2013 at 3:43 PM

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?

Comment 30 by Raymond Camden posted on 5/29/2013 at 6:02 PM

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.

Comment 31 by Roge posted on 5/30/2013 at 1:40 AM

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!

Comment 32 by Raymond Camden posted on 5/30/2013 at 1:46 AM

Well, obviously you would change address to longitude and latitude. And then instead of doing a geolocation, just add the markers with those values.

Comment 33 by Roge posted on 5/30/2013 at 2:18 AM

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!!

Comment 34 by Raymond Camden posted on 5/31/2013 at 2:45 AM

Sorry, I can't. You should be able to modify the code I've provided, or use the API docs.

Comment 35 by Joaquin posted on 6/18/2013 at 1:27 PM

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.

Comment 36 by Raymond Camden posted on 6/18/2013 at 6:11 PM

To be honest, I would not recommend using this if you do not having basic JavaScript skills.

Comment 37 by Ed Stephenson posted on 7/22/2013 at 4:38 PM

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

Comment 38 by Raymond Camden posted on 7/22/2013 at 5:40 PM

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.

Comment 39 by Joaquin posted on 7/22/2013 at 8:43 PM

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

Comment 40 by Raymond Camden posted on 7/22/2013 at 10:37 PM

Looking at your code I see /* around some data. I think you commented part out.

Comment 41 by Joaquin posted on 7/23/2013 at 2:42 PM

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.

Comment 42 by Raymond Camden posted on 7/23/2013 at 3:39 PM

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.

Comment 43 by Joaquin posted on 7/30/2013 at 10: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

Comment 44 by Raymond Camden posted on 7/30/2013 at 10: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.

Comment 45 by Joaquin posted on 7/31/2013 at 2:29 PM

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

Comment 46 by Raymond Camden posted on 7/31/2013 at 3:23 PM

I recommend you learn how to use it. Here is one doc on it:

https://developer.mozilla.o...

And here is another one, just for Chrome:

https://developers.google.c...

Comment 47 by Paul Clapp posted on 8/9/2013 at 2:34 PM

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?

Comment 48 by Raymond Camden posted on 8/9/2013 at 2:56 PM

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.

Comment 49 by Paul Clapp posted on 8/9/2013 at 3:04 PM

Ah yes, I see that now. What a bummer! Thanks for the quick response though, much appreciated.

Comment 50 by Raymond Camden posted on 8/9/2013 at 3:07 PM

It is easy to fix though. I'm writing a blog post now on it.

Comment 51 by Paul Clapp posted on 8/9/2013 at 3:10 PM

Ok great, I may wait for that as my project isn't urgent.

Comment 52 by Raymond Camden posted on 8/9/2013 at 3:20 PM

Nice - I actually already did this. *sigh*. Check this:

http://www.raymondcamden.co...

and what I just wrote:

http://www.raymondcamden.co...

Comment 53 by Raymond Camden posted on 8/9/2013 at 3:20 PM

Btw, the update was under "Related Entries" above - which is why you may have missed it. I missed it too.

Comment 54 by natali posted on 1/4/2014 at 6:43 PM

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")

Comment 55 by Raymond Camden posted on 1/4/2014 at 7:25 PM

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.

Comment 56 by natali posted on 1/4/2014 at 7:39 PM

here's what I've done so far, but its not working !
could you tell me the problem?

http://natalipolishuk.com/v...

Comment 57 by Raymond Camden posted on 1/4/2014 at 7:57 PM

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.

Comment 58 by Neo posted on 3/3/2014 at 12:03 PM

I like this example, I was wondering if you had any code to put a search box in for locations? thanks!

Comment 59 by Raymond Camden posted on 3/5/2014 at 7:32 PM

No, not pre-built. Wouldn't be hard though.

Comment 60 by Jan posted on 3/29/2014 at 4:18 PM

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);
}
});
}

Comment 61 by Rashmi Kant posted on 6/16/2014 at 9: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.

Comment 62 by Raymond Camden posted on 6/17/2014 at 5:12 AM

Nope. I do have an article where I demonstrate drawing a polygon to limit search results.

Comment 63 by nish posted on 7/25/2014 at 6:17 AM

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

Comment 64 by Raymond Camden posted on 7/25/2014 at 3:17 PM

"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.

Comment 65 by Tom posted on 10/10/2014 at 2:52 PM

Is there a way to auto start showing locations? One by one after for example 3 secs?

Comment 66 by Raymond Camden posted on 10/10/2014 at 2:55 PM

Yes. Generically speaking you want to use setTimeout or setInterval to do so.

Comment 67 by Tom posted on 10/10/2014 at 3:12 PM

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?).

Comment 68 by Raymond Camden posted on 10/10/2014 at 3:19 PM

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)
}

Comment 69 by Tom posted on 10/10/2014 at 3:22 PM

Sorry for my previous comment - not logically...
Can you help me, where to put: "setInterval(function(), 3000);" to "play" clicking next locations?

Comment 70 by Tom posted on 10/10/2014 at 3:26 PM

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...

Comment 71 by siva shangar posted on 7/3/2015 at 6:44 AM

Thank you !...
But I need to pass locations from my database.

How to pass locations from my database to json array ?

Comment 72 (In reply to #71) by Raymond Camden posted on 7/3/2015 at 2:09 PM

You would need some kind of application server on the back end to read the db and output JSON.

Comment 73 by dude posted on 1/17/2016 at 10:14 AM

hi Ray! thanks for the awesome blog! i'm trying to make a site with the same features, but where any user can input data into the infowindow (the data being categorized) and then save & close. other users will be able to filter the data based on the categories as you have shown. any advice how to do that? thanks

Comment 74 (In reply to #73) by Raymond Camden posted on 1/18/2016 at 2:41 PM

Roughly:

You will need JS code that listens for a submit event on the infowindow's form. It will get the data and do an XHR to your server so your server can do what makes sense.

Comment 75 (In reply to #74) by dude posted on 1/19/2016 at 4:18 AM

thanks Ray! will try it out.

Comment 76 by Julio C├ęzar posted on 9/27/2016 at 11:10 AM

Hello! I could not download the example. Where can I download this example to study?

Comment 77 (In reply to #76) by Raymond Camden posted on 9/27/2016 at 3:17 PM

I linked to it above. You don't see it?

Comment 78 by Waleed posted on 11/5/2016 at 3:03 PM

I am trying to retrieve the location of the points from an online database,then redefine them into the JavaScript array "data" how best can I do that?

Comment 79 (In reply to #78) by Raymond Camden posted on 11/5/2016 at 3:09 PM

You would set something up on your server that would listen for an HTTP request and return a JSON-encoded list of locations. Something like Node, PHP, or ColdFusion, could handle this for you.

Comment 80 (In reply to #79) by Waleed posted on 11/5/2016 at 3:11 PM

Thanks for your prompt reply, do you know of any resources that may cover this kind of thing?

Comment 81 (In reply to #80) by Raymond Camden posted on 11/5/2016 at 3:12 PM

Well, there's millions of resources on those technologies. :) If you've never done anything server-side, I'd start w/ Node.

Comment 82 (In reply to #81) by Waleed posted on 11/5/2016 at 9:47 PM

I have used PHP before, but I am having trouble with the example above

Comment 83 (In reply to #82) by Raymond Camden posted on 11/6/2016 at 8:16 PM

Well the basic idea is to output an array of data in JSON-friendly format like the data I have hard coded above. If you've never done Ajax before, you need to do some basic research of course. I can't really explain it to you all here.