Twitter: raymondcamden


Address: Lafayette, LA, USA

Simple Google Maps demo with Custom Markers - Followup

12-03-2012 7,596 views JavaScript 27 Comments

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.

Related Blog Entries

27 Comments

  • Commented on 12-04-2012 at 9:12 PM
    Got a version of it working well here:

    http://web2.clubgroup.com.au/_Virtual/locations.cl...
  • Commented on 12-04-2012 at 9:15 PM
    So where do I send the invoice? ;)

    Sooooo happy to see someone actually using my code. :)
  • Commented on 12-05-2012 at 2:40 AM
    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.
  • Commented on 12-13-2012 at 3:28 AM
    Has a proper sub-domain now.

    http://locations.clubgroup.com.au/

    Tip find CLub Lime Kaleen. Drag "street view man" onto it. I found this out myself by accident!
  • Commented on 12-13-2012 at 9:58 AM
    Slick. :)
  • Commented on 12-13-2012 at 2:33 PM
    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?
  • Commented on 12-13-2012 at 2:55 PM
    I'm sure there is a way. Do what I'd do - check the docs. ;)
  • dmitry #
    Commented on 02-25-2013 at 9:36 AM
    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
                   });
  • Commented on 02-25-2013 at 9:54 AM
    It should be possible. Try doing a console.log on contentHtml. Most likely you broke it there since InfoWindow is just taking the HTML.
  • denis #
    Commented on 04-24-2013 at 6:13 PM
    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?
  • Commented on 04-25-2013 at 8:30 AM
    Sure, it shouldn't be difficult.
  • Commented on 05-18-2013 at 8:23 AM
    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.
  • Commented on 05-18-2013 at 9:51 AM
    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.
  • Commented on 05-18-2013 at 10:24 AM
    Thanks for the quick response Raymond.
  • Commented on 10-18-2013 at 8:04 AM
    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

    thanks.
  • Commented on 10-18-2013 at 8:54 AM
    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.
  • robi #
    Commented on 10-18-2013 at 9:39 AM
    Ashraf,

    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.
  • Balaji #
    Commented on 10-24-2013 at 7:44 AM
    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
    Balaji
  • Commented on 10-24-2013 at 8:19 AM
    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.
  • Steve Spittell #
    Commented on 03-18-2014 at 6:21 AM
    Is there a way to have the var data [ ] pull from a xml file ?
  • Commented on 03-18-2014 at 6:53 AM
    Yes. Or JSON.
  • wj #
    Commented on 03-23-2014 at 1:01 AM
    Hi, it is possible to populate the data in the static array (var data) from database?
  • Commented on 03-23-2014 at 6:20 AM
    Yes!
  • wj #
    Commented on 03-24-2014 at 7:23 AM
    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.
  • Commented on 03-24-2014 at 7:27 AM
    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.
  • Anders Stentebjerg #
    Commented on 03-26-2014 at 8:57 AM
    Great read. [… I know it is old]
    Would it be possible to combine this with http://jsfiddle.net/ukW2C/3/
    Thanks
  • Commented on 03-26-2014 at 9:21 AM
    Your fiddle demonstrates a 2 column list where you can filter based on a match on any side. Can it be combined? Sure.

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