初めてのGoogle Maps API

円の作成

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Maps API を使って 地図上へ円を描画するための 円の作成方法について解説します まずはダウンロードしてきたこちらの clrcle_make というフォルダの中にある― これら3つのファイルを エディターで開いて下さい これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます 早速レッスンを始めていきましょう まず javascript.js をエディターで 確認してみます すると現状はこのようになっています 現在は東京を中心に ズームレベルが7の 地図を作っていて それを HTML 上に表示させています そして今回はその東京の地点を 中心にした円を作成して 通常に描画させてみたいと思います 今回はその為の準備となります その円の作成方法ですが こちらの javascript.js のファイルの中の この部分に記載しています では 実際にどのように円を 作成しているか見てみましょう まず変数を定義していますね var と書いて ここでは変数の名前を circle としています そして = と書いて その後に new google.maps.circle と 書いています そして ( と { で囲ってあげたその中に 円を作るための設定項目を作ってあげます その設定項目ですが まずこちらの1つ目 center と書いていますね こちらの center には 変数の tokyo を入れています こうすることによって その東京の緯度・経度を中心とした 円を作成しろ といった命令になります そしてその次はこちらの radius という値です この radius という値には円の半径を メートル単位で指定してあげます 今回は10万メートルとしていますね ですので要するに100キロと いう意味になります このようにすることで 東京の緯度・経度を中心とした― 半径100キロメートルの円を作成できます この作成した円を実際に通常に 表示させる方法については 次回のレッスンで解説していきますので そちらも合わせてご覧下さい 以上でレッスンは終了です 今回は Google Maps API を使って 地図上に円を描画するための その作成方法について解説しました

初めてのGoogle Maps API

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

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

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

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

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