In one of my projects, I needed to dynamically add overlays to the Google map for group of users . Basically, overlays can be added to Google map using latitude/longitude coordinates. In my case the trick is I don’t have the latitude/longitude for the users, I have the user addresses entered from sign up process.
Google provides geocoding to get the latitude/longitude from any address.
Please note:
It is not an exact match but works for my requirements. The following is the code to achieve this.
Google provides geocoding to get the latitude/longitude from any address. Please note, It is not that exact match but works for my requirements. The following is the code to achieve this.
Map.html
Project Members var PIcon = new GIcon(); PIcon.image = "http://203.129.204.130/images/person.png"; PIcon.iconSize = new GSize(32, 32); PIcon.iconAnchor = new GPoint(9, 32); PIcon.infoWindowAnchor = new GPoint(9, 2); PIcon.infoShadowAnchor = new GPoint(18, 25); var map = null; var geocoder = null; function addPerson(address, info) { if (geocoder) { geocoder.getLatLng(address, function(pt) { if (pt) { var marker = new GMarker(pt, PIcon); map.addOverlay(marker); GEvent.addListener( marker, 'click', function() { marker.openInfoWindowHtml(info); }); } }); } } $(function(){ if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); geocoder = new GClientGeocoder(); map.setCenter( new GLatLng(47.989922,-31.992187), 1); map.setUIToDefault(); map.setMapType(G_HYBRID_MAP); } addPerson('Delhi, Delhi, India', '
Mr. Y Delhi, India |
‘); addPerson(‘Bhubaneswar, Bhubaneswar, India’, ‘
Mr. X Bhubaneswar, Orissa |
‘); addPerson(‘Newyork, Newyork, US’, ‘
Mr. C New York, US |
‘); });