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

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

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

  1. マーカー ライブラリをインポートするためのコードを追加します（以下の手順を参照）。
  2. google.maps.Marker を google.maps.marker.AdvancedMarkerElement に変更します。import ステートメントで AdvancedMarker を宣言している場合は、完全修飾パスを省略できます。
  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',
});

移行後

// 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 を使ってカスタム マーカーを作成できるようになりました。高度なマーカーを使ってできることについて詳しくは、以下をご確認ください。