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

Question

У меня проблемы с картой 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 id="map"></div> 

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

и после того, как размер окна браузера вновь оказывается совершенно как это

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

Answer 1

вызов google.maps.event.trigger (карта, 'resize'), когда будет отображаться ваша «div id = map». См. How do I resize a Google Map with JavaScript after it has loaded?

Answer 2

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

Answer 3

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

setTimeout(initMap2, 200); 

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

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

Answer 4

Я нашел, что это работает только после того, как объединить две вещи: SetTimeout и Google изменить размер.

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

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

И создать SetTimeout для initMap вроде этого:

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

- Редактировать

Чтобы ответить @ LucaC .: my initMap - это отдельный js, который я связываю с страницами. Решение выше определено в этом js (только setTimeout).

Но через некоторое время я заметил, что эта проблема все еще происходит с мобильными устройствами.

Работа вокруг: держать SetTimeout для initMap и на странице я загрузить карту, я создал

$(window).load(function(){ 
setTimeout(function(){ 
    google.maps.event.trigger(map, "resize"); 
}, 250); 
}); 

Итак: я) отложить что-нибудь, что сломать карту; ii) в конце концов, измените размер карты после загрузки страницы :)