Как изменить размер карты Google с помощью JavaScript после ее загрузки?

У меня есть div 'mapwrap', установленный на 400px x 400px, и внутри у меня есть карта Google, установленная на 100% x 100%. Таким образом, карта загружается с размером 400 x 400 пикселей, затем с помощью JavaScript я изменяю размер 'mapwrap' до 100% x 100% экрана - размер карты Google изменяется на весь экран, как я ожидал, но плитки начинают исчезать до правого края экрана. страница.

Есть ли простая функция, которую я могу вызвать, чтобы заставить карту Google перенастроиться на div большего размера mapwrap?

Если вы используете Google Maps v2, checkResize()после изменения размера контейнера вызовите карту. ссылка на сайт

ОБНОВИТЬ

Google Maps JavaScript API v2 устарел в 2011 году. Он больше не доступен.

для Google Maps v3 вам нужно запускать событие изменения размера по-другому:

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

См. Документацию по событию изменения размера (вам нужно будет найти слово "изменение размера"): http://code.google.com/apis/maps/documentation/v3/reference.html#event

Обновить

Этот ответ был здесь долгое время, поэтому небольшая демонстрация может быть полезной, и хотя он использует jQuery, в этом нет реальной необходимости.

$(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>

ОБНОВЛЕНИЕ 2018-05-22

С новым выпуском средства визуализации в версии 3.32 Maps JavaScript API событие resize больше не является частью Mapкласса.

В документации указано

При изменении размера карты центр карты фиксируется.

• Полноэкранный элемент управления теперь сохраняет центр.

• Больше нет необходимости запускать событие изменения размера вручную.

источник: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); не действует начиная с версии 3.32

Популярный ответ google.maps.event.trigger(map, "resize");не сработал для меня одного.

Это был трюк, который гарантировал, что страница загрузилась и карта тоже загрузилась. Установив слушателя и прослушивая состояние ожидания карты, вы можете затем вызвать триггер события для изменения размера.

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

Это был мой ответ, который помог мне.

« Карта в коробке» Вольфганга Пихлера предлагает

Загрузите карту в перетаскиваемый элемент div с изменяемым размером.

Это лучшее, что может сделать сделанную работу. Это изменит размер вашей карты. Больше не нужно проверять элемент, чтобы изменить размер карты. Что он делает, он автоматически запускает событие изменения размера.

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

Прежде всего, спасибо, что помогли мне и закрыли этот выпуск. Я нашел способ решить эту проблему из ваших обсуждений. Да, перейдем к делу. Дело в том, что я использую помощник GoogleMapHelper v3 в CakePHP3. Когда я попытался открыть модальное всплывающее окно начальной загрузки, меня поразила проблема с серым прямоугольником над картой. Он продлен на 2 дня. Наконец я исправил это.

Нам нужно обновить GoogleMapHelper, чтобы исправить проблему.

Необходимо добавить приведенный ниже скрипт в функцию setCenterMap

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

И вам нужен приведенный ниже код в JavaScript

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