皆様、こんにちは!
Google Maps Platform のプロフェッショナル集団、ゴーガです。
Maps JavaScript API のアクセシビリティを向上させるため、InfoWindow (マーカーをクリックすると表示されるポップアップウィンドウ)のデフォルトの仕様が変更となっております。
【仕様変更詳細】
JavaScript API 3.57 バージョンより、InfoWindow にヘッダー(headerContent)が追加され、InfoWindow 内にタイトルとコンテンツをそれぞれ設定できるようになりました。これに伴い、「閉じる」ボタンおよび、InfoWindow 自体のサイズが大きくなっております。
https://developers.google.com/maps/documentation/javascript/infowindows
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
【変更時期】
この変更は、JavaScript API バージョン3.57より適用されておりますので、JavaScript API を読み込む際に指定してるバージョンによって適用される時期は異なります。
weekly バージョン の場合:2024年5月
quarterly バージョンの場合:2024年8月中旬ごろ
なお、3.56を指定することで、2025年2月までは、これまでの仕様の InfoWindow をご利用いただけます。バージョンとリリース時期については、以下をご確認ください。
https://blog.goga.co.jp/2024/05/google-maps-api-maps-javascript-api.html
【確認方法】
Google Maps Platform のシステムのご担当者様(エンジニア、ベンダーなど)に本ブログをご確認いただき、InfoWindow を使用している環境で、JavaScript API バージョン3.57 または、weekly バージョンを指定して、InfoWindow をご確認ください。すでに、上記のバージョンをご利用の方は、仕様変更後の InfoWindow が表示されております。
【対応の要否と対応方法】
仕様変更後の InfoWindow で問題ない場合には、対応の必要はございません。仕様変更後の InfoWindow で調整が必要な場合は以下を参考にご対応ください。
① 【一時的】JavaScript API のバージョンを3.56で指定し、2025年2月までに②または③の対応をする
<script async
src="https://maps.googleapis.com/maps/api/js?v=3.56
&key=YOUR_API_KEY&callback=initMap">
</script>
② InfoWindow 内に表示しているテキストを調整する
headerContent (追加部分)
https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions.headerContent
content
https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions.content
InfoWindow 内に名称(店舗名等)とその説明(住所等)を表示している場合
headerContent に名称を指定、content には説明を指定する
InfoWindow 内に名称(店舗名等)のみを表示している場合
headerContent に名称を指定し、content には何も指定しない
③ 従来どおり、content のみを使いたい場合
InfoWindow のヘッダーを無効にし、閉じるボタンを実装する
(ヘッダーを無効にすることで閉じるボタンが消えてしまうため、実装が必要です。)
headerDisabled:
https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions.headerDisabled
閉じるボタンを実装
https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow.close