我們在 2021 年 10 月 13 日停止為 google.load
提供「地圖」模組。
也就是說,2021 年 10 月 13 日後,如果嘗試在 google.load
使用「地圖」模組,您會收到錯誤訊息「module "maps" is not supported」(不支援模組「地圖」),地圖也不會載入。為避免操作中斷,請改用替代方案。
應採取的行動
首先,請移除載入 google.load
載入器的 <script>
標記,然後移除對 google.load
的呼叫。如果您的 Google 載入器另有他用,可以保留載入器 <script>
標記。
接著,請改用新方式載入 Maps JavaScript API (選取下列其中一個選項):
Google 載入器示範用法
以下展示目前用 Google 載入器載入 Maps JavaScript API (有兩個 <script>
區塊) 的方式:
之前
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
"callback": initMap,
"key": "YOUR_KEY",
"libraries": "places,visualization"
});
function initMap() {
// Google Maps JS API is loaded and available
}
</script>
使用 <script>
標記內嵌載入 (建議)
如果使用這個方法,Maps JavaScript API 會在載入網頁時一併載入。如要執行內嵌載入,請先將載入 www.google.com/jsapi 的 <script>
標記 (請參閱「之前」部分),替換為以下範例中顯示的 <script>
標記:
<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>
接著,在 JavaScript 程式碼中移除不再需要的 google.load
函式呼叫。以下範例顯示空白的 initMap()
函式,系統會在地圖程式庫成功載入時呼叫此函式:
<script type='text/javascript'>
function initMap() {
// Google Maps JS API is loaded and available
}
</script>
從其他 JavaScript 檔案動態載入
您可以運用動態載入功能,控制載入 Maps JavaScript API 的時機。舉例來說,您可以等到使用者點選按鈕或執行其他動作後,再載入 Maps JavaScript API。如要執行動態載入,請先將載入 www.google.com/jsapi 的 <script>
標記 (請參閱「之前」部分),替換為透過程式輔助方式新增 <script>
標記的程式碼,如以下範例所示:
var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;
接著將回呼函式附加至視窗物件,如下所示:
window.initMap = function() {
// Google Maps JS API is loaded and available
};
最後,在頁面標頭中新增 <script>
標記,如下所示:
document.head.appendChild(script);