Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Mapa google odpala się jedynie po zmianie rozdzielczosci

Zaczynasz dopiero swoją przygodę z HTML'em? A może mimo swojego doświadczenia natknąłeś się na jakiś problem? Tutaj na pewno znajdziesz pomoc.

Mapa google odpala się jedynie po zmianie rozdzielczosci

Post 13.07.2017, 13:33:47

Tak jak w temacie
http://orfi.uwm.edu.pl/~s129700/zdj/
Konsola nie pokazuje błędów.

Jakie macie pomysły, by na stronce po jej otwarciu od razu pojawiła się mapa bez zmieniania rozdzielczości?
Kod: Zaznacz cały
      <h3>My Google Maps Demo</h3>
            <div id="map"></div>


            <script>
                    function initMap() {
                        var uluru = {lat: -25.363, lng: 131.044};
                        var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 4,
                            center: uluru
                        });
                        var marker = new google.maps.Marker({
                            position: uluru,
                            map: map
                        });
                    }
            </script>
            <script async defer
                  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBm5SR2xPVP_s43Nc7RxsrHQci9GlDoE3M&callback=initMap">
            </script>



Kod: Zaznacz cały

#map {
   width: 100%;
   height: 400px;
   background-color: grey;
}
MateuszP
Posty: 2
Dołączył(a): 13.07.2017

Re: Mapa google odpala się jedynie po zmianie rozdzielczosci

Post 13.07.2017, 15:43:49

Na to zachowanie może mieć wpływ wiele czynników, np. kontener, który zawiera podany wyżej kod jest ukryty w momencie inicjalizacji mapy. Najlepiej jeśli podasz link do strony na której widać problem.

Jako tymczasowe obejście problemu możesz spróbować wywołać
Kod: Zaznacz cały
google.maps.event.trigger(map, 'resize');
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19531
Dołączył(a): 14.04.2002

Re: Mapa google odpala się jedynie po zmianie rozdzielczosci

Post 14.07.2017, 10:49:05

orfi.uwm.edu.pl/~s129700/Meble/
lokalizacja: "kontakt";
MateuszP
Posty: 2
Dołączył(a): 13.07.2017

Re: Mapa google odpala się jedynie po zmianie rozdzielczosci

Post 14.07.2017, 13:44:02

Na tej stronie to nie ten skrypt odpowiada za wyświetlanie mapy, ponieważ ten kod jest zakomentowany, a mapa nadal jest tworzona. Problemów w kodzie widzę kilka

1. Tak jak pisałem wyżej, problem z mapą wynika z tego, że w momencie inicjowania mapy, kontener na mapę jest ukryty (ponieważ jest w dziale kontakt, który nie jest widoczny od razu)

2. Skrypt (http://orfi.uwm.edu.pl/~s129700/Meble/a ... gle-map.js) nie czeka aż API google maps zostanie wczytane (element script z mapami google ma atrybuty async defer), więc czasami jest tak, że mapa w ogóle nie zostanie zainicjowana, a try...catch w kodzie skutecznie wycisza rzucane komunikaty błędów, przez co nieco trudno zdiagnozować problem. Może ten skrypt powinien eksportować do globalnej przestrzeni funkcję, którą wywołasz poprzez &callback=wyesportowanaFunkcja

3. przez to, że zacytowany wyżej przez Ciebie skrypt jest zakomentowany w kodzie, w konsoli widać błąd, że funkcja initMap nie istnieje. Pozbądź się &callback=initMap z kodu.

Proponuję najpierw rozwiązac problem 3, potem 2. Co do problemu nr 1, to jednym z rozwiązań byłoby wywołać google.maps.event.trigger(map, 'resize'); gdy aktywowana będzie zakładka kontakt lub całkiem opóźnić tworzenie mapy do momentu wczytania zakładki kontakt.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19531
Dołączył(a): 14.04.2002


Powrót do Początkujący webmaster


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 9 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50185 zarejestrowanych użytkowników.
Najnowszy użytkownik: sskijop


Nasi użytkownicy napisali:

  • 935001 wiadomości
  • w 246320 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)