Google Map Не отображается в Модальном всплывающем окне

Question

Я хочу показать google-карты в модальном всплывающем окне, но он, похоже, не появился. Нужна помощь.

Вот HTML -

<div id="map-canvas" style="width: 600px; height: 450px; background-color: grey;padding:0;margin:0"></div> 

JS -

function initialize() { 
    var myloc = new google.maps.LatLng(-34.397, 150.644); 
    var mapOptions = { 
     zoom: 17, 
     center: myloc, 
     scrollwheel: false 
    }; 
    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 
    var marker = new google.maps.Marker({ 
     position: map.getCenter(), 
     map: map, 
     animation: google.maps.Animation.BOUNCE 
    }); 
    var contentString = '<div id="content" style="dir:rtl; text-align:right;">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h1 id="firstHeading" class="firstHeading"><h1>title here</h1>'+ 
      '<div id="bodyContent">'+ 
      '<p>description here</p>'+ 
      '</div>'+ 
      '</div>'; 
    var infowindow = new google.maps.InfoWindow({ 
     content: contentString, 
     maxWidth: 250 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

Здесь вы Всплывающее изображение предварительного просмотра - Image Preview

Answer 1

Вы должны использовать resize на модальный показано, чтобы обновить вашу карту:

$('modal-id').on('shown.bs.modal', function() 
{ 
    google.maps.event.trigger(map, "resize"); 
}); 

Надеюсь, это поможет.