articles

Home / DeveloperSection / Articles / Integrated Google Map API in your web site

Integrated Google Map API in your web site

Vijay Shukla 6663 09-May-2013

In this article I am trying to explain how to integrated Google Map API which is only accept country or city name nor Latitude and Longitude, it will automatically get Latitude and Longitude after enter city or country name.

Script Code: -
<link href="https://maps/documentation/javascript/examples/default.css" rel="stylesheet" />

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
    <script>
        var geocoder;
        var map;
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(25.45, 81.85);
            var mapOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        function codeAddress() {
            var address = document.getElementById('address').value;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
Above code description

The status code may return one of the following values:

·    google.maps.GeocoderStatus.OK indicates that the geocode was successful.

·    google.maps.GeocoderStatus.ZERO_RESULTS indicates that the geocode was successful but returned no results. This may occur if the geocode was passed a non-existent address or a latng in a remote location.

·    google.maps.GeocoderStatus.OVER_QUERY_LIMIT indicates that you are over your quota.

·    google.maps.GeocoderStatus.REQUEST_DENIED indicates that your request was denied for some reason.

·    google.maps.GeocoderStatus.INVALID_REQUEST generally indicates that the query (address or latLng) is missing.

HTML Code: -
<body>

    <div id="panel">
        <input id="address" type="textbox" value="Allahabad">
        <input type="button" value="Search" onclick="codeAddress()">
    </div>
    <div id="map-canvas" style="width: 500px; height: 380px; border: 5px solid #5E5454;">
    </div>
</body>

 

Output: -

Integrated Google Map API in your web site


Updated 07-Sep-2019

Leave Comment

Comments

Liked By