マーカーをクリックしたら情報ウィンドウを表示する|Google Maps API v3
Google Maps API(v3) を利用してピン表示と共によく利用されるものが、
情報ウィンドウと呼ばれる吹き出し表示です。
ここではマーカーが表示されている地図を表示し、
マーカーをクリックしたら情報ウィンドウが表示される動作をご紹介します。
地図の表示
指定したGPS座標にピンを表示し、
表示しているピンをクリックすると、
その場所のテキストのみの簡単な情報ウィンドウを表示します。
簡単な動作ではありますが、一番マップ操作で見られる基本的なものです。
あとはどういった情報を表示するのかという事だけです。
サンプルコード
HTML(共通)
HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。
エラーが発生しました。後でもう一度やり直してください。 |
CSS(共通)
CSSではclass=”aspect”に対して、 幅100%を指定し、 高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。
エラーが発生しました。後でもう一度やり直してください。 |
JavaScript
Markerインスタンス(def_marker)を作成し対象に
gmap_canvas を指定しています。
作成したMarkerインスタンスに対してイベントリスナーをセットし、
クリックイベントが発生したら情報ウィンドウのopenメソッドを実行し、
情報ウィンドウが表示されるようにしています。
エラーが発生しました。後でもう一度やり直してください。 |
別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。
ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。
1 |
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script> |
関連
JavaScriptからのDOM操作「document.createElement(“”)」には、
以下のドキュメントがとても役に立ちます。
document.createElement – Web API インターフェイス | MDN
公開日:
最終更新日:2017/01/12