Javascript 是否可以在同一网站的多个页面上使用谷歌地图API？

我想用三张地图，一页两张，另一页一张，都在同一个网站上。我可以让一个页面工作，但不能让另一个页面工作，它往往是我选择在window.onload函数中执行的第一个页面。所以我知道我的代码中没有问题，因为我可以让它们全部工作，只是不能同时工作。我唯一能想到的是，可能是因为我在每个页面上使用相同的API键？如果是，如何获得单独的密钥？这是我的密码：

///////////////////////////////////////////////////////////// Google Maps
function scaligeroMap() {
var scaligeroLocation = new google.maps.LatLng(45.766281, 10.8088879);

var mapOptions = {
  'center' : scaligeroLocation,
  'zoom' : 17,
};

var map = new google.maps.Map(document.getElementById('scaligeroMap'), mapOptions);
var marker = new google.maps.Marker({
        'position' : scaligeroLocation,
        'map' : map,
        'title' : 'Castello Scaligero'
    });

//////////////////////////////////////////////Pop up containing address when marker is clicked
var popupContent = 'Castello Malcesine:<br>';
popupContent += 'Via Castello Scaligero, 39<br>';
popupContent += '37018 Malcesine Verona<br>';
popupContent += 'Italy';

var infowindow = new google.maps.InfoWindow({
  content: popupContent,
  maxWidth: 200
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

}

function alCorsaroMap() {
var alCorsaroLocation = new google.maps.LatLng(45.7658856, 10.8099179);

var mapOptions = {
  'center' : alCorsaroLocation,
  'zoom' : 17,
};

var map = new google.maps.Map(document.getElementById('alCorsaroMap'), mapOptions);
var marker = new google.maps.Marker({
        'position' : alCorsaroLocation,
        'map' : map,
        'title' : 'Al Corsaro'
    });

//////////////////////////////////////////////Pop up containing address when marker is clicked
var popupContent = 'Ristorante Al Corsaro:<br>';
popupContent += 'Via Paina, 17<br>';
popupContent += '37018 Malcesine Verona<br>';
popupContent += 'Italy';

var infowindow = new google.maps.InfoWindow({
  content: popupContent,
  maxWidth: 200
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

}

function oasiMap() {
var oasiLocation = new google.maps.LatLng(45.80406, 10.842993);

var mapOptions = {
  'center' : oasiLocation,
  'zoom' : 17,
};

var map = new google.maps.Map(document.getElementById('oasiMap'), mapOptions);
var marker = new google.maps.Marker({
        'position' : oasiLocation,
        'map' : map,
        'title' : 'Oasi Bar'
    });

//////////////////////////////////////////////Pop up containing address when marker is clicked
var popupContent = 'Hotel Oasi Beach:<br>';
popupContent += 'Via Gardesana, 510<br>';
popupContent += '37018 Malcesine Verona<br>';
popupContent += 'Italy';

var infowindow = new google.maps.InfoWindow({
  content: popupContent,
  maxWidth: 200
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

}


window.onload = function() {
scaligeroMap();
alCorsaroMap();
oasiMap();
};

//谷歌地图
函数scaligeroMap（）{
var scaligerocation=new google.maps.LatLng（45.766281,10.8088879）；
变量映射选项={
“中心”：缩放定位，
“缩放”：17，
};
var map=new google.maps.map（document.getElementById（'scaligeroMap'），mapOptions）；
var marker=new google.maps.marker({
“位置”：缩放定位，
“地图”：地图，
“头衔”：“斯卡利格罗城堡”
});
//////////////////////////////////////////////单击标记时包含地址的弹出窗口
var popupContent='Castello Malcessine:
'；
popupContent+='Via Castello Scaligero，39
'；
popupContent+=“37018马尔切辛维罗纳
”；
popupContent+=‘意大利’；
var infowindow=new google.maps.infowindow({
内容：popupContent，
最大宽度：200
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
函数alCorsaroMap（）{
var alCorsaroLocation=new google.maps.LatLng（45.7658856,10.8099179）；
变量映射选项={
“中心”：alCorsaroLocation，
“缩放”：17，
};
var map=new google.maps.map（document.getElementById（'alCorsaroMap'），mapOptions）；
var marker=new google.maps.marker({
“位置”：alCorsaroLocation，
“地图”：地图，
“标题”：“阿尔·科萨罗”
});
//////////////////////////////////////////////单击标记时包含地址的弹出窗口
var popupContent='Ristorante Al-Corsaro:
'；
popupContent+=“通过Paina，17
”；
popupContent+=“37018马尔切辛维罗纳
”；
popupContent+=‘意大利’；
var infowindow=new google.maps.infowindow({
内容：popupContent，
最大宽度：200
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
函数oasiMap（）{
var oasiLocation=new google.maps.LatLng（45.80406,10.842993）；
变量映射选项={
“中心”：Oasiolocation，
“缩放”：17，
};
var map=new google.maps.map（document.getElementById（'oasiMap'），mapOptions）；
var marker=new google.maps.marker({
“位置”：Oasiolocation，
“地图”：地图，
“标题”：“Oasi酒吧”
});
//////////////////////////////////////////////单击标记时包含地址的弹出窗口
var popupContent=“Oasi海滩酒店：
”；
popupContent+=“通过Gardesana，510
”；
popupContent+=“37018马尔切辛维罗纳
”；
popupContent+=‘意大利’；
var infowindow=new google.maps.infowindow({
内容：popupContent，
最大宽度：200
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
window.onload=函数（）{
scaligeroMap（）；
alCorsaroMap（）；
oasiMap（）；
};

---

所以使用这个代码scaligeroMap（）；显示在使用它但使用alCorsaroMap（）的页面上；和oasiMap（）；不显示在单独页面上的。如果我放入scaligeroMap（）；在底部，以便最后执行alCorsaroMap（）；&oasiMap（）；将工作，但scaligeroMap（）；不会。如何使它们都显示出来？

在尝试对该页面上不存在的元素运行代码之前，需要检查map元素是否存在

您可以在window.onload函数上执行此操作：

var scaligeroMapElement =  document.getElementById('scaligeroMap');
if (typeof(scaligeroMapElement) != 'undefined' && scaligeroMapElement != null)
{
    scaligeroMap();
}

var alCorsaroMapElement =  document.getElementById('alCorsaroMap');
if (typeof(alCorsaroMapElement) != 'undefined' && alCorsaroMapElement != null)
{
    alCorsaroMap();
}

var oasiMapElement =  document.getElementById('oasiMap');
if (typeof(oasiMapElement) != 'undefined' && oasiMapElement != null)
{
    oasiMap();
}

这是假设每个地图都有不同的ID

如果包含jQuery，则只需执行以下操作：

if ($('#alCorsaroMap').length > 0) {
    oasiMap();
}