Geocoding Google Map

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Project Members</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
    <div id="page">
        <div id="map_canvas" style="width: 600px; height: 300px"></div>
    </div>

<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAANFV3Oyukdk5m4Smr9RItFxTSboY8N0Ftlr2DgPf-MCdk7F34ZxQpZvlqfGqo8CtTnyvu6PHXSvlxAA"
            type="text/javascript"></script>
<script type="text/javascript">
    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', '<table><tr valign="top"><td><img src="http://203.129.204.130/dacapo/images/users/thumbnail/nophoto.gif" style="width:60px; height:30px;"></td><td> </td><td><b>Mr. Y</b><br/>Delhi, India</td></tr></table>');

addPerson('Bhubaneswar, Bhubaneswar, India', '<table><tr valign="top"><td><img src="http://203.129.204.130/dacapo/images/users/thumbnail/nophoto.gif" style="width:60px; height:30px;"></td><td> </td><td><b>Mr. X</b><br/>Bhubaneswar, Orissa</td></tr></table>');

addPerson('Newyork, Newyork, US', '<table><tr valign="top"><td><img src="http://203.129.204.130/dacapo/images/users/thumbnail/nophoto.gif" style="width:60px; height:30px;"></td><td> </td><td><b>Mr. C</b><br/>New York, US</td></tr></table>');

});

</script>

</body>
</html>

Related Tags:
Google Maps, Web Development

Author: Premananda Das,

Software Technology Tips

Web Development

Let us Connect!