【Maps JavaScript API】マーカーに情報ウィンドウ（infowindow）を表示してみよう

前回はGoogle Maps JavaScript APIで表示されるマップにマーカーを追加する方法について解説しました。
今回は前回追加したマーカーに情報ウィンドウ（infowindow）を表示する方法について解説していきます。

まず、Google Maps JavaScript API では、マップ上の指定の場所にポップアップ ウィンドウでコンテンツ（テキストや画像）を表示するものを「情報ウィンドウ」や「InfoWindow」と呼びます。
また、情報ウィンドウはコンテンツ部分と突起部分が存在し、吹き出しのような形をしているため、見た目の通り「吹き出し」や「バルーン」と呼ばれることもありますので、合わせて覚えておきましょう。

この突起部分の先端が、マップ上の指定された場所に付着します。
ほとんどの場合、情報ウィンドウはマーカーとセットで使用することが多く、この突起物の先端はマーカーに付着させます。
しかし、マーカー以外の特定の経度緯度にも付着させることが出来るので、そう言ったことが可能であるということだけ覚えておくと良いでしょう。
また、情報ウィンドウは一種のオーバーレイです。このオーバーレイの概要についてはマップに追加できるオブジェクトの概要で説明していますので、そちらをご確認ください。

マーカーをクリックすると情報ウィンドウを表示させる

情報ウィンドウを表示するための初期パラメータを指定します。オプションは下記を使用して作成することができます。
InfoWindow のコンテンツを設定する場合、InfoWindowOptions 内でコンテンツを指定するか、InfoWindow で setContent()で指定します。

//情報ウィンドウを表示するための初期パラメータを指定
var infowindow = new google.maps.InfoWindow({
 content: '<div>Hello Japan</div>'
});

プロパティ	説明
content	情報ウィンドウ内に表示するテキストを指定します。HTML文も記述できます。
disableAutoPan	情報ウィンドウを表示する時に、地図を情報ウィンドウ全体が表示されるよう地図が自動的に移動するのを無効化するかを真偽値で指定します。 デフォルトはfalse（自動移動）。
pixelOffset	情報ウィンドウの先端部分と情報ウィンドウを固定するオフセット値を指定します。実際には、このフィールドを指定する必要はなく、デフォルト値のままにしておくことができます。
position	情報をウィンドウを固定する位置の緯度・経度のLatLng値を指定します。マーカー上で情報ウィンドウを開くと、その position は自動的にアップデートされます。
maxWidth	maxWidthには、情報ウィンドウの最大幅（単位：ピクセル）を指定します。 maxWidthを指定した状態で、中身のコンテンツが指定幅より大きい場合は情報ウィンドウ内に縦スクロールが表示されます。maxWidthを指定しない場合は、情報ウィンドウはコンテンツが収まるように拡大し、情報ウィンドウが地図と同じ幅になると自動的に改行が行われます。
zIndex	情報ウィンドウの重なり順序を指定します。 数字が大きい方が前面に表示されます。

情報ウィンドウを作成するだけでは、マップ上に表示されません。
情報ウィンドウが表示されるようにするには、InfoWindow で open() メソッドを呼び出す必要があります。
今回は、マーカーがクリックされた時に、情報ウィンドウが開くように指定するので、markerのクリックイベント時にopen() メソッドを呼びます。
open() メソッドでは、ウィンドウを開く Map とオプションで固定する Marker を渡す必要があります。
万が一、上手く表示されない時は、きちんと値が渡されているかを確認してみましょう。

それでは、以下が簡単なサンプルになります。マーカーをクリックすると情報ウィンドウが表示されます。
ソースをそのまま使用しても表示できますので、まずはコピーしてマーカーを追加してみましょう。

 <script>
var map;
function initMap() {
 var myLatlng = new google.maps.LatLng(35.681167,139.767052);
 //インスタンスを作成
 map = new google.maps.Map(document.getElementById('map'), {
  //地図のオプション
  //初期のズームレベル
  zoom: 12,
  //地図の中心点
  center: myLatlng
 });

 //マーカーの初期プロパティを指定
 var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
 });
 //情報ウィンドウを表示するための初期パラメータを指定
 var infowindow = new google.maps.InfoWindow({
  content: '<div>Hello Japan</div>'
 });

 //マーカーをクリックされた時、情報ウィンドウが開くように指定
 marker.addListener('click', function() {
  infowindow.open(map, marker);
 });
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>

サンプルページはこちら
以上でマーカーに情報ウィンドウ（infowindow）を表示する方法の解説を終わります。
マーカーと情報ウィンドウをセットで表示させる方法が理解できたと思います。
この情報ウィンドウには、マーカーに紐づく様々な情報を載せることで、ユーザが見せたい情報を地図上で表現できるようになります。
また、情報ウィンドウの見た目のデザインを変えるだけで、マップの印象がガラッと変わるので、活用方法に合わせてスタイルの変更方法についても今後解説していきたいと思います。

ご質問などございましたら、お気軽に下記コメント欄にお寄せください。

※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。

Tweet