Як змінити розмір карти Google із JavaScript після завантаження?

У мене в розділі "mapwrap" встановлено 400px x 400px, а всередині цього "map" Google "встановлено на 100% x 100%. Отже, карта завантажується в 400 х 400 пікселів, потім за допомогою JavaScript я змінюю розмір "перегляду карти" до 100% х 100% екрана - карта Google змінюється на весь екран, як я очікував, але плитки починають зникати перед правою кромкою сторінки.

Чи є якась проста функція, яку я можу викликати, щоб змусити карту Google повторно налаштуватись на роздільник "mapwrap" більшого розміру?

Якщо ви використовуєте Google Maps v2, дзвоніть checkResize()на карту після зміни розміру контейнера. посилання

ОНОВЛЕННЯ

API API Google Maps 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 API JavaScript Maps, подія зміни розміру більше не є частиною 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'); 
    });
}); 

Це була моя відповідь, яка працювала на мене.

Піхлер в карті-в-коробці пропозиції до

Завантажте карту в елемент, який перетягується та змінює розмір.

Це найкраще це зробить виконана робота. Він змінить розмір вашої карти. Більше не потрібно перевіряти елемент, щоб змінити розмір карти. Що це зробить, це автоматично спричинить події повторного розміру.

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