改用進階標記

google.maps.Marker 第 3.56 版已於 2024 年 2 月 21 日淘汰，建議您改用新版 google.maps.marker.AdvancedMarkerElement 類別。進階標記針對舊版的 google.maps.Marker 類別進行了大幅改善。

進一步瞭解這項淘汰作業

如要將舊版標記更新為進階標記，請按照下列步驟操作：

  1. 新增程式碼以匯入標記庫。請注意，舊版標記 (google.maps.Marker) 沒有這項要求。
  2. 將 google.maps.Marker 變更為 google.maps.marker.AdvancedMarkerElement
  3. 在地圖初始化程式碼中加入地圖 ID，舉例來說，如果您還沒有地圖 ID，可以使用 mapId: 'DEMO_MAP_ID' 進行測試。

新增進階標記庫

標記庫載入方法取決於網頁載入 Maps JavaScript API 的方式。

  • 如果您的網頁使用動態指令碼載入，請在執行階段新增標記庫並匯入 AdvancedMarkerElement (選用項目：PinElement)，如下所示。

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • 如果您的網頁使用舊版直接指令碼載入標記，請在載入指令碼中新增 libraries=marker，如以下程式碼片段所示。

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

如要進一步瞭解如何載入 Maps JavaScript API，請參閱本文

範例

下方程式碼示範如何新增舊版標記，緊接著一併示範如何使用進階標記：

遷移之前

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

遷移之後

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

    // The advanced marker, positioned at Uluru
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: position,
        title: 'Uluru',
    });

探索進階標記功能

現在進階標記有更多自訂功能，除了調整標記的大小 (比例)，還能變更背景、邊框和字符的顏色。自訂圖像更容易操作，且您現在還可以使用 HTML 和 CSS 建立自訂標記。進一步瞭解進階標記的各種自訂功能：