この記事について

Google のMaps JavaScript APIに仕様変更に度々苦しめられています。今回はMarkersに関することを仕様変更をまとめます。

先に結論を３つ

• Markerは地図上の特定の場所を示すために使用します。
• アイコンや画像など様々な形で表現することが可能です。
• 2023年5月ごろからMarkersからAdvanced Markersにバージョンアップしました。これにより地図上のマーカーの見た目のカスタマイズが容易になるだけでなく、HTML および CSS を使った視覚的インパクトに優れるマーカーの作成に対応するようになり、柔軟性がアップしました。

Google Maps Platformとは

google mapの機能を簡単にWebやスマホアプリに組み込むことができるAPIです。google mapのアプリで使用する位置表示やストリートビュー、また課金することで経路検索を組み込むことができます。現在開発中の農業プロダクトには無くてなならない存在です。

参考：Google Maps Platform

Markersとは

Markerは地図上の特定の場所を示すために使用します。添付画像の赤いピンが該当します。このピンは画像にも置き換えることが可能です。

引用：マーカーが配置された Google マップをウェブサイトに追加する

2023年5月から仕様が変わりました

Advanced Markersの誕生です。2022年10月に発表され、2023年5月から提供が開始されました。現在はiOS と Androidでも提供されているようです。
参考：高度なマーカーが iOS と Android で使用可能に: さまざまプラットフォームでマーカーを簡単にカスタマイズ

また、最近以下のような警告が出ています。

As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead. At this time, google.maps.Marker is not scheduled to be discontinued, but google.maps.marker.AdvancedMarkerElement is recommended over google.maps.Marker. While google.maps.Marker will continue to receive bug fixes for any major regressions, existing bugs in google.maps.Marker will not be addressed. At least 12 months notice will be given before support is discontinued. Please see https://developers.google.com/maps/deprecations for additional details and https://developers.google.com/maps/documentation/javascript/advanced-markers/migration for the migration guide.

2024年2月21日をもって、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 を、移行ガイドについては https://developers.google.com/maps/documentation/javascript/advanced-markers/migration をご覧ください。

というわけで、Advanced Markerを使うようにしましょう。

Markers と Advanced Markers の書き方の違い

Markersを使う際は以下のように記載していました。アイコン画像を用いたマーカーをマップにプロットする場合のコードです。

    const markerOption = {
        // マーカーをプロットする位置
        position: new google.maps.LatLng(35.693235, 139.757864), 
        //アイコンのURL
        icon: {
            url: 'img/pin.png', 
        }
    }
    
    const marker = new google.maps.Marker(markerOption);
    marker.setMap(mapInstance);

Advanced Markersの場合は以下のとおりです。

    const img = document.createElement('img');
    img.src = 'img/pin.png';
    
    const markerOption = {
        position: { lat: 35.693235, lng: 139.757864 },　// or new google.maps.LatLng(35.693235, 139.757864)
        content: img,
    }
    
    const beachFlagMarkerView = new AdvancedMarkerElement(markerOption);
    marker.map = mapInstance;

簡潔に変更点を書くと。。。

• mapへのプロットの記載方法

    // 旧記法
    marker.setMap(mapInstance);
    
    // 新記法
    marker.map = mapInstance;

• iconの挿入方法

    // 旧記法
    const markerOption = {
        icon: {
    		url: 'img/pin.png', //アイコンのURL
    	}
    }
    
    // 新記法
    const img = document.createElement('img');
    img.src = 'img/pin.png';
    
    const markerOption = {
        content: img,
    }

Advanced Markersにしたことにより、HTML および CSS を使った表現が可能になったことで自由度が増しました。以下の通りです。

  const randomId = generateUniqRandomString('icon-', '-pin-color');
  const icon = document.createElement('div');
  icon.innerHTML = `
    <i id="${randomId}"></i>
    <style>
        #${randomId} {
          color: ${markerColor};
          font-size: 32px;
        }
      </style>
    `;

  const marker = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: position,
    content: icon,
  });

様々な色や形、動きを実現できます。

しかしMarkersでは容易に追加できたアイコンのアニメーションをcssで表現しなくてはいけないのは少し辛いところです。

今後のGoogle Maps Platformの更新について

2025年3月18日までにマップのスタイルが更新されるようです。

仕様もまた変わるかもしれないので動向をチェックしておかないとですね。

参考：New map style for Google Maps Platform