Po otwarciu mapy Google po zmianie wielkości kontenera

Question

Mam zestaw map Google z Javascript API V3. Jest wyświetlany w div z dynamiczną szerokością, ponieważ okienko zawartości przesuwa się po kliknięciu znacznika.

Wszystko działa dobrze, ale jedno: Gdy panel przesunie się, szerokość mapy zostanie zmieniona, a środek zostanie przesunięty w prawo (okienko po lewej stronie). Jest to naprawdę niedogodne szczególnie w przypadku małych rozdzielczości, w których nie można zobaczyć centrum po otwarciu panelu.

Próbowałem wyzwalacza "zmiany rozmiaru", ale to nie działa ... Jakieś pomysły?

Wielkie dzięki!

Answer 1

Dzwoniąc pod numer resize, sam nie osiągnie tego, czego potrzebujesz.

Co trzeba zrobić, to najpierw (zanim nastąpi zmiana rozmiaru) uzyskać aktualny środku mapy

var currCenter = map.getCenter(); 

to trzeba coś zrobić jak poniżej, po tym jak twój div jest zmieniany.

google.maps.event.trigger(map, 'resize'); 
map.setCenter(currCenter); 

powinno wystarczyć

Answer 2

omarello działa, ale nie mogę upvote go. Prawdopodobnie zapomniałeś odnieść się do var, który definiuje twoje współrzędne środkowe. Wszystkie "zmiany rozmiaru" nie są ciągnąć div aktualnej szerokości i wysokości, to nic nie zmienia w mapie - jeszcze!

var center = new google.maps.LatLng(39.5, -98.3); 

$(document).ready(function() { 
    $("#fullsize").click(function(e) { 
     e.preventDefault(); 
     $("#map_canvas").css({ 
      width: '1000px'}); 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(center); 
     }); 
    }); 

Answer 3

Najpierw ustaw zmienną dla bieżącego centrum, a następnie użyj detektora zdarzeń, aby wykryć zmianę rozmiaru, a tym samym ustawić środek.

//Get current center 
var getCen = map.getCenter(); 

//Use event listener for resize on window 
google.maps.event.addDomListener(window, 'resize', function() { 
    //Set Center 
    map.setCenter(getCen); 
}); 

Answer 4

Hy tam spróbować;)

na mapie inicjalizacji

var currentMapCenter = null; 
google.maps.event.addListener(map, 'resize', function() { 
    currentMapCenter = map.getCenter(); 
}); 

google.maps.event.addListener(map, 'bounds_changed', function() { 
    if (currentMapCenter) { 
    // react here 
     map.setCenter(currentMapCenter); 
    } 
    currentMapCenter = null; 
}); 

po tym, gdy po prostu zadzwonić tou chcesz Map resize.

google.maps.event.trigger(map, 'resize');