Карты Google в модальном режиме показывают только серый цвет, после двойного щелчка по нему отображается - PullRequest
Новая
       13

Карты Google в модальном режиме показывают только серый цвет, после двойного щелчка по нему отображается

0 голосов
/ 03 мая 2018

Javascript: 

<script type="text/javascript">
   var map;
   function initMap() {
     var mapCanvas = document.getElementById('gmap_basic');
     var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8
      }
     map = new google.maps.Map(mapCanvas, mapOptions)
     google.maps.event.addDomListener(window, 'load', initMap);
     }
    $('#myModal').on('shown.bs.modal', function () {
      google.maps.event.trigger(map, "resize");
    });
 </script>

 <script async defer src="https://maps.googleapis.com/maps/api/js?key='YOUR KEY'&callback=initMap"></script>

CSS 

#gmap_basic {
    height: 300px;
    width: 400px;
}

HTML 

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div id="gmap_basic"></div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
     </div>
   </div>
 </div>

<a class="btn btn-default" data-toggle="modal" data-target="#myModal">Map</a>

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

1 Ответ

0 голосов
/ 11 мая 2018

Скорее всего, это происходит из-за того, что событие resize никогда не запускается, попробуйте обернуть его внутри функции . ready(), чтобы гарантировать, что событие shown.bs.modal запускается после загрузки DOM, например: 

$(function () {
  $('#myModal').on('shown.bs.modal', function () {
        google.maps.event.trigger(map, "resize");
        console.log('resize');
  });  
});

Существует также другая проблема с загрузкой Карт Google. Поскольку карта инициализируется с помощью параметра callback, эта строка: 

 google.maps.event.addDomListener(window, 'load', initMap);

здесь не нужен.

Демо

...