javascript - Realign Google Maps to fit all markers into to the right 70% of the map -


i provide client solution displaying of branches in 1 city on map (google maps javascript api). map behaves more in-website app typically google map - not draggable, zoomable, , on.

i put tiny function handles repositioning of map have markers in maps viewport. function called on pageload , everytime window resized.

while works perfectly, need fine-tune script more , have no clue on how it: later on, there permanent info-window overlaying left 30% of map. prevent markers being hidden under it, nice if the realign function restricted use right 70% of map object calculation.

here funtion looks like:

function realignmap() {   resizefinished(function(){     var bounds = new google.maps.latlngbounds();     (var = 0; < markers.length; i++) {       bounds.extend(markers[i].getposition());     }     map.fitbounds(bounds);   }, 300, 'mapresizeuniqueid'); } 

map , markers global variables containing google maps map-object , array google maps marker-objects. resizefinished small work-around bug maximizing , snapping of window prevent event being fired.

thanks in advance tipp can provide! greetings - jonathan

p.s.: please don't provide jquery solutions if not necessary...

i can think of 2 solutions problem:

1. shrink map div size want. why display div on map? why don't shrink map div when info-window present? , resize when info-window not present (care: trigger resize event on map after of operations) if have no actual reason suggest go solution.

2. if 1. not viable can create fake bounds element, in appropriate distance ti left calculated bounds. e.g. original bounding box lng starts @ 50 , ends in 70. means it's width 20, 20*0.3=6 create fake element @ lng 50-6=44 , fit map new bounds. code (untested):

function realignmap() {   resizefinished(function(){     var bounds = new google.maps.latlngbounds();     (var = 0; < markers.length; i++) {       bounds.extend(markers[i].getposition());     }     var width = bounds.getsouthwest().lng() > bounds.getnortheast().lng() ? (180 - bounds.getsouthwest().lng()) + (bounds.getnortheast().lng() - (-180)) : bounds.getsouthwest().lng() - bounds.getnortheast().lng();     if(width > 180);     var new_lng = bounds.getsouthwest().lng() - (width * 0.3);     if(new_lng < -180) new_lng = 180 - (-180 - new_lng);     bounds.extend(new google.maps.latlng(bounds.getcenter().lat(), new_lng);     map.fitbounds(bounds);   }, 300, 'mapresizeuniqueid'); } 

of course wouldn't work if markers covering bigger lng span 70% of whole earth.

edit edited code work when bounds.getsouthwest().lng() > bounds.getnortheast().lng()


Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

java - Digest auth with Spring Security using javaconfig -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -