【Google Maps API】google.maps.Markerが非推奨に｜代替手段

Google Maps APIを使用して地図上にマーカーを配置する機能は、多くのウェブサイトやアプリケーションで利用されています。しかし、最近のアップデートでgoogle.maps.Markerが非推奨になったことをご存じでしょうか？この記事では、google.maps.Markerの非推奨化の背景、新しい代替手段、そして実際のコード例を交えて初心者の方にもわかりやすく説明します。

google.maps.Markerとは？

google.maps.Markerは、Google Maps上にマーカーを表示するためのオブジェクトです。マーカーは地図上の特定の場所を示すために使用され、地図をわかりやすくするための重要な要素です。

■google.maps.Markerを使ったマーカーの設定例

function initMap() {
  const myLatLng = {lat: 35.6895, lng: 139.6917}; // 東京の中心座標
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: myLatLng,
  });
 
 // マーカーの設定
 var marker = new google.maps.Marker({
   position: myLatLng,
   map,
   title: 'Hello World!',
 });
}

参考：
マーカー  |  Maps JavaScript API  |  Google for Developers

非推奨化の背景

GoogleはAPIのアップデートを定期的に行っています。
2024年2月22日のアップデートで、google.maps.Marker のサポートが終了しました。

google.maps.Marker のサポートが終了しました。代わりに google.maps.marker.AdvancedMarkerElement ご使用ください。現在のところ google.maps.Marker は廃止される予定はありませんが、google.maps.Marker よりも google.maps.marker.AdvancedMarkerElement のご利用をおすすめします。主要なリグレッションに対するバグ修正は引き続き google.maps.Marker で行われますが、google.maps.Marker の既存のバグは修正されません。サポートが終了する 12 か月前までに通知いたします。サポート終了について詳しくは、https://developers.google.com/maps/deprecations をご覧ください。

参考：
Maps JavaScript API リリースノート

google.maps.Markerが非推奨になった理由には以下の点が挙げられます。

パフォーマンスの向上

新しいマーカー（google.maps.marker.AdvancedMarkerElementクラス）は、パフォーマンスの最適化が施されており、大量のマーカーを扱う際の負荷が軽減されます。

新機能の追加

新しいマーカーでは、マーカーのデフォルトの背景の色、輪郭線の色、グリフの色をカスタマイズできるほか、マーカーのサイズを調整したり、マーカーのデフォルトのアイコンをカスタム画像に差し替えたりできます。

参考：
AdvancedMarker機能

代替手段

google.maps.Markerに代わる新しい方法として、Google Maps PlatformはAdvanced Markersを提供しています。

■Advanced Markersを使ったマーカーの設定例

function initMap() {
  const myLatLng = {lat: 35.6895, lng: 139.6917}; // 東京の中心座標
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: myLatLng,
    mapId: "TEST_MAP_ID", // 設定が必要
  });

  // マーカーの設定
　const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: myLatLng,     title: 'Hello World!', }); }

まとめ

今回は、google.maps.Markerの非推奨化の背景、新しい代替手段、そして実際のコード例を交えて初心者の方にもわかりやすく説明しました。