c# .net Adsense ADO.NET Linq Viruses/security asp.net MVC JQuery Angular-js Node-js SEO Java C++ SQL API Networking vb.net .Net Css JavaScript Generics c#.Net entity framework HTML Website host Website Construction Guide HTTP tutorial W3C tutorial Web Services JSON Psychology Ionic framework Angular ReactJS Python Computer Android
API

How to use google map API in website?

| | Html , JavaScript , JQuery

In this article, I will show you how to integrate google maps into website. The google maps API v3 accepts country name or city name or Latitude and Longitude. If you enter a city or country name it automatically get the Longitude and Latitude value.

The google maps API supports Html5 and you have to declare DOCTPYE set to true within your web application. Create a div element id “map-canvas” and load the maps using JavaScript API and display location on google map.

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=YOUR-KEY" type="text/javascript"></script>

The URL contained in the script tag of the source will load all the symbols and definition of the goolge maps API.  You need to pass the parameter API key to the URL. To Load country or city on the textbox click the link

To get started working with google maps location API click the link which will guide you the process of activating it.

Html code:

<h2>integrate google map in website </h2>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key= YOUR-KEY" type="text/javascript"></script>
<script>
var geocoder;
    var map;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(40.73, -73.93);
        var mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            animation: google.maps.Animation.BOUNCE
        });
        marker.setMap(map);
    }
    function getAddress() {
        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>
<body>
    <div id="panel">
        <input id="address" type="text" value="New York">
        <input type="button" value="Search" onclick="getAddress()">
    </div>
    <div id="map-canvas" style="width: 500px; height: 380px; border: 5px solid #5E5454;">
    </div>
</body>

Description: It has two required and optional parameters. The zoom property will zoom the corresponding map of the fully earth. If you entered larger value, zoom levels are at higher resolution. The following web page will display a map of New york city, USA. 

Google map jQuery example: