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

我們在 2021 年 10 月 13 日停用為 google.load 提供「地圖」模組的服務。也就是說,2021 年 10 月 13 日之後,如果您嘗試在 google.load 中使用「地圖」模組,就會收到錯誤訊息 (「不支援模組『地圖』」),且系統不會載入任何地圖。為避免發生可能的中斷情形,您必須改用其中一種替代方案。

我需要做些什麼?

首先,請移除載入 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);

請參閱說明文件