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

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

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

смотрите документацию для события resize (вам нужно будет найти слово '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 событие изменения размера больше не является частью 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'); 
    });
}); 

Это был мой ответ, что работал для меня.

Вольфганга Пихлера map-in-a-box предлагает

загрузите карту в перетаскиваемый и изменяемый размер элемента 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 helper в CakePHP3. Когда я попытался открыть bootstrap modal popup, меня поразила проблема с серым ящиком над картой. Он был продлен на 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}));
});