[英]Google Map Does not appear in Modal Popup
我想在模態彈出窗口中顯示谷歌地圖,但它似乎沒有出現。 需要幫忙。
這是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);
這是彈出預覽圖像 - 圖像預覽
您應該在顯示的模態上使用resize
來刷新地圖:
$('modal-id').on('shown.bs.modal', function ()
{
google.maps.event.trigger(map, "resize");
});
希望這可以幫助。
我已經為模態彈出窗口中的靜態地圖加載添加了這個。
google.maps.event.addListener(map, "idle", function()
{
google.maps.event.trigger(map, 'resize');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.