Google Maps API with multiple marker
In our application or site we will be in need of showing Google MAP with markers of office or other location details. Here we will see simple example for showing a multiple animate overlay markers. Its a basic HTML code were everyone will be searching online.
Lets see simple example like showing markers in Indian cities like New Delhi, Mumbai, Kolkata, Chennai, Coimbatore, Bangalore and Haldwani. Below is the code while shows marker in each cities.
|
|
<html>
<head>
<title>Indian Cities </title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="india" style="width: 650px; height: 700px;"></div>
<script type="text/javascript">
var cities = [ ['New Delhi', 28.630657, 77.220154, 1],
['Mumbai', 19.059868, 72.880554, 2],
['Kolkata', 22.571240, 88.360291, 3],
['Chennai', 13.042734, 80.260620, 4],
['Bangalore', 12.967803, 77.590942, 5],
['Haldwani', 29.212430, 79.521790, 6],
['Coimbatore', 11.014352, 76.956482, 7] ];
var map = new google.maps.Map(document.getElementById('india'), {
zoom: 5,
center: new google.maps.LatLng(23.322080, 82.134766),
mapTypeId: google.maps.MapTypeId.ROADMAP,
animation:google.maps.Animation.BOUNCE
});
var infowindow = new google.maps.InfoWindow();
var marker;
for (var i = 0; i < cities.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(cities[i][1], cities[i][2]),
animation:google.maps.Animation.BOUNCE,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(cities[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>