GMAPS/Markerがdeprecated

Google Maps APIでかなり頻出な類のMarkerクラスが2024/2/21にサポートを終了し、deprecated状態になってました。あの地図に押しピンを刺す機能ですね。管理者ツールのコンソールでは警告がでていたようですが、ごく最近気が付きました。推しピン機能がなくなるわけではなく、新しいAdvancedMarkerElementクラスを使えってことらしいです。旧来のMarkerでは拡張性が乏しかったんですかね。新しいアドバンスドな押しピンはPinElementクラスを併用することでカスタマイズ性が上がり、利便性も高まってそうでした。基本的にgoogle.maps.Marker を google.maps.marker.AdvancedMarkerElementに置き換える作業が発生するのですが、それだけではうまく動かなかったので、注意点をメモっておきます。やはり定期的にメンテナンスしてないと澱のようなものが溜まって、修正する段になってそれが一気にのしかかってきますね。

APIの読み込み

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async></script>

まず、↑こんなタグでAPIを読み込んでいたわけですが、新しいマーカー（押しピン）機能を使う場合、ライブラリを読み込めって書いてありました。機能をライブラリに切り出して、必要に応じてリンク（読み込み）するようにしたんですね。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=weekly&libraries=marker" async></script>

libraries=marker の部分がライブラリの指定部分です。今回は新しいマーカーを使うのが目的なので「marker」ライブラリのみ指定しています。複数指定する場合はカンマ区切りで並べればいいようです。ストリートビュー機能とかエレベーション機能とか他にもライブラリ化された機能がいくつもありそうですが、今回は深入りしないでおきます。

v=weekly の部分はGoogleのサンプルで合わせて指定してみては？みたいに書いてあったのでつけただけです。APIのバージョンを指定できるそうです。毎週のAPI更新を反映させたかったらweeklyをつけておけってことのようです。省略可能らしいので、何か不都合があれば外しますが、最新版にしとけば何かあったときに勝手に直ってくれるかなって思ってます。

開発環境によっては、ブートストラップローダを使ってAPIを読むんでしょうが、私には今は不要だったので割愛します。

マップ作成

APIのmarker ライブラリを読み込めればそれでいいかと思ったんですが、いざ、AdvancedMarkerElementを使おうとしたら、地図が半透明グレーなオーバーレイがかかって「この地図、IDがわからんから不正認定っす！」って表示されちゃいました。APIキーならスクリプト読み込み時に指定したけど、他に何かあるのか？と思ったら地図をWeb画面に作成するときに地図IDを指定しないと新しい機能を使わせてもらえないようになったようです。地図IDって何だ！？

const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
});

サンプルコードを見るとMapインスタンスを作る際にmapIdを指定すればいいようです。「DEMO_MAP_ID」という文字列が入っていますね。これはデモ用のID文字列で確認用には使っていいけど、本番では使うなって解説をいくつかみかけましたが、関係ない適当な文字列を突っ込んでみても一応新しいマーカーが動いたので、まだ地図IDの正当性を厳密にチェックしてないだけかもしれませんね。Google Cloud PlatformでMap APIを有効にすると、「マップ管理」メニューから新しい地図IDを作成できるので、これを入力すればいいようです。地図IDを作る時にラスタ描画かベクタ描画か聞かれたり、チルトや回転機能を使うか聞かれましたが、航空画像タイルしか使わないから、今回は関係ありませんでした。あっ、でもmapIdを入力したらタイルの写真が変わった気がします。寄ってもチルトされなくなったかな？この辺はスクリプトからも変更ができそうですが、ここも深入りしません。

マーカー設置

const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

↑こんな感じでライブラリをインポートしておくと、クラス名が短くかけていいよってありました。が、一旦それは忘れます。

const marker = new google.maps.Marker({
  map: map,
  position: { lat: -25.344, lng: 131.031 },
  title: 'Uluru',
});

↑こんな風にこれまで書いていたのが、

const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: { lat: -25.344, lng: 131.031 },
    title: 'Uluru',
});

↑こんな風に書けるようになったということらしいです。本当にgoogle.maps.Markerをgoogle.maps.marker.AdvancedMarkerElementに置き換えただけって感じです。「map: map,」が「map,」と省略表現されるようになったのは、JavaScript側の進化かな？Rustとかにも導入されてる書き方ですね。これで、deprecatedされたMarkerを捨て去るという当初の目的を達成しましたが、せっかくなので新しいMarkerの表現力をちょっと試してみました。

const pin = new google.maps.marker.PinElement({
	glyph: "Ss",
	glyphColor: "white",
	background: 'blue',
	borderColor: 'darkblue',
});

const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: { lat: -25.344, lng: 131.031 },
    content: pin.element,
});

こんな風に押しピン（PinElement）を設定して新しいマーカー（AdvancedMarkerElement）のcontentプロパティに渡してやると、設定されたピンが立ちました。

ピンには丸じゃなくて文字で「Ss」と表示
その文字の色は白
ピンの色は青
ピンの輪郭線色は暗い青

という指定になってます。他にもスケール（ピンのサイズの拡大率）なんかも変えられるようです。ピンをいっぱい立てると、分類したくなるんですよね。見た目でどんなピンなのかわかるようにできると便利そうです。

（補足）v=weekly の指定を加えたことで衛星写真タイルが変わった気がした原因がわかりました。タイムリーに今日届いたメールにバージョン3.62から「45° Imagery」すなわちチルトビューを衛星写真に提供してたのやめるわ！って予告が書いてありました。weekly版だと先行してこの変更が加わっていたというわけですね。3Dマップっていう機能があるからこのチルト機能もう要らないよねってことらしいです。私的には・・・前から要らないなって思ってました。（オフにすればよかっただけみたいですが）ピンを指すとき、建物の高さが邪魔でわかりにくくなっちゃうんですよね。 2025/5/28

記事一覧へ

2025-05-28 11:03:07