Last updated on January 9th, 2020 at 12:36 pm
Google maps are always very help full to find location and lots of thing over map. In my last tut i will explain you that how we can find our current location over google map and also tell you that how we add our custom design over map. Now in this tut i will explain you that how we can add display multiple markers or pin over google map.
Code to add multiple marker
<!DOCTYPE html />
<html>
<head>
<title>Google maps Multiple Marker Demo - trinity tuts</title>
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:800,600' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
['Taj Mahal', 27.175015, 78.042155],
['Jwalamukhi', 31.875237, 76.320309]
];
function initializeMaps() {
var myOptions = {
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
</script>
</head>
<body onLoad="initializeMaps()">
<div id="map_canvas" style="width:100%; height:600px"></div>
</body>
</html>
Thanku!!
Happy coding!!