Javascript 引导模式对话框缺少内嵌的谷歌地图-为什么？

我的网页上有几个链接，每个链接都用不同的位置数据描述了不同的地方。我想展示一个模式引导对话框，当用户点击任何链接时，其中嵌入谷歌地图——当然，对于每个链接，显示的位置都应该不同

我有引导对话框的html代码：

×
情态标题
接近
保存更改
var元素=$（此）；
var映射；
函数初始化（myCenter）{
var marker=new google.maps.marker({
位置：迈森特
});
var mapProp={
中心：迈森特，
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“地图画布”），mapProp）；
marker.setMap（map）；
};
$（'#myMapModal'）.on（'show.bs.modal'，function（e）{
控制台日志（“tutaj”）；
var元素=$（e.relatedTarget）；
var data=element.data（“lat”）.split（“，”）
初始化（新的google.maps.LatLng（数据[0]，数据[1]）；
google.maps.event.trigger（映射，'resize'）；
});

您应该设置

#地图画布的尺寸

，因为所有内容都带有

位置：绝对

工作示例：

var元素=$（此）；
var映射；
函数初始化（myCenter）{
var marker=new google.maps.marker({
位置：迈森特
});
var mapProp={
中心：迈森特，
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“地图画布”），mapProp）；
marker.setMap（map）；
};
$（'#myMapModal'）.on（'show.bs.modal'，function（e）{
控制台日志（“tutaj”）；
var元素=$（e.relatedTarget）；
var data=element.data（“lat”）.split（“，”）
初始化（新的google.maps.LatLng（数据[0]，数据[1]）；
google.maps.event.trigger（映射，'resize'）；
});
#地图画布{
宽度：100%；
高度：500px；
}

×
情态标题
接近
保存更改
@MoshFeu就在这里，这是你代码的提琴，只要用你的钥匙替换钥匙。@MuhammadOmerAslam谢谢！没问题，我只是投票赞成你的回答谢谢☺ 你真好，我很乐意