高度なマーカーに移行する

google.maps.Marker（v3.56）は、2024 年 2 月 21 日にサポートが終了します。つきましては、新しい google.maps.marker.AdvancedMarkerElement クラスに移行することをおすすめします。高度なマーカーでは、従来の google.maps.Marker クラスと比べて、大幅な改善が加えられています。

このサポート終了についての詳細

従来のマーカーを高度なマーカーに更新するには、以下の手順を行います。

マーカーライブラリをインポートするためのコードを追加します。以前のバージョンのマーカー（google.maps.Marker）にはこの要件がないことにご注意ください。
google.maps.Marker を google.maps.marker.AdvancedMarkerElement に変更します。
マップ ID を地図の初期化コード（例: mapId: 'DEMO_MAP_ID'）に追加します。マップ ID がない場合は、「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 を使ってカスタムマーカーを作成できるようになりました。高度なマーカーを使ってできることについて詳しくは、以下をご確認ください。

高度なマーカーに移行する

高度なマーカー ライブラリを追加する

例

移行前

移行後

高度なマーカーの機能について

高度なマーカーライブラリを追加する