Add multiple google map markers location with customized infowindows using google map Api

How to add multiple map marker points in your embedded google map, instead of embedded google map, we have to create google map using api, already i ave written an article about how to create google map api and how to get current location of user like that. now we are going to create multiple marker location in single map. lets see how it is.

DOWNLOAD LIVE DEMO

As i eplained about how to create google map api, just refer that tutorial to generate api key.

COMPLETE CODE

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Multiple marker location in google map</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #mymap {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="mymap"></div>

<script>
function initMap() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap',
    };
                    
    // Display a map on the web page
    map = new google.maps.Map(document.getElementById("mymap"), mapOptions);
    //map.setTilt(50);
        
    // Multiple markers location, latitude, and longitude
    var markers = [
        ['Chennai', 13.0827, 80.2707],
        ['Coimbatore', 11.0168, 76.9558],
        ['Bangalore', 12.9716, 77.5946]
    ];
                        
    // Info window content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>Chennai</h3>' +
        '<p>Chennai is the capital of the state of Tamil Nadu.</p>' + '</div>'],
        ['<div class="info_content">' +
        '<h3>Coimbatore</h3>' +
        '<p>Coimbatore is a city in the south Indian state of Tamil Nadu.</p>' +
        '</div>'],
        ['<div class="info_content">' +
        '<h3>Bengaluru</h3>' +
        '<p>Bengaluru is the capital of India southern Karnataka state.</p>' +
        '</div>']
    ];
        
    // Add multiple markers to map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    
    // Place each marker on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });
        
        // Add info window to marker    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Center the map to fit all markers on the screen
        map.fitBounds(bounds);
    }

    // Set zoom level

var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(7);
        google.maps.event.removeListener(boundsListener);
    });
    
}
</script>
<script async defer 
 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWjSQkpYWRMa93lsB6UbQ8jeEWtH7J43s
&callback=initMap">

    </script>
  </body>
</html>

The above highlighted code is the Api key, change that to your key. to create api key Please refer this link. How to create google map api key. And in the above code itself infowindow code is also available. Thanks for visiting our site, keep in touch with us for more updates.

Pages

17 March 2017

Add multiple google map markers location with customized infowindows using google map Api

No comments:

Post a Comment