Use google map with multiple marker

  => We already aware of google map very well. Here I'll show you how can we show a dynamic map with multiple/single marker in your html page.

•  Single Marker Map :  Here we'll pass the locations with latitude and longitude. see the below code:

                        <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>

<div style='overflow:hidden;height:350px;width:100%;'>

 <div id='gmap_holder' style='height:350px;width:100%;'></div>

</div>

<a href='http://www.maps-generator.com/'>maps-generator</a>

<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=36146cb0ad5227f5dc8c1bfb291b91c0f83c0c6d'></script> 

<script type='text/javascript'>

function init_map() {

var myOptions = {

zoom: 12,

center: new google.maps.LatLng(22.5736132, 88.3483409),

mapTypeId: google.maps.MapTypeId.ROADMAP

};

map = new google.maps.Map(document.getElementById('gmap_holder'), myOptions);

marker = new google.maps.Marker({

map: map,

position: new google.maps.LatLng(22.5736132, 88.3483409)

});

infowindow = new google.maps.InfoWindow({

content: '<strong>Jayanta Roy</strong><br>Kolkata, IN<br>'

});

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map, marker);

});

infowindow.open(map, marker);  // remove it to show the marker on click only

}

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

</script> 

         Here change the latitude and longitude shown as bold.

         You can get the latitude and longitude of your location here:    http://maps.googleapis.com/maps/api/geocode/json?address=YOUR ADDRESS/ZIP&sensor=false

• Multiple Marker Map :  Here we'll create an array of the locations with latitude and longitude. see the below code:

        <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>

        <div style='overflow:hidden;height:350px;width:100%;'>

          <div id='gmap_holder' style='height:350px;width:100%;'></div>

        </div>

        <a href='http://www.maps-generator.com/'>maps-generator</a>

        <script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=36146cb0ad5227f5dc8c1bfb291b91c0f83c0c6d'></script> 

        <script type='text/javascript'>

var locations = [

['Jayanta 1', 22.5683534, 88.36157129999999],

['Jayanta 2', 22.5418011, 88.3600216],

['Jayanta 3', 22.5736132, 88.3483409]

];

        function init_map(locations) {

            var myOptions = {

                zoom: 12,

                center: new google.maps.LatLng(22.5736132, 88.3483409),

                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            map = new google.maps.Map(document.getElementById('gmap_holder'), myOptions);

            var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  

marker = new google.maps.Marker({

map: map,

position: new google.maps.LatLng(locations[i][1], locations[i][2])

});

google.maps.event.addListener(marker, 'click', (function(marker, i) {

return function() {

 infowindow.setContent(locations[i][0]);

 infowindow.open(map, marker);

}

})(marker, i));

infowindow.open(map, marker);

}

        }

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

        </script>