Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: kilka map google na jednej stronie
Forum PHP.pl > Forum > Po stronie przeglądarki
waldemi
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.
Arcioch
Witam.

Dzieje się tak ponieważ div z mapą drugą i trzecią tak na prawdę nie ma wysokości bo jest ukryty. Można to rozwiązać na trzy sposoby:

1. Zamiast używać show i hide pokazuj te mapki wszystkie a zmieniaj tylko z-index diva z mapka smile.gif
2. Wraz ze zmianą diva odświeżaj i centruj na nowo mapę
3. Generuj mapkę pierwszą a drugą i trzecią dopiero po kliknięciu

Pozdrawiam smile.gif
Arcio
waldemi
Dzięki za zinteresowanie. Zastosowałem sposób pierwszy i owszem, mapy wyświetlają się poprawnie ale jedna pod drugą zamiast jedna na drugiej.
Kod JQUERY zminiłem na
  1. $(document).ready(function (){
  2. $('#map1').css('z-index','3');
  3. $('#map2').css('z-index', '2');
  4. $('#map3').css('z-index', '1');
  5. $('#m1').click (function (){
  6. $('#map1').css('z-index', '3');
  7. $('#map2').css('z-index', '2');
  8. $('#map3').css('z-index', '1');
  9. });
  10. $('#m2').click (function (){
  11. $('#map1').css('z-index', '2');
  12. $('#map2').css('z-index', '3');
  13. $('#map3').css('z-index', '1');
  14. });
  15. $('#m3').click (function (){
  16. $('#map1').css('z-index', '2');
  17. $('#map2').css('z-index', '1');
  18. $('#map3').css('z-index', '3');
  19. });
  20. })

Na czym polegają sposoby 2 i 3 bo nie bardzo rozumiem?


Problem już rozwiązany. Dla poszczególnych elementów ustawiłem odpowiednie pozycjonowane i działa jak powinno.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.