初めてのGoogle Maps API

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

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Maps API を利用して 前回のレッスンで作成した円を使って 円のスタイルの設定方法および 実際に地図上に円を描画する為の― 方法について解説します まずはダウンロードしてきたこちらの circle_show というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まず javascript.js をエディターで 確認してみましょう するとこのような形になっています これは前回のレッスンに引き続き 東京を中心としたズームレベルが7の 地図を HTML に表示していて そして前回のレッスンでは円の作成を する所までやりましたね 今回はその円にスタイルを設定した上で 地図上に実際に表示する 方法について解説していきます まずは前回のレッスンで作成した 円の部分ですが こちらのファイルですとこの部分となります ただ 前回のレッスンではこちらの center と radius の2つの設定項目だけでしたが 今回はこのように円のスタイルを 調整する為の設定項目を追加しています どのような内容を追加しているか 順番に見ていきましょう まず こちらの strokeColor これは円の外側の線の色を指定できます 次の strokeOpacity これはその外側の線の透明度を指定できます 1.0 が完全に不透明で 0.0 が完全に透明という形になっていて その間で値を設定することができます そしてこちらの strokeWeight これはその外側の線の太さを設定できます 次にこちらの fillColor これはその外側の線に囲まれた 中の色を設定することができます その次の fillOpacity これはその内側の部分の 透明度を指定できます 現在の設定では外側も内側の色も 赤色に設定していて そしてそれぞれに透明度を設定しています このようにスタイルを設定したこの円 変数 circle ですね こちらを使って実際に地図上に 表示させてみたいと思います 実際に地図上に表示させるためのプログラムは この部分となります では見てみましょう まずは 前回のレッスンで作成した円 そして今回のレッスンでスタイルを 追加したこちらの変数 circle これを書いてその後に . そして setMap と書いて ( ) と書きます そしてその ( ) の中の引数には この円を表示させたい地図を 含んでいる変数 map を設定しています このようにすることでこの変数 map に 入った地図の上に この円を表示することができる訳です それではこの状態でこの index.html をブラウザで開いて どのように円が描画されているか 確認してみたいと思います こちらの index.html をブラウザで開きます するとこのように表示されてきましたね このように東京を中心として 半径100キロメートルの円を 描画することができています そしてその円の色や線の太さは 先程設定した円のスタイルに基づいて 表示されていますね では エディターに戻ります 以上でレッスンは終了です 今回は 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宛までご連絡ください。