初めてのGoogle Maps API

矩形の作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
地図上に矩形を描画する為の、矩形の作成方法について解説致します。
講師:
04:28

字幕

このレッスンでは Google Maps API を使って 地図上へ矩形いわゆる長方形を描画する為の― その作成方法について解説します まずはダウンロードしてきたこちらの rectangle_make というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まず javascript.js をエディターで 開いて確認してみます すると現状はこのような形になっています 現在は東京を中心とした ズームレベルが10の― 地図を HTML 上に生成して 表示させています 今回はこの地図に矩形要するに長方形を 描画する方法について見ていきたいと思います その矩形を作成している部分が この javascript.js の中の― 丁度この部分になります 大きく分けて2つの構成となっています 1つ目はこちらの部分 こちらの部分はその矩形要するに長方形の― 左下と右上の角となる 緯度・経度を設定している箇所 そしてもう1つはその左下と右上の― 緯度・経度の座標をベースとして 実際に矩形を作成する所 それがこちらの部分となります ではまず 矩形の左下と右上の緯度・経度の― 設定方法について見て行きます こちらの部分を見ていきましょう まず 変数を作っていますね var と書いて 変数の名前をここでは mapBounds としています そして = と書いて new google.maps.LatLngBounds と書いて ( ) ; と書きます そしてその ( ) の中には こちらの2つの値を入れています 上に書いてあるほうは矩形の左下の 地点となる緯度・経度 2つ目に書いてあるのが矩形の右上の 角となる地点の緯度・経度 を設定しています まず1行目に関しては こちらは東京タワーの 緯度・経度を設定しています これまでと同じように new google.maps.LatLng( ) と書いて 緯度・経度を順番に書いています そして2つ目も全く同じですね こちらの緯度・経度は東京スカイツリーの 緯度・経度を指定しています このようにすることでこの変数 mapBounds には こちらの矩形の左下と右上の 緯度・経度の情報が入ったデータが こちらの変数に格納されてきます そしてこの変数 mapBounds を使って 実際に矩形を作成する部分を見ていきます こちらも同じくまずは 変数を定義しています var rectangle という名前の変数ですね そして = と書いて こちらは new google.maps.rectangle と書いています そして ( { で囲ってあげて そしてその { } の中には bounds というキーの設定項目を作ります そしてこの bounds に入れ込む値を mapBounds ということでこの変数は先程作った― 左下と右上の緯度・経度のデータでしたね これを指定してあげます このようにすることで 左下を東京タワーの位置 右上を東京スカイツリーの位置とした 矩形の作成ができます この矩形を実際に地図上に 表示する方法については 次回のレッスンで解説しますので そちらも合わせてご覧下さい 以上でレッスンは終了です 今回は Google Maps API を使って 地図上に矩形を描画する為の その作成方法について解説しました

初めてのGoogle Maps API

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

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

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

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

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