Google map show после изменения размера экрана?

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

Вот мой код js:

<script>
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 31.554606, lng: 74.357158},
          zoom: 14
        });
 google.maps.event.addListenerOnce(map, 'idle', function() {
               google.maps.event.trigger(map, 'resize');
            });
         } 
</script>

мой div

<div id="map"></div>

когда я загружаю приложение, он выглядит как

и после окна браузера re size size это выглядит как это

любезно скажите мне, как исправить эту проблему?

Ответы

Ответ 1

вызовите google.maps.event.trigger(map, 'resize'), когда будет отображаться ваша "div id = map". См. Как изменить размер карты Google с помощью JavaScript после его загрузки?

Ответ 2

Установщик событий настроен на изменение размера, он должен быть установлен в onload.

Ответ 3

Ничего не работало для меня. Для загрузки карты я использовал поле "Модель" в Bootstrap. Я пробовал все в течение нескольких часов. Каждый раз, когда я загружал карту, я видел серый квадрат, но как только я изменил размер браузера, он отобразил бы карту. Казалось, что требуется изменить размер окна. Поэтому я включил всю функциональность карты в функцию под названием initmap2() и отобразила в ней новую карту. и после щелчка я использовал

setTimeout( initMap2, 200 );

Итак, как только откроется окно Modal, он отобразит карту, и я попробовал работать с 100 milliseconds, но я думаю, что он работает с 200+ milliseconds, поэтому я сохранил 500ms только для того, чтобы быть в безопасности.

Я надеюсь, что это поможет

Ответ 4

Я нашел, что это работает только после объединения двух вещей: setTimeout и google resize.

Итак, в конце initMap я установил:

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

И создайте setTimeout для initMap следующим образом:

$(document).ready(function(){
  setTimeout(initMap, 1000);
});