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

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

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

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

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

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

Ответ 4

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

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

Ответ 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 );

Ответ 6

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

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

Необходимо добавить ниже script в функцию setCenterMap

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

И нужно включить код ниже в JavaScript

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