Javascript 引导模式未在Google Maps上打开，请单击标记

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

我的代码笔：https://codepen.io/ilja-ankipovits/pen/QWWQyqK

我只添加了模态和整个谷歌地图脚本的开头。

---

我是谷歌API的新手，所以欢迎您提供更多的解释。

对于所有被理智问题困扰的人，请带着爱：）：

div id=“map”>
var映射；
函数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'）{
缩放：4，
中心：{lat:59.4370，lng:24.7536}，
});
var markerA=new google.maps.Marker({
位置：艺术大道，
地图：地图，
标题：“你好，世界！”
});
markerA.addListener（'click'，函数（e）{
地图设置中心（此位置）；
$（#art avenue modal'）。modal（'show'）；
});
var markerB=新的google.maps.Marker({
职位：artavenue2，
地图：地图，
标题：“你好，世界！2”
});
markerB.addListener（'click'，函数（e）{
地图设置中心（此位置）；
$（'art-avenue-modal2'）.modal（'show'）；
});
}

在您的代码笔中，在您准备好执行上述操作之前，您还有很多路要走。从简单开始

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>