初めてのGoogle Maps API

多角形の作成と地図上への表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
設定した座標に基づいて、実際に地図上に多角形を描画する方法について解説致します。
講師:
04:10

字幕

このレッスンでは Google Maps API を使って 前回のレッスンで設定した座標を利用して 実際に地図上へ多角形の図形を 描画する方法について解説します まずダウンロードしてきたこちらの polygon_show というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まず javascript.js をエディターで 確認してみます 前回のレッスンでは地図上に 多角形を表示する為に その多角形のそれぞれの角に当たる 地点の緯度・経度を指定して そのデータを配列として 1つの変数に格納しました その配列のデータはというと こちらの polygonPaths でしたね 今回はその作成した座標の入った 変数を使って 実際に多角形を作成して地図上に 描画してみたいと思います その作成して描画する部分のプログラムですが この javascript.js ですと こちらの下にあるこの部分となります では 実際にどのように多角形を作成して 地図上に表示しているのか順に 目で追って確認して行きましょう まずは 多角形の作成です それはこちらの部分となります まず変数を定義していますね var と書いて 今回の変数の名前は cities としています そして = と書いて new google.maps.polygon と書きます そして ( { を作ってあげて その中に paths というキーを作っています そしてその値を前回のレッスンで作った― この座標の入った配列の変数 polygonPaths を指定してあげています こうすることでこちらの cities の変数の中には これら4つの座標がそれぞれの角になった― 多角形のデータがこちらに格納されてきます そして実際にこの作成した多角形を 地図上に表示させる方法は こちらの部分となります まずはこちらで作った多角形のデータ cities の変数を書いて そして . と書いて その後に setMap( ) と書きます そしてその ( ) の中の引数には 表示させたい地図が格納された 変数 map を入れ込んでいます ではこの状態で index.html をブラウザで開いて どのように多角形が描画されているか 確認してみたいと思います こちらの index.html をブラウザで開きます するとこのように表示されてきましたね このように角が4つある四角形として 描画することができました ご覧の通り 東京 大阪 金沢 長野の 地点をつないでいますね このようにすることで それぞれの地点をつないだ― 多角形を地図上に描画することができる訳です では エディターに戻ります 以上でレッスンは終了です 今回は Google Maps API を使って 地図上に多角形の図形を 描画する方法について解説しました 以降のレッスンでは今回設定した多角形の 図形のスタイルを 変更する方法について解説しますので そちらも合わせてご覧下さい

初めてのGoogle Maps API

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

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

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

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

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