30 July 2009

Normally we have to pass Latitude and Longitude to get location, but Using Google API “geocoder.getLatLng()” we can get location by passing address. thanks to one of my friend Dhiren Javia to find this solution for me.

saAction Location

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps API Example: Simple Geocoding</title>

    <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>

    <script type="text/javascript">

        var map = null;
        var geocoder = null;

        function initialize() {
            if (GBrowserIsCompatible()) {
                map = new GMap2(document.getElementById("map_canvas"));
                map.setCenter(new GLatLng(22.18, 70.56), 4);
                geocoder = new GClientGeocoder();
            }
        }

        function showAddress(address) {
            if (geocoder) {
                geocoder.getLatLng(
                address,
                function(point) {
                    if (!point) {
                        alert("Location not found : " + address);
                    } else {
                        map.setCenter(point, 13);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        marker.openInfoWindowHtml(address);
                    }
                }
                );
            }
        }

        showAddress(this.address.value);
    </script>

</head>
<body onload="initialize();" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
    <p>
        <input type="text" size="60" name="address" value="Rajkot" />
        <input type="submit" value="Go!" />
    </p>
    <div id="map_canvas" style="width: 500px; height: 300px">
    </div>
    </form>
</body>
</html>

1 comment :

  1. Boss thats really a nice article but on implementing this i am not able to get the maximise/minimise slider on the left nor the default three tabs on the top for - map, sattelite and terrain?

    Need help to show them also??

    ReplyDelete