javascript - How to Set Zoom of Map to cover all markers visible Markers? -
i have created map markers fetching latlongs data mongodb collection.i have set center particular location , zoom level 5 want map should zoom-in or zoom-out based on marker's location.so dont have give particular location in center. please help.
the code below -
<div class="page-content"> <div id="tab-general"> <div id="map" style="height: 500px; width: 100%;"> </div> </div> </div> <script type="text/javascript"> //load data mongo data= <%-json.stringify(data)%> </script> <script type="text/javascript"> var latlngs = []; (j=0;j<data.length;j++){ latlngs[j] = [data[j].latitude, data[j].longitude, data[j].time, data[j].name]; } var map = new google.maps.map(document.getelementbyid('map'), { center: new google.maps.latlng(23.2500, 77.4170), zoom: 5, maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); var marker, ,ext; (i = 0; < latlngs.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(latlngs[i][0], latlngs[i][1]), map: map }); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent("time - "+latlngs[i][2]+"<br>user name -"+latlngs[i][3]); infowindow.open(map, marker); } })(marker, i)); }
thanks,
dia
what create latlngbounds object. add each marker, expand bounds include marker's location. after markers added, update map fit bounds, , adjust zoom automatically markers visible.
var bounds = new google.maps.latlngbounds(); (i = 0; < latlngs.length; i++) { position = new google.maps.latlng(latlngs[i][0], latlngs[i][1]); marker = new google.maps.marker({ position: position, map: map }); bounds.extend(position) } map.fitbounds(bounds);
Comments
Post a Comment