初めてのGoogle Maps API

線の作成と地図上への表示

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Maps API を使って 前回のレッスンで設定した座標を利用して 実際に地図上へ線を描画する方法について 解説いたします まずはダウンロードしてきた こちらの polyline_show という フォルダの中に入っている これら3つのファイルを エディッターで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず javaScript.js のファイルを エディッターで確認してみます 前回のレッスンで地図上に線を描画するための 始点と終点の移動経度を使った座標を 設定しましたね それがこの部分となります そして今回はその座標を使って 実際に線を作成して 地図上に描画していくのですが その部分はこちらの javaScript の コードでいうと この部分となります それでは実際にどのように線を作成して 地図上に描画しているかを 見ていきたいと思います まず線の作成です 線の作成はこの部分となります まずは変数を定義しています var と書いて変数の名前を ここでは line としています そして = と書いて new google.maps.polyline と書いています そしてその後に括弧 そして波括弧で囲っています その波括弧で囲まれた中に pass というキーを作成して その値を linePass としています この linePass は 前回のレッスンで作成した 線の始点となる緯度経度と 終点となる緯度経度を 配列として格納した変数でしたね 今回のレッスンでは線の始点を 東京駅として そして線の終点を大阪駅と設定しています このように書くことで東京駅と大阪駅を 結んだ線を作成することができます そしてこの作成した線ですが このままですと まだ地図上に表示はされてきません では実際にどのように地図上に 描画するかというと こちらの部分 このように書いていきます まずは変数 line ですね これは先ほど作った変数 line ですね 作成した線が格納されています そして .setMap ( ) と書いて その括弧の中の引数に設置したい地図を 格納している変数 Map を置いてあげます こうすることで始めて地図上に この作成した線が描画される形になります それではこの状態で javaScript.js を保存して ブラウザで確認してみたいと思います まずはこちらを保存して そして index.html こちらのファイルですね ブラウザで開いてみましょう するとこのように表示されてきましたね このように東京から大阪まで 線が描画されているのがわかります 始点の方を確認してみると このように東京駅から 始まっているのがわかりますね そして終点の方も確認してみましょう こちらの大阪の部分を見ていきますと このように大阪駅が終点となっています それではエディッターに戻ります 以上でレッスンは終了です 今回は Google Maps API を使って 地図上に線を描画する方法について 解説いたしました 以降のレッスンでは今回設定した線の スタイルを変更する方法について 解説していきますので そちらも合わせてご覧ください

初めてのGoogle Maps API

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

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

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

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

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