---
title: "Integrated Google Map API in your web site"  
description: "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"  
author: "Vijay Shukla"  
published: 2013-05-09  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1288/integrated-google-map-api-in-your-web-site  
category: "api(s)"  
tags: ["api(s)"]  
reading_time: 3 minutes  

---

# Integrated Google Map API in your web site

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370) I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to [explain](https://www.mindstick.com/forum/159699/what-is-a-compilation-error-in-dot-net-core-explain-with-an-example) how to [integrated](https://www.mindstick.com/forum/33532/handler-pagehandlerfactory-integrated-has-a-bad-module-managedpipelinehandler-in-its-module-list) [Google](https://yourviews.mindstick.com/story/1191/top-products-and-services-from-google) Map API which is only accept [country](https://yourviews.mindstick.com/view/85543/do-you-think-that-french-will-be-islamic-country) or city name nor [Latitude and Longitude](https://answers.mindstick.com/qa/51314/what-were-the-approximate-latitude-and-longitude-measurement-of-the-united-states-before-the-louisiana-purchase), 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](https://www.mindstick.com/blog/255/post-get-and-request-function-in-php) 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](https://www.mindstick.com/mindstickarticle/c16d7650-e439-47b7-8f1c-c1ac13fa8a0b/images/8f3a89eb-1148-4310-b8ff-d04d3159f5f7.png)

---

Original Source: https://www.mindstick.com/articles/1288/integrated-google-map-api-in-your-web-site

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
