How to add multiple markers in google map

By Hardik Savani | March 9, 2016 | | 3455 Viewer | Category : Google Map jQuery HTML


Share this post:

In this post we have to learn hoe to add a multiple location marker in google map.

add following code for add multiple location marker.

Add Google map canvas HTML code

<div id="map_wrapper">

<div id="map_canvas" class="mapping"></div>

</div>

Add Google map canvas CSS code

#map_wrapper {

height: 400px;

}

#map_canvas {

width: 100%;

height: 100%;

}

Add Google map canvas JS code for multiple marker

jQuery(function($) {

<!-- Asynchronously Load the map API -->

var script = document.createElement('script');

script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";

document.body.appendChild(script);

});

function initialize() {

var map;

var bounds = new google.maps.LatLngBounds();

var mapOptions = {

mapTypeId: 'roadmap'

};

<!-- Display a map on the page -->

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

map.setTilt(45);

<!-- Multiple Markers -->

var markers = [

['Bondi Beach', -33.890542, 151.274856, 4],

['Coogee Beach', -33.923036, 151.259052, 5],

['Cronulla Beach', -34.028249, 151.157507, 3],

['Manly Beach', -33.80010128657071, 151.28747820854187, 2],

['Maroubra Beach', -33.950198, 151.259302, 1]

];

<!-- Info Window Content -->

var infoWindowContent = [

['<div class="info_content">' +

'<h3>Bondi Beach</h3>' +

'</div>'],

['<div class="info_content">' +

'<h3>Coogee Beach</h3>' +

'</div>'],

['<div class="info_content">' +

'<h3>Cronulla Beach</h3>' +

'</div>'],

['<div class="info_content">' +

'<h3>Manly Beach</h3>' +

'</div>'],

['<div class="info_content">' +

'<h3>Maroubra Beach</h3>' +

'</div>']

];

<!-- Display multiple markers on a map -->

var infoWindow = new google.maps.InfoWindow(), marker, i;

<!-- Loop through our array of markers & place each one 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]

});

<!-- Allow each marker to have an info window -->

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

return function() {

infoWindow.setContent(infoWindowContent[i][0]);

infoWindow.open(map, marker);

}

})(marker, i));

<!-- Automatically center the map fitting all markers on the screen -->

map.fitBounds(bounds);

}

<!-- Override our map zoom level once our fitBounds function runs (Make sure it only runs once) -->

var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {

this.setZoom(10);

google.maps.event.removeListener(boundsListener);

});

}