改用進階標記

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

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

  1. 新增程式碼以匯入標記庫 (請參閱下方步驟)。
  2. 將 google.maps.Marker 變更為 google.maps.marker.AdvancedMarkerElement；如果匯入陳述式宣告 AdvancedMarker，您可以省略合格路徑。
  3. 在地圖初始化程式碼中加入地圖 ID，舉例來說，如果您還沒有地圖 ID，也可以使用「DEMO_MAP_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',
});

遷移之後

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

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

const map = new 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 AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

探索進階標記功能

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