i have te following code:
var bound = new google.maps.latlngbounds(); if (arrmarkers.length > 0) { (var = 0; < arrmarkers.length; i++) { bound.extend(new google.maps.latlng(arrmarkers[i].getposition().lat(), arrmarkers[i].getposition().lng())); } strdefaultltlong = bound.getcenter();// center bounds } var image = 'images/star.png'; var mapoptions = { center: strdefaultltlong, maptypeid: google.maps.maptypeid.roadmap, disabledoubleclickzoom: true, zoom: parseint(strdefaultzoomlevel) } map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); if (arrmarkers.length == 1) { map.setzoom(parseint(strdefaultzoomlevel)); } else if (arrmarkers.length > 1) { map.fitbounds(bound); google.maps.event.addlistener(map, 'idle', function (event) { if (map.getzoom() > parseint(strdefaultzoomlevel)) { map.setzoom(parseint(strdefaultzoomlevel)); } }); google.maps.event.clearlisteners(map, 'idle'); }
i have list of locations in arrmarkers. fitbounds() function works if locations have different location if list of locations has same location(lat&long) displays zoomed map.
how can handle default zoom or particular zoom level listing display appropriatly?
thanks..
if locations of markers equal, may compare sw , ne of bounds, should equal too:
//if (arrmarkers.length == 1) { if(bounds.getsouthwest().tourlvalue() === bounds.getnortheast().tourlvalue()){ map.setzoom(parseint(strdefaultzoomlevel)); }
demo:
function init() { var goo=google.maps, strdefaultzoomlevel='7', map = new goo.map(document.getelementbyid('map_canvas'), { zoom: parseint(strdefaultzoomlevel), noclear:true }), btn=document.getelementbyid('btn'), markers=[ new goo.marker({position:{lat:11.11,lng:22.22}, icon:{ url:'http://maps.google.com/mapfiles/dir_0.png', scaledsize:new goo.size(48,48) }}), new goo.marker({position:{lat:11.11,lng:22.22}, icon:{ url:'http://maps.google.com/mapfiles/dir_60.png', scaledsize:new goo.size(48,48) }}), new goo.marker({position:{lat:66.66,lng:77.77}, icon:{ url:'http://maps.google.com/mapfiles/dir_0.png', scaledsize:new goo.size(48,48) }}) ]; map.controls[goo.controlposition.bottom_center] .push(btn); goo.event.adddomlistener(btn,'click',function(){ for(var i=0;i<markers.length;++i){ markers[i].setmap(null); } this.value=(this.value==='draw equal markers') ? 'draw different markers' : 'draw equal markers'; var arrmarkers=markers.slice.apply(markers,(this.value==='draw equal markers') ? [1,3] : [0,2]), bounds=new goo.latlngbounds(); for(var i=0;i<arrmarkers.length;++i){ arrmarkers[i].setmap(map); bounds.extend(arrmarkers[i].getposition()); } if(bounds.getsouthwest().tourlvalue() === bounds.getnortheast().tourlvalue()){ map.setoptions({ zoom:parseint(strdefaultzoomlevel), center:bounds.getcenter() }); } else{ map.fitbounds(bounds); } }); google.maps.event.trigger(btn,'click'); }
html,body,#map_canvas{height:100%;margin:0;padding:0;} #btn{font:14px bold monospace;background:tomato;margin-bottom:12px;}
<div id="map_canvas"> <input id="btn" type="button" value="draw equal markers"/> </div> <script src="https://maps.googleapis.com/maps/api/js?v=3&callback=init"></script>
Comments
Post a Comment