FC2ブログ

google map で情報ウインドウ表示

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 が現れる

これを使うといろいろできそう
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック