google map で情報ウインドウ表示
#07 情報ウィンドウを表示する
http://dotinstall.com/lessons/basic_google_maps/3507
を参考に
地図上に吹き出しのような情報ウィンドウを表示
https://developers.google.com/maps/documentation/javascript/reference?hl=ja&csw=1#InfoWindow
が公式リファレンス
情報ウインドウを作成するには
var infoWindow = new google.maps.Inf
oWindow({
content: ‘渋谷のあたりだよ’,
position: map.getCenter()
});
infoWindow.open(map);
で表示できる
content: ‘渋谷のあたりだよ’,
というように
content : には
情報ウインドウに何を表示するか指定する
指定できるのは
普通の文字列、
HTMLタグを含む文字列、
)HTML要素
もしHTML要素なら
content: document.getElementById(‘要素ID’),
というようにする
content: ‘<a href=”http://dotinstall.com/lessons”>ドットインストール</a>’
とすればリンクの吹き出しができる
これによりお店リンク地図なども作成できる
position: map.getCenter()
というように
position: で緯度経度の指定
今回は、getCenter() で、表示している地図の中心座標を取得
マーカー作成のときとの違いは
open() を使って表示することになる
infoWindow.open(map);
で情報ウインドウを表示できる
引数の map は
var map = new google.maps.Map(document.getElementById(‘map’), options);
で設定した変数
これで保存して再読み込みすると
マップの上に吹き出しのような
情報window が現れる
これを使うといろいろできそう