Google Maps and Markers Update

This post is more than 2 years old.

Edit: Nice - it looks like I had already posted a follow up. Maybe the readers of the blog entries missed it (I did!). But anyway, you can see yet another post on this subject here. Note to self - don't blog before coffee.

Last December I blogged a simple example of using custom markers in Google Maps. One of the issues folks ran into with my code was that it made use of Google's Geocoding service to translate addresses into lat/long points. This works great - to a point. If you have more than 10 (or 11, never sure about this) then Google will block your geocoding results. The fix is pretty simple - but as folks had issues with this I thought I'd describe it in more detail.

In the demo I used before, I had an array of data. The data included the addresses I wanted to geocode. What I did was to add a simple console message to my code so I could see the result from Google's geocoding service:


Once I had that, I then modified my data to include the information:

Now - you may be wondering how this would work on a page that already has the bug I was talking about. It should still give you data - up to 10 or 11 items. You could then temporarily remove data so that when you run the page again, the rest are processed. If that doesn't make sense, you can also consider using a simple web app. This web app lets you drag a map around and then click for the data. This will be slow, but once you've done it, you never need to do it again. Finally, you could also build a server-side application to do this for you - in chunks over time - and let it run until complete.

The point is - you have multiple different ways to geocode those addresses. Once you've done so, your code then gets simpler than what I had in the previous example. Here is the new loop now:

To be honest, I think this is better overall as there really is no need to keep geocoding the same darn address for every user who comes to your site. You can find a 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

Archived Comments

Comment 1 by amar posted on 8/10/2013 at 8:14 PM

thanks a lot

Comment 2 by Paul Clapp posted on 8/12/2013 at 3:04 PM

Great stuff! Just what I needed. Now onto the post code radius search :)

Comment 3 by Jesse posted on 9/15/2013 at 3:40 AM

Great tutorial! ...... some how when i check the check box in IE it doesn't work. So, is there any work around on this one?

Comment 4 by Raymond Camden posted on 9/15/2013 at 7:02 PM

I just tested in IE10 and it worked. Unfortunately I can't test in an earlier IE.

Comment 5 by Jesse posted on 9/15/2013 at 7:30 PM

Hmmm .... i have IE10 as well but it did not work in that but it worked in all most all other browsers.

Comment 6 by Raymond Camden posted on 9/15/2013 at 7:33 PM

Do you see anything in the IE10 Dev Tools? Don't forget some of the checkboxes have no data. Try the pharm checkbox.

Comment 7 by Jesse posted on 9/16/2013 at 1:28 AM

Yes your are right, it looks like i made a mistake when i tried to edit the codes. I am trying to make it work by getting the addresses from database but some how i am not able to get all the latitude and longitude on the fly. I haven't saved any lat or long in database but i am trying to produce them on the fly but its totally not working. Any script to produce multiple lat and long on the fly?

Thank you in advance!

Comment 8 by Raymond Camden posted on 9/16/2013 at 5:20 AM

@Jesse: Well, I'm not sure if I mentioned it on this post, but I have on others that Google puts limits on how many geocoding requests you can do at once. Therefore I now recommend folks geocode (ie translate an address to long/lat) in a difference process that you do *one time* only. Then it isn't a matter anymore.

Ok - so I read your first sentence and replied. I can see by your second sentence that you know this. You said you wrote a script for it but it isn't working, but you didn't say *why* it isn't working. What errors are you getting?

Comment 9 by Jesse posted on 9/17/2013 at 1:11 AM

Ray, i will be using 10 records at a time so, i think that won't make Google upset.

About error, yeah i was getting error for this line ...

if(checked.length !=0 && selTypes.indexOf(data[i].type) < 0) {

and the error was "Object doesn't support property or method 'indexOf'"

You will see this error if you have the option 'Display notifications about every script error' checked off.

First i thought it stopped but its still there. I am also using IE10. It works just fine in almost all other browsers but some how still not sorting out by the categories in IE10. But its not a big deal because i will be using this script for myself only.

By the way can this be achieved by eliminating the Lat and Long?

Comment 10 by Raymond Camden posted on 9/17/2013 at 1:15 AM

Um - ok - so I checked, and String.indexOf is supported in IE10:

Could you maybe try a quick test of that in your IE10? I.e. literally a page with JS that just tests that. Or shoot, just use the IE10 console.

"By the way can this be achieved by eliminating the Lat and Long?" Sorry, can _what_ be achieved? Plotting records? If so, yeah, Google has a Geocode API but it has limits on how often you can call it.

Comment 11 by Jesse posted on 9/17/2013 at 5:57 PM

Ray thanks a lot for your help! ....... yeah i made it work. I guess '/jquery/1.6.2/jquery.min.js' file was the issue. Now i just changed it to '/jquery/1/jquery.min.js' and this made it work.

"By the way can this be achieved by eliminating the Lat and Long?". Yeah, i was asking if there is any script which can show the multiple markers using the addresses only not the Lat / Long. But i was able to find a very short and easy PHP script to create Lat and Long on the fly. So, all this works fine now.

Once again thank you so much for all of your help!