1 min read
google map show multiles marks with infowindow
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info window with <code>maxWidth</code></title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var locations = [{"title":"Dr. test test","latitude":"23.0061749","longitude":"72.5190038","iw_content":"<div id='content'>n<div class='map_photo'>n<img src='http://localhost/healthjump/images/mypro.png'/>n</div>n<div class='map_dleft'>n<span class='dname'>Dr. test test</span><br/>n<span class='speciality'>03-Internist</span><br/>n<span class='practice'>NYU Faculty Group Practice</span><br/>n<span class='email'>abc@gmail.com</span>n</div>n<div class='map_last_add'>n<span class='address'>vejalpur, ahmedabad, nGujarat, India - </span>n</div>n</div>"},
{"title":"Dr. Mohit Gupta","latitude":"23.0095879","longitude":"72.5618894","iw_content":"<div id='content'>n<div class='map_photo'>n<img src='http://localhost/healthjump/images/mypro.png'/>n</div>n<div class='map_dleft'>n<span class='dname'>Dr. Mohit Gupta</span><br/>n<span class='speciality'>04-Nephrologist</span><br/>n<span class='practice'>NYU Faculty Group Practice</span><br/>n<span class='email'>test@vervesys.com</span>n</div>n<div class='map_last_add'>n<span class='address'>paldi, ahmedabad, nGujarat, India - </span>n</div>n</div>"}];
function reset_map()
{
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: new google.maps.LatLng(23.035959, 72.529388),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({maxWidth: 350, maxHeight:250});
var fullBounds = new google.maps.LatLngBounds();
var marker, i;
for (i = 0; i < locations.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]['latitude'], locations[i]['longitude']),
map: map,
//icon: './images/map_marker.png',
//shadow: './images/map_marker.png'
title:locations[i]['title']
});
var point=new google.maps.LatLng(locations[i]['latitude'], locations[i]['longitude']);
fullBounds.extend(point);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i]['iw_content']);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(fullBounds);
}
google.maps.event.addDomListener(window, 'load', reset_map);
</script>
</head>
<body>
<div id="map-canvas" style="height:500px;width: 500px;"></div>
</body>
</html>
