Mam problem z wyświetleniem kilku map google na jednej stronie. Utworzyłem 3 DIV-y do wyświetlania map, wszystkie one znajdują się wewnątrz nadrzędnego. Po wejściu na stronę wyświetlana jest tylko pierwasza mapa a pozostałe są ukryte. Po kliknięciu na podpis pod mapa można przełączać się między nimi. Przełączanie jest realizowane przy użyciu JQUERY.
Kod strony HTML
Kod JQUERY
$(document).ready(function (){ $('#map1').show(); $('#map2').hide(); $('#map3').hide(); $('#m1').click (function (){ $('#map1').show(); $('#map2').hide(); $('#map3').hide(); }); $('#m2').click (function (){ $('#map1').hide(); $('#map2').show(); $('#map3').hide(); }); $('#m3').click (function (){ $('#map1').hide(); $('#map2').hide(); $('#map3').show(); }); })
Skrypt do obsługi Google Maps
function mapaStart() { var wspolrzedne = new google.maps.LatLng(51.11683194140893,17.045674324035645); var opcjeMapy = { zoom: 7, center: wspolrzedne, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var mapa = new google.maps.Map(document.getElementById("mapka1"), opcjeMapy); var wspolrzedne2 = new google.maps.LatLng(51.51683194140893,17.145674324035645); var opcjeMapy2 = { zoom: 7, center: wspolrzedne2, mapTypeId: google.maps.MapTypeId.TERRAIN, scaleControl: true }; var mapa2 = new google.maps.Map(document.getElementById("mapka2"), opcjeMapy2); } .....
Przełączanie pomiędzy mapami działa bez zarzutu. Po wejściu na stronę pierwsza mapa jest w porządku ale po przełączeniu się na drugą wczytywany jest tylko niewielki fragment mapy i do tego przesunięty, tj. podane współrzędne środka wypadają daleko poza obszarem diva. Trzeciej mapy na razie nie robiłem.
Umie ktoś mi pomóc? Można to jakoś zrealizować? Docelowo na każdej mapie mają być wyświetlane markery, na każdej inne.