Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> kilka map google na jednej stronie
waldemi
post
Post #1





Grupa: Zarejestrowani
Postów: 58
Pomógł: 0
Dołączył: 5.03.2007
Skąd: Leszno

Ostrzeżenie: (0%)
-----


Witam
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
  1. <div id="mapy">
  2. <div id="map1">
  3. <h2>Najciekawsze obserwacje</h2>
  4.  
  5. <div id="mapka1" style="width: 650px; height: 390px; border: 1px solid black; background: gray;"></div>
  6. </div>
  7. <div id="map2">
  8. <h2>Duże stada</h2>
  9.  
  10. <div id="mapka2" style="width: 650px; height: 390px; border: 1px solid black; background: gray;"></div>
  11. </div>
  12. <div id="map3">
  13. <h2>Fenologia</h2>
  14. <div id="mapka3" style="width: 650px; height: 390px; border: 1px solid black; background: gray;"></div>
  15. </div>
  16. <div id="maps_nav">
  17. <span id="m1">Najciekawsze</span> | <span id="m2">Duże stada</span> | <span id="m3">Fenologiczne</span>
  18. </div>
  19. </div>


Kod JQUERY
  1. $(document).ready(function (){
  2. $('#map1').show();
  3. $('#map2').hide();
  4. $('#map3').hide();
  5. $('#m1').click (function (){
  6. $('#map1').show();
  7. $('#map2').hide();
  8. $('#map3').hide();
  9. });
  10. $('#m2').click (function (){
  11. $('#map1').hide();
  12. $('#map2').show();
  13. $('#map3').hide();
  14. });
  15. $('#m3').click (function (){
  16. $('#map1').hide();
  17. $('#map2').hide();
  18. $('#map3').show();
  19. });
  20. })

Skrypt do obsługi Google Maps
  1. function mapaStart()
  2. {
  3. var wspolrzedne = new google.maps.LatLng(51.11683194140893,17.045674324035645);
  4. var opcjeMapy = {
  5. zoom: 7,
  6. center: wspolrzedne,
  7. mapTypeId: google.maps.MapTypeId.ROADMAP,
  8. scaleControl: true
  9. };
  10. var mapa = new google.maps.Map(document.getElementById("mapka1"), opcjeMapy);
  11.  
  12.  
  13. var wspolrzedne2 = new google.maps.LatLng(51.51683194140893,17.145674324035645);
  14. var opcjeMapy2 = {
  15. zoom: 7,
  16. center: wspolrzedne2,
  17. mapTypeId: google.maps.MapTypeId.TERRAIN,
  18. scaleControl: true
  19. };
  20. var mapa2 = new google.maps.Map(document.getElementById("mapka2"), opcjeMapy2);
  21. }
  22. .....

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.
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 21.08.2025 - 20:57