初めてのGoogle Maps API

情報ウィンドウに表示する内容の作成

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Maps API を使って 地図上に表示する情報ウィンドウの コンテンツ部分を作成する方法について 解説いたします まずは ダウンロードしてきた― こちらの infowindow_content という フォルダの中に入っている これら3つのファイルを エディタで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは早速 レッスンを始めていきましょう 今回ご説明する情報ウィンドウとは Google Map の上で 吹き出しの様に情報を表示させる ウィンドウのことを指します 今回は そのウィンドウの中の 実際に表示させるコンテンツの部分を 作成してみたいと思います それでは javascript.js を エディタで確認してみましょう 今 この JavaScript では 中心を東京スカイツリーとして ズームレベルを 16 と設定した地図を作成して その東京スカイツリーの部分に マーカーを設置しています 今回は このマーカーを クリックした時に表示させる― 情報ウィンドウの中身を 作ってみたいと思います その部分が丁度こちらになります 情報ウィンドウの中身は HTML のタグを使って作ることができます では 実際に見てみましょう まずは 変数を定義しています そして 変数の名前を infocontent としています そして = と書いて この部分に表示させたい項目を HTML タグを使って記述しています ここでは h2 のタイトルタグに 「東京スカイツリー」と書いて そのあとの p タグに 東京スカイツリーの簡単な説明― 「全高 634 メートルの自立式鉄塔」 というかたちで記述しています この様にして作成したこちらの変数を使って 実際に情報ウィンドウを 作成していくかたちになります ちなみに こちらの情報ウィンドウの コンテンツ部分ですが HTML タグを使えるということで テキストだけではなくて 画像なども設置することができます また CSS と連携させて こちらのコンテンツ部分のレイアウトや デザインを調整することも可能ですので 覚えておきましょう 以上でレッスンは終了です 今回は Google Maps API を使って 地図上に表示する情報ウィンドウの コンテンツ部分の作成方法について 解説いたしました 以降のレッスンでは 今回作成したコンテンツを使って 実際に情報ウィンドウを作成する方法について 解説していきますので そちらも合わせてご覧ください

初めてのGoogle Maps API

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

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

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

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

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