Jak zmienić rozmiar mapy Google za pomocą JavaScript po jej załadowaniu?

105

Mam div „mapwrap” ustawiony na 400px x 400px, a wewnątrz mam „mapę” Google ustawioną na 100% x 100%. Mapa wczytuje się w rozmiarze 400 x 400 pikseli, a następnie za pomocą JavaScript zmieniam rozmiar `` mapwrap '' na 100% x 100% ekranu - mapa google zmienia rozmiar na cały ekran, tak jak się spodziewałem, ale kafelki zaczynają znikać przed prawą krawędzią strona.

Czy istnieje prosta funkcja, którą mogę wywołać, aby spowodować ponowne dostosowanie mapy Google do większego rozmiaru div „mapwrap”?

javascript css google-maps

— Matthew James Taylor
źródło

28

Jeśli korzystasz z Map Google v2, wywołaj checkResize()swoją mapę po zmianie rozmiaru kontenera. połączyć

AKTUALIZACJA

Interfejs API JavaScript w Mapach Google w wersji 2 został wycofany w 2011 r. Nie jest już dostępny.

— SingleNegationElimination
źródło

323

w przypadku Map Google v3 musisz wyzwolić zdarzenie zmiany rozmiaru w inny sposób:

google.maps.event.trigger(map, "resize");

Zobacz dokumentację zdarzenia zmiany rozmiaru (musisz wyszukać słowo „resize”): http://code.google.com/apis/maps/documentation/v3/reference.html#event

Aktualizacja

Ta odpowiedź istnieje od dawna, więc małe demo może być warte zachodu i chociaż używa jQuery, nie ma takiej potrzeby.

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });
});

html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

Rozwiń fragment

AKTUALIZACJA 22.05.2018

Wraz z nową wersją mechanizmu renderującego w wersji 3.32 interfejsu API JavaScript Maps zdarzenie resize nie jest już częścią Mapklasy.

Dokumentacja stwierdza

Po zmianie rozmiaru mapy środek mapy jest ustalany

Kontrolka pełnego ekranu zachowuje teraz środek.

Nie ma już potrzeby ręcznego wyzwalania zdarzenia zmiany rozmiaru.

źródło: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); nie ma żadnego efektu począwszy od wersji 3.32

— cmroanirgo
źródło

2

Dla każdego, kto używa goMap, pamiętaj, że obiekt mapy google jest dostępny pod adresem $ .goMap.map

— Adam Caviness

1

Zobacz tę odpowiedź autorstwa Andrew Hedgesa, aby dowiedzieć się, jak wdrożyć:

— dowiedzieć CrazyTim,

Mapa nie zmieniłaby rozmiaru po wywołaniu tego, dopóki nie zawinęłam jej za pomocą setTimeout. Znalazłem to rozwiązanie tutaj (patrz komentarz # 46).

— Tyler Collier

Należy wybrać tę odpowiedź, biorąc pod uwagę, że wersja 2 jest obecnie przestarzała. @Tyler Collier to wyzwalacz zdarzenia ma na celu powiadomienie mapy, że musi się przemalować. Możliwe, że zmieniasz rozmiar ukrytego kontenera, w takim przypadku tak, pomniejszanie i przybliżanie działałoby po przekroczeniu limitu czasu.

— Schien

8

Popularna odpowiedź google.maps.event.trigger(map, "resize");nie działała tylko dla mnie.

Oto sztuczka, która zapewniała załadowanie strony i mapy. Ustawiając nasłuchiwanie i nasłuchując stanu bezczynności mapy, można wywołać wyzwalacz zdarzenia w celu zmiany rozmiaru.

$(document).ready(function() {
    google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, 'resize'); 
    });
});

To była moja odpowiedź, która mi pomogła.

— italiansoda
źródło

2

Mapa w pudełku Wolfganga Pichlera oferuje

Załaduj mapę do elementu div, który można przeciągać i zmieniać jego rozmiar.

— Gilles 'SO- przestań być zły'
źródło

1

Wygląda na to, że dotyczy map v2. Oryginalny plakat pytał o mapy v3. Te dwa interfejsy API nie wydają się być zgodne.

— JoshuaD

To łącze wyzwala wykryte zagrożenie.

— intotecho

1

Najlepiej zrobi to, co wykonałeś. Spowoduje to zmianę rozmiaru mapy. Nie ma już potrzeby sprawdzania elementu, aby zmienić rozmiar mapy. To, co robi, automatycznie wywoła zdarzenie zmiany rozmiaru.

    google.maps.event.addListener(map, "idle", function()
        {
            google.maps.event.trigger(map, 'resize');
        });

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );

— Divyanshu Rawat
źródło

0

Przede wszystkim dziękuję za poprowadzenie mnie i zamknięcie tego numeru. Znalazłem sposób na rozwiązanie tego problemu na podstawie twoich dyskusji. Tak, przejdźmy do rzeczy. Chodzi o to, że używam pomocnika GoogleMapHelper v3 w CakePHP3. Kiedy próbowałem otworzyć wyskakujące okienko modalne bootstrap, uderzył mnie problem szarego pola na mapie. Został przedłużony o 2 dni. W końcu udało mi się to naprawić.

Musimy zaktualizować GoogleMapHelper, aby naprawić problem

Musisz dodać poniższy skrypt w funkcji setCenterMap

google.maps.event.trigger({$id}, \"resize\");

I należy dołączyć poniższy kod w JavaScript

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});

— user1933951
źródło