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

Question

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

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

Answer 1

для 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

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

В документации говорится

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

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

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

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

google.maps.event.trigger(map, "resize"); не имеет никакого эффекта, начиная с версии 3.32

Answer 2

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

UPDATE

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

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

Прежде всего, спасибо за руководство и закрытие этой проблемы. Я нашел способ исправить эту проблему из ваших обсуждений. Да, давайте подойдем к делу. Дело в том, что я использую помощник 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}));
});