初めてのGoogle Maps API

情報ウィンドウの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
作成したコンテンツを情報ウィンドウに含めて作成する方法について解説致します。
講師:
03:13

字幕

このレッスンでは Google Maps APIを使って 前回のレッスンで作成した 情報ウィンドウ用のコンテンツを利用して 情報ウィンドウを作成する方法について 解説いたします まずは ダウンロードしてきた こちらの infowindow_make という フォルダの中に入っている これら3つのファイルを エディタで開いて下さい そして これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは まず javascript.js を エディタで確認してみましょう この javascript.js は 前回までのレッスンに引き続き 東京スカイツリーを中心とした ズームレベル 16 の地図を作成して そして この東京スカイツリーの部分に マーカーを作成して設置しています 前回のレッスンでは このマーカーをクリックした時に 表示させる情報ウィンドウの中に 表示させるコンテンツ部分を この部分で作成してきました 今回は この infoContent という変数を使って 実際に情報ウィンドウを 作成してみたいと思います そして その情報ウィンドウを 作成しているプログラムの部分が 丁度 その下の この部分になります それでは どのように 情報ウィンドウを作成しているか 目で追って確認していきたいと思います まずは変数を作っていますね var と書いて 変数の名前を infowindow としています そして その後に = と書いて new google.maps.InfoWindow と書いて ({ }) で囲っています そして その { } で囲まれた部分の中に content という項目を作って その値を infoContent と 前回のレッスンで作成した 情報ウィンドウの コンテンツ部分が格納された変数を 当てはめています この様にすることで このコンテンツ部分を中に含めた 情報ウィンドウ 要するに吹き出しを 作成することができました ただ この状態では まだ地図上に この情報ウィンドウを 表示することはできていません この情報ウィンドウを表示するためには その表示するためのプログラムを 書いてあげる必要があります この表示させるためのプログラムについては 後のレッスンで紹介していきますので そちらも参考にしてみて下さい 以上でレッスンは終了です 今回は Google Maps API を使って コンテンツを含んだ情報ウィンドウを 作成する方法について 解説いたしました 以降のレッスンでは 今回作成した情報ウィンドウを 実際に地図上に表示させるために マーカーにクリックイベントを 登録する方法について解説していきますので そちらも合わせてご覧ください

初めてのGoogle Maps API

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

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

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

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

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