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 latitude/longitude 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 since 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 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:

var data = [
{pos:{lat:43.219778,lng:-87.926058},address:'1340 west towne square road mequon wi 53092',title:'center for diagnostic imaging-mequon',type:'lab'},
{pos:{lat:43.0622043,lng:-88.0475662},address:'2445 north mayfair road wauwatosa wi 53226',title:'center for diagnostic imaging-wauwatosa',type:'lab'},
{pos:{lat:43.040085,lng:-88.0252289},address:'9200 w. wisconsin ave. milwaukee wi 53227',title:'clinical cancer center pharmacy',type:'pharmacy'},
{pos:{lat:43.040085,lng:-88.0252289},address:'w180 n8085 town hall road menomonee falls wi 53051',title:'community memorial hospital',type:'hospital'}
];

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 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:

  data.foreach(function(mapdata,idx) {
		
		var marker = new google.maps.marker({
			map: map, 
			position: new google.maps.latlng(mapdata.pos.lat,mapdata.pos.lng),
			title: mapdata.title,
			icon: geticon(mapdata.type)
		});
		var contenthtml = "<div style='width:300px;height:200px'><h3>"+mapdata.title+"</h3>"+mapdata.address+"</div>";
		var infowindow = new google.maps.infowindow({
			content: contenthtml
		});
		google.maps.event.addlistener(marker, 'click', function() {
		  infowindow.open(map,marker);
		});
		marker.locid = idx+1;
		marker.infowindow = infowindow;
		markers[markers.length] = marker;

		var sidehtml = '<p class="loc" data-locid="'+marker.locid+'"><b>'+mapdata.title+'</b><br/>';
			 sidehtml += mapdata.address + '</p>';
			 $("#locs").append(sidehtml); 

		//are we all done? not 100% sure of this
		if(markers.length == data.length) dofilter();

	});

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.

related blog entries

• simple google maps demo with custom markers (december 1, 2012)