Simple Google Maps demo with Custom Markers - Followup

This post is more than 2 years old.

This weekend I blogged (Simple Google Maps demo with Custom Markers) a simple application that made use of Google's JavaScript Maps API to render custom markers. The data was based on a set of static locations and made use of Google's Geocoding API to translate the addresses into longitude/latitude pairs that could be drawn on a map. My demo worked great, but when the reader tried it out with real data (89 locations) he ran into a problem. Google's API was throttling him from making that many requests.

Turns out he ran into the same thing I've run into before (Having trouble with too many map markers and CFMAP?.) He figured out, as I did, that it made sense to simply do a one-time geocode of his addresses and make use of that instead.

And frankly, even if you don't have 89 locations, it really is kinda of silly to constantly ask Google for address data for locations that aren't moving around. He asked if I could modify the code a bit to use long/lat data and I was glad to oblige.

(As a quick aside: In my sample data you will see long/lat pairs along with static locations. The long/lat pairs may not match the actual addresses. I asked him for sample data and simply meshed it with my static list of four locations.)

Let's take a look. The first thing I did was add the long/lat as data in my static array:

Note that I'm keeping the address. That's used in the markers since most humans can't translate a longitude/latitude pair to a physical location. (Hell, I can't even remember which is which most of the time.)

The next change was simple - I just got rid of the geocoder call and its callback wrapper. In this code block you can see where I'm simply looping over the data and and using the static location in the marker.position value.

And that's it. You can run this version by hitting the demo link below. It probably isn't that terribly faster in your desktop browser, but on a mobile device the savings would be much more important.

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

Archived Comments

Comment 1 by Peter Tilbrook posted on 12/5/2012 at 8:12 AM

Got a version of it working well here:

Comment 2 by Raymond Camden posted on 12/5/2012 at 8:15 AM

So where do I send the invoice? ;)

Sooooo happy to see someone actually using my code. :)

Comment 3 by Peter Tilbrook posted on 12/5/2012 at 1:40 PM

If you view the source code I added credit to you there. :)

All my sites are coming from a database so need tweaking. Also added custom addtions like URL, phone and email addresses.

Comment 4 by Peter Tilbrook posted on 12/13/2012 at 2:28 PM

Has a proper sub-domain now.


Tip find CLub Lime Kaleen. Drag "street view man" onto it. I found this out myself by accident!

Comment 5 by Raymond Camden posted on 12/13/2012 at 8:58 PM

Slick. :)

Comment 6 by Peter Tilbrook posted on 12/14/2012 at 1:33 AM

OK so I have Sat mode on by default. Looking through the Google API docs can't find a way to turn on street labels by default. Any ideas?

Comment 7 by Raymond Camden posted on 12/14/2012 at 1:55 AM

I'm sure there is a way. Do what I'd do - check the docs. ;)

Comment 8 by dmitry posted on 2/25/2013 at 8:36 PM

I want to separate concerns and put html for popup window in a template. Is it possible to pass javascript template variable to google maps info window content? I tried code below but my mustache.js template was not rendered. var template = $('#infowindow').html(); var contentHtml = Mustache.to_html(template, data); var infowindow = new google.maps.InfoWindow({
content: contentHtml

Comment 9 by Raymond Camden posted on 2/25/2013 at 8:54 PM

It should be possible. Try doing a console.log on contentHtml. Most likely you broke it there since InfoWindow is just taking the HTML.

Comment 10 by denis posted on 4/25/2013 at 3:13 AM

I got it! I created an app like this, but i'd like to use a combobox instead of a checkbox, i'm trying to make this. Maybe in jquery i can resolve this?

Comment 11 by Raymond Camden posted on 4/25/2013 at 5:30 PM

Sure, it shouldn't be difficult.

Comment 12 by Ari posted on 5/18/2013 at 5:23 PM

I’m trying to modify your example to be able to use large dynamic lists as opposed to a small static one.

Could you give me a heads-up as to how I would go about using your example to handle, let’s say 1000 item list instead of 4? Thanks.

Comment 13 by Raymond Camden posted on 5/18/2013 at 6:51 PM

I haven't used a thousand or so, but I do know there is documentation about handling large data sets. I'd recommend going to their docs and looking around for it. If I remember right, there was a way to make the map smart enough to render some items only when you've zoomed in enough - thereby making the map less complex.

Comment 14 by Ari posted on 5/18/2013 at 7:24 PM

Thanks for the quick response Raymond.

Comment 15 by Ashraf ali posted on 10/18/2013 at 5:04 PM

Hello Raymond,
i want to show some places like hospital,restaurant,shops etc through dropdown (<select></select>) where user can select there choice whether they are looking for the defind destinations so what i want to show them the markers when there are the output.

for eg:if person choose restaurant in map it shows the all the restaurant within the map with markers.

i think you can understand me what i am asking for.

please revert me back ASAP


Comment 16 by Raymond Camden posted on 10/18/2013 at 5:54 PM

What you want is - pretty much - exactly what my demo does. But instead of checkboxes it is driven by a select field. It should take just a few minutes to modify my demo.

Comment 17 by robi posted on 10/18/2013 at 6:39 PM


Ray is not your servant or slave. Asking him to revert back to you ASAP is incredibly rude. If it was me I would have simply ignored you. Ray... thanks for all you do for helping lots of folks.

Comment 18 by Balaji posted on 10/24/2013 at 4:44 PM

Thanks Ray for the wonderful blog. Really useful. i am using your code as well.Need some help, If i want to write automation - test script i.e - To assert one of the markers displayed correctly on the map for the given lat & lon.

Is there a way for selenium talk to the DOM and assert the Markers on the map?

Thanks again in advance

Comment 19 by Raymond Camden posted on 10/24/2013 at 5:19 PM

Hmm, that's a fascinating question. So obviously Google Maps is doing *something* to the DOM, but I don't think it is something you can rely on. What I mean is - they may add the marker with class "gmEpicMarker", and then one day switch to "gmEpicCoolMarker". Your test can't rely on Google to always use the same DOM manipulation to get the job done.

Therefore - I think the answer is no - you can't - but I'd love to be proven wrong here.

Comment 20 by Steve Spittell posted on 3/18/2014 at 3:21 PM

Is there a way to have the var data [ ] pull from a xml file ?

Comment 21 by Raymond Camden posted on 3/18/2014 at 3:53 PM

Yes. Or JSON.

Comment 22 by wj posted on 3/23/2014 at 10:01 AM

Hi, it is possible to populate the data in the static array (var data) from database?

Comment 23 by Raymond Camden posted on 3/23/2014 at 3:20 PM


Comment 24 by wj posted on 3/24/2014 at 4:23 PM

Sorry for late reply. I am using php in the javascript to read from database. But the problem is I could not format the code to the form like the var data above. Using the php code in the var data will 'break' the structure. Is there any way to format it? Thanks.

Comment 25 by Raymond Camden posted on 3/24/2014 at 4:27 PM

You need to output the data in a form that JS can read - JSON. I'm sure PHP has some library (or even built in support) to make that easy.

Comment 26 by Anders Stentebjerg posted on 3/26/2014 at 5:57 PM

Great read. [… I know it is old]
Would it be possible to combine this with

Comment 27 by Raymond Camden posted on 3/26/2014 at 6:21 PM

Your fiddle demonstrates a 2 column list where you can filter based on a match on any side. Can it be combined? Sure.