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.
Archived Comments
Got a version of it working well here:
http://web2.clubgroup.com.a...
So where do I send the invoice? ;)
Sooooo happy to see someone actually using my code. :)
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.
Has a proper sub-domain now.
http://locations.clubgroup....
Tip find CLub Lime Kaleen. Drag "street view man" onto it. I found this out myself by accident!
Slick. :)
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?
I'm sure there is a way. Do what I'd do - check the docs. ;)
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
});
It should be possible. Try doing a console.log on contentHtml. Most likely you broke it there since InfoWindow is just taking the HTML.
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?
Sure, it shouldn't be difficult.
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.
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.
Thanks for the quick response Raymond.
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.
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.
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.
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
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.
Is there a way to have the var data [ ] pull from a xml file ?
Yes. Or JSON.
Hi, it is possible to populate the data in the static array (var data) from database?
Yes!
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.
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.
Great read. [… I know it is old]
Would it be possible to combine this with http://jsfiddle.net/ukW2C/3/
Thanks
Your fiddle demonstrates a 2 column list where you can filter based on a match on any side. Can it be combined? Sure.