初めてのGoogle Maps API

情報ウィンドウの表示

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マーカーに登録したクリックイベントの中で、実際に地図上に情報ウィンドウを表示させる方法について解説致します。
講師:
03:48

字幕

このレッスンではGoogle Maps APIを 使って マーカーへのクリックイベントの中で 情報ウィンドウを表示させるための プログラムを書いて 実際に地図上に情報ウィンドウを 表示させる方法について解説いたします まずはダウンロードしてきたこちらの infowindow_showというフォルダの中に 入っているこれら3つのファイルを エディターで開いてください そしてこれがファイルを開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それではまず Javascript.jsを エディターで確認してみます このJavascript.jsは これまでのレッスンで 東京スカイツリーを中心に ズームレベルを16と設定した地図を作製して 東京スカイツリーにマーカーを設置しました そしてそのマーカーに情報ウィンドウを 表示させるためのクリックイベントを 登録するところまでを作成しましたね 今回はそのクリックイベントの中の こちらの部分ですね この部分の中で実際に情報ウィンドウを 表示させるためのプログラムを書いて 地図上にその情報ウィンドウを 表示させてみたいと思います その情報ウィンドウを表示させるための プログラムがこの部分となります では実際に見ていきましょう どの様に書かれているかというと まずはinfowindowと書いています これはこれまでのレッスンで作成した 情報ウィンドウが格納されている変数です そして infowindow.openと書きます そして括弧の間に2つの引数をとっています まず1つ目の引数は map ですね これもこれまでのレッスンで作った 変数 mapとなります そして2つ目の引数にはこのように 同じように 変数 markerが入っています このように2つの引数を この括弧の中に書くことによって このinfowindow_ ようするに情報ウィンドウを この変数mapに格納された地図の― 同じく変数markerに 格納されたmarkerに紐づけて 表示させるといった意味になります 要するにそのマーカーをクリックすると この情報ウィンドウがちょうどそのマーカーの 上に表示される形になります それではこの状態で index.html を ブラウザで開いて実際にその動作を 確認してみたいと思います こちらの index.html をブラウザで開きます するとこの様に表示されました ではこちらのマーカーを クリックしてみたいと思います するとこの様に情報ウィンドウが 表示されました この様に表示されれば きちんと情報ウィンドウの設定が できているといった形になります ちなみに閉じるときはこのバツ印を押すと この情報ウィンドウを閉じることができます このように情報ウィンドウが消えました それではエディタに戻ります 以上でレッスンは終了です 今回はGoogle Maps APIを使って 地図上に情報ウィンドウを 表示させる方法について解説致しました 以降のレッスンでは地図上に線や図形などを 描画する方法に解説していきますので そちらも合わせてご覧ください

初めてのGoogle Maps API

このコースではGoogle Maps APIをJavaScriptとjQueryを利用してサイトに実装する方法について学習します。これらについての基本的な説明から、地図の表示方法や設置した地図上にマーカーや情報ウィンドウを設置する方法までを丁寧に解説します。このコースをマスターすれば、さまざまな用途に応じた地図をサイト上に作成できるようになります。

1時間52分 (28 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。