初めてのGoogle Maps API

マーカーへのクリックイベント登録

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Maps API を使って 前回のレッスンで作成した情報ウィンドウを マーカーをクリックして 地図上に表示させるためにマーカーへの クリックイベントの登録方法について 解説いたします まずはダウンロードしてきた こちらの Info Window Click という フォルダの中に入っている これら3つのファイルを エディターで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず javaScript.js を エディッターで確認します この javaScript.js は現状 前回までのレッスンに引き続き 東京スカイツリーを中心とした ズームレベル 16 の地図を作成して― そしてその東京スカイツリーの箇所に マーカーを設置しています そしてそのマーカーを クリックした時に表示させる― 情報ウィンドウのコンテンツを作成して 実際に情報ウィンドウを作成しています 今回はこの情報ウィンドウをマーカーを クリックした時に表示させるための― プログラムについて見ていきたいと思います その箇所がこちらの javaScript.js の下の方 この部分になります ここでは東京スカイツリーの部分に 設置しているマーカーに対して クリックイベントを登録しています それではどのようにしてクリックイベントを 登録しているのか 確認して見たいと思います まずはこのように google.maps.event.addListener と書いていますね これは決まり文句のようなものですので このまんま覚えてしまいましょう そしてそのあとに括弧と書いて その中に3つの引数がありますね まず1つ目 こちらは marker と書いています これはこれまでのレッスンで作成した こちらの変数の marker ですね これをここにいれることによって このマーカーに対する― イベントという形で指定しています そしてその後は click と書いていますね これはそのままの意味で 「このマーカーがクリックされた時」 という意味になります そしてその後の function ですが この function の後の { }の間に書かれた こちらの部分 「こちらの部分をこのマーカーが クリックされた時にこの処理が発動させる」 といった意味になります このように書くことでマーカーへの クリックイベントの登録が完了しました 今回はこちらのクリックされた時の動作を サンプルとしてアラートで作っています それではこの状態で この index.html をブラウザで開いて 実際にマーカーを クリックしてみたいと思います こちらのファイルをブラウザで開きます するとこのように表示されてきましたね ではこちらのマーカーを クリックしてみたいと思います するとこのように 「マーカーをクリックしました」ということで 先ほど書いたアラート文が実行されましたね それではOKボタンを押して エディターに戻ります 以上でレッスンは終了です 今回は Google Maps API を使って 地図上に情報ウィンドウを表示させるための マーカーへのクリックイベントの 登録方法について解説いたしました 以降のレッスンでは今回登録した クリックイベントの中で 情報ウィンドウを表示させる プログラムを書いて実際に地図上に その情報ウィンドウを表示させる方法について 解説していきますので そちらも合わせてご覧下さい

初めてのGoogle Maps API

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

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

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

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

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