初めてのGoogle Maps API

矩形のスタイルの設定と、地図上への表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
設定した内容にもとづき、実際に矩形を地図上に表示する方法について解説致します。また、併せて矩形のスタイルの設定方法についてもご紹介致します。
講師:
05:21

字幕

このレッスンでは Google Maps API を利用して 前回のレッスンで作成した矩形を使って 矩形のスタイルの設定方法および実際に 地図上に矩形を描画する為の― 方法について解説します まずはダウンロードしてきたこちらの rectangle_show というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まず javascript.js をエディターで 開いて確認してみましょう 現状この JavaScript ファイルは 前回までのレッスンで作った― 矩形の作成が完了している状態となっています 今回はその矩形に対してのスタイルの設定と 実際に地図に描画して行くわけですが その部分がこの JavaScript ファイルの― こちらの部分となります まず矩形へのスタイルの設定について 見ていきましょう 矩形へのスタイルの設定ですが これは前回作成した― こちらの google.maps.rectangle の { } の中に設定していく形となります 今回はこの部分で設定していますね では順番にどのような設定項目があるか 見ていきましょう まず1番目 strokeColor ですが これは矩形を囲っている一番外側の線の色 という意味になります そして2つ目 strokeOpacity は その外側の線の透明度を指定できます 1.0 が完全に不透明で 0.0 が完全に透明となっていて その間の値で設定することができます そしてその下 こちらの strokeWeight は その外側の線の太さを指定できます 次にこちらの fillColor これは外側の線で囲まれた 中の部分の色を指定することができます そして fillOpacity これはその内側の部分の 透明度を指定できます 今回は外側の線の色も内側の色も 赤色に設定していて そしてそれぞれに対して それぞれの透明度を指定しています このようにスタイルを設定した上で この矩形を地図上に表示していく訳ですが 矩形の表示の仕方に関しては この部分となります どのように地図上に 矩形を描画していくかというと このようにまずはこちらで作成した 変数 rectangle と書いて .と書いて その後に setMap と書いて ( ) ; と書きます その setMap のあとの ( ) の中の引数に その矩形を表示させたい地図のデータが 入っている変数 map を入れ込んでいます このようにすることでこの変数 map に 格納されている地図に対して この rectangle 矩形を 表示させることができる訳です それではこの状態で index.html をブラウザで開いて どのように矩形が表示されているか 確認してみたいと思います こちらの index.html をブラウザで開きます するとこのように表示されてきましたね 少しズームをして確認してみましょう このように矩形ができあがっています 注目したいのはこちらの左下と右上の部分 まずは左下をズームして行ってみましょう するとこのように矩形の左下が東京タワーの 緯度・経度になっているのが分かりますね 次に右上を見てみましょう こちらの部分ですね これをズームして行きますと このように右上は東京スカイツリーの 緯度・経度に設定されているのが分かります この2つの点を結ぶようにこのように 矩形が生成されているわけです そしてこの矩形のスタイルに関しても 設定した通りに赤色になっていて 透過されています では エディターに戻ります 以上でレッスンは終了です 今回は Google Maps API を使って 矩形のスタイルの設定方法及び地図上に 矩形を描画する方法について解説しました 以降のレッスンでは Google Maps API を使って 住所から緯度・経度を取得する ジオコーディング機能の使い方について 解説しますのでそちらも合わせてご覧下さい

初めてのGoogle Maps API

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

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

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

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

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