Google Maps and Markers Update

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:

console.log(results[0].geometry.location.lat()+’,’+results[0].geometry.location.lng(),mapData.title);

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 developer advocate looking for his next gig. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

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

Comments