Problem z Google Maps w ukrytym DIVie

Przy próbie wyświetlenia mapy Google znajdującej się w ukrytym divie (stosując np. zakładki na stronie) często pojawia się problem z prawidłowym ładowaniem mapy.
Mapa wygląda np. tak:
google

Wyeliminować go możemy resizując mapę już po załadowaniu/wyświetleniu ukrytego diva. Zrobimy to wywołując polecenie
google.maps.event.trigger(mapa, 'resize');

Dla przykładu – jeżeli ukrytego diva wyświetlamy funkcją wywoływaną przez onClick, po jej wywołaniu doklejamy powyższy kod.

Jeżeli po resizie mapa wyświetla się w całym zadanym obszarze, ale nie jest wyśrodkowana możemy użyć funkcji
mapa.setCenter(getCen);
gdzie getCen jest aktualnym środkiem mapy
getCen = mapa.getCenter();
Powyższą funkcję można wywołać wewnątrz funkcji initialize(), pamiętając jednak żeby przed ta drugą zadeklarować globalność zmiennej getCen (jeżeli zamierzamy ją użyć w onClick przełączanego taba).

Cały kod dla powyższego przykładu może mieć postać


<script type="\"text/javascript\"">// <![CDATA[
var getCen;
var mapa;
function initialize() {
var myLatlng = new google.maps.LatLng($szerokosc, $dlugosc);
var mapOptions = {
center: myLatlng,
zoom: $zoom
};
mapa = new google.maps.Map(document.getElementById(\"mapa\"),
mapOptions);
getCen = mapa.getCenter();
}
google.maps.event.addDomListener(window, 'load', initialize);
// ]]></script>

Zmianę taba z resizem i centrowaniem mapy wywołujemy wtedy np. tak:
<a onclick="tabShow('lokalizacja');google.maps.event.trigger(mapa, 'resize');mapa.setCenter(getCen);" href="#">lokalizacja</a>

Wyraź siebie

Napisz co Ty myślisz...
ooo i, jeśli chcesz fotkę widoczną z komentarzem, idź looknij na gravatar!

Musisz być zalogowany aby pisać komentarze.