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

Integrated Google Map API in your web site

API(s) API(s) 
0 Comment(s)
 2753  View(s)
Rate this:

Integrated Google Map API in your web site

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>


        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) {


                    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);



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


    <div id="panel">

        <input id="address" type="textbox" value="Allahabad">

        <input type="button" value="Search" onclick="codeAddress()">


    <div id="map-canvas" style="width: 500px; height: 380px; border: 5px solid #5E5454;">




Output: -

Integrated Google Map API in your web site

Don't want to miss updates? Please click the below button!

Follow MindStick