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

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

我需要做些什麼？

首先，請移除載入 google.load 載入器的 <script> 標記，然後移除對 google.load 的呼叫。如果您將 Google 載入器用於其他用途，可以保留載入器 <script> 標記。

接下來，請導入新方式來載入 Maps JavaScript API (選取下列其中一個選項)：

• 使用 <script> 標記內嵌載入
• 從其他 JavaScript 檔案動態載入

使用 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);

請參閱說明文件