Bootstrap模态没有在谷歌地图标记点击上打开

Question

我尝试了几个选项，但没有成功。我的主要目标是打开一个以位置信息为中心的引导模式。我试着把触发按钮放在infoWindow上，但当我点击它时，页面只显示灰色半透明背景。我做了一张简单的地图，试图在那里进行测试。

My codepen: https://codepen.io/ilja-ankipovits/pen/QWWQyqK

我只添加了模态和整个谷歌地图脚本的开头。我是谷歌API的新手，所以欢迎更多的解释。

Answer 1

对于所有陷入理智问题的人，带着爱：(：

div id="map"></div>
<script>
var map;
function initMap() {
var artavenue = {lat:59.441970, lng: 24.784039};
var artavenue2 = {lat:59.421521, lng: 24.724763};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat:59.4370, lng:24.7536},
});
var markerA = new google.maps.Marker({
position: artavenue,
map: map,
title: 'Hello World!'
});
markerA.addListener('click', function(e) {
map.setCenter(this.position);
$('#art-avenue-modal').modal('show');
});
var markerB = new google.maps.Marker({
position: artavenue2,
map: map,
title: 'Hello World!2'
});
markerB.addListener('click', function(e) {
map.setCenter(this.position);
$('#art-avenue-modal2').modal('show');
});
}
</script>