How to add multiple pins on Google map?

This post was most recently updated on August 2nd, 2024

Demo: MultiplePin

Script code:

<script src=”http://maps.google.com/maps/api/js?sensor=false” type=”text/javascript”></script>
<script type=”text/javascript”>
var locations = [
[‘New Sangvi’, 18.58671, 73.8154, 4],
[‘Aundh’, 18.5574017, 73.80955740, 5],
[‘Old Sangvi’, 18.571264, 73.81985, 3],
[‘Khadki’, 18.570416, 73.8595490000, 2],
[‘Dapodi’, 18.58126800, 73.83438600, 1]
];

var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 12,
center: new google.maps.LatLng(18.58671, 73.8154),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
//only one time drop
marker.setAnimation(google.maps.Animation.DROP);
////for bouncing
//marker.setAnimation(google.maps.Animation.BOUNCE);

//add listner when click on particular pin (if you dont want then simply comment it.)
google.maps.event.addListener(marker, ‘click’, (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>

HTML code:

<div id=”map” style=”width: 500px; height: 400px;”></div>

Thanks 🙂