遷移:google.load 中的地圖模組

我們在 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>

如果使用這個方法,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);

請參閱說明文件