【Google Maps Platform】InfoWindow の仕様変更について

Maps JavaScript API のアクセシビリティを向上させるため、
InfoWindow (マーカーをクリックすると表示されるポップアップウィンドウ)の
デフォルトの仕様が変更となっております。

【仕様変更詳細】
JavaScript API 3.57 バージョンより、
InfoWindow にヘッダー(headerContent)が追加され、
InfoWindow 内にタイトルとコンテンツをそれぞれ設定できるようになりました。
これに伴い、「閉じる」ボタンおよび、InfoWindow 自体のサイズが大きくなっております。https://developers.google.com/maps/documentation/javascript/infowindows

従来の InfoWindow              新しい InfoWindow

【変更時期】

この変更は、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              新しい InfoWindow


InfoWindow 内に名称(店舗名等)のみを表示している場合

headerContent に名称を指定し、content には何も指定しない


従来の InfoWindow              新しい InfoWindow


③ 従来どおり、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


GOGA Store Locator および弊社にて開発をご依頼いただいているシステムについて

弊社のGOGA Store Locatorおよび開発の案件では上記の対応を進めております。


ご不明な点がございましたら、お気軽にお問い合わせください