是否可以在同一网站的多个页面上使用Google Maps API？

Question

我想使用三张地图，两张在一张纸上，另一张在另一张纸上，全部在同一个网站上。我可以让一个页面工作，但不是另一个，它往往是我选择在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（）;显示在使用它的页面上，但alCorsaroMap（）;和oasiMap（）;不显示在单独的页面上。如果我把scaligeroMap（）;在底部，以便它最后执行alCorsaroMap（）; & oasiMap（）;将工作，但scaligeroMap（）;惯于。我如何制作它们以便全部显示？

Answer 1

在试图对该页面上不存在的元素运行代码之前，您需要检查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(); 
}