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

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”?

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.

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>

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

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.

Mapa w pudełku Wolfganga Pichlera oferuje

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

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 );

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}));
});