是否可以在同一網站的多個頁面上使用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(); 
}