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

google.maps.Marker（v3.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 を地図の初期化コード（例: 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 を使ってカスタム マーカーを作成できるようになりました。高度なマーカーを使ってできることについて詳しくは、以下をご確認ください。