PhoneGap Buildで作るGPSを使ったスマートフォン用地図アプリ

フォームに入力された住所から緯度経度を取得する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Google Maps APIのジオコーディング機能を使って、検索された住所から緯度経度を取得する方法について解説致します。
講師:
05:49

字幕

このレッスンでは GoogleMaps APIの ジオコーディング機能を使って 検索された住所から 緯度経度を取得する方法について 解説いたします まずはダウンロードしてきた こちらの「get_latlng」という フォルダの中に入っている 「js」フォルダの中の「index.js」ファイルを エディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは早速レッスンを初めていきましょう まずは前回のレッスンのおさらいです 前回のレッスンでは こちらのこの部分ですね この部分でhtmlのフォームタグに対して サブミットイベントを登録しました 今回はこちらの「function」の波カッコの間に 入力された住所を実際に GoogleMaps APIの ジオコーディング機能を使って 緯度経度に変換する方法について 見ていきたいと思います それでは順番に目を通しながら どのように入力された住所を 移動経路に変換するのか 見ていきたいと思います まずはこちらの部分から まずこちらの部分では 変数アドレスという名前の変数に対して こちらのIDサーチがついたインプットボックスに 入力された内容を この変数アドレスに代入しています ちなみにこちらの「$.trim」というのは この「trim」のカッコの中の 引数に与えられた値の文頭や 文末の中に含まれている 無駄な空白やスペースを 取り除く役割を行っています そしてその次ですね こちらの「if文」です この「if文」では先程入力された住所を 格納した変数アドレスを基にして このアドレスっていう名前の変数に 値が入っていれば こちらの処理を実行して 入っていなければこちらの「else」の方の 処理を実行します 「else」の方に関しては 住所が入力されていない 状態となっているので アラート分でその警告を出してあげています それでは住所が入力されていた状態の方で 見ていきます 住所が入力されていれば まずはこちらのような形で リクエストパラメーターを作成していきます このリクエストパラメーターとは GoogleMaps APIの ジオコードの機能にアクセスするためのもので この中のアドレスという項目の中に 先程セットしてきた変数アドレスを セットしてあげることによって このアドレスの文字列から 緯度経度を検索してくれます もう一つこちらのセンサーという項目には 「true」の値を入れています これは以前のレッスンでもご紹介した GoogleMaps APIから GPSの機能にアクセスするための パラメーターですね 今回はもちろん利用していますので 「true」という値を入れています そしてリクエストパラメーターが このように作成できたら 次はajaxを使って このパラメーターをGoogleMapsのAPIに リクエストを送ります その部分がこちらの部分ですね まずはajaxの設定項目を確認していきます まずはこちらのタイプで 「GET」送信を指定します そしてこちらのURLには 先ほどのリクエストパラメーターを 投げる「url」ですね こちらはGoogleMaps APIの ジオコーディング機能にアクセスするための パスを書いています そしてこちらのデータという項目には 先ほどのリクエストパラメータの 変数を書いてあげます こうすることでGoogleMaps APIの ジオコーディング機能に対して 先ほどのリクエストパラメータを 投げることができます そのようにしてリクエストを投げて その結果が帰ってきた内容に応じて 処理を分けたのがこちらの 「fail」と「done」の部分です まずこちらの「fail」ですが こちらはajaxの処理中にエラーが発生した場合 正常に結果が帰ってこなかった場合に 実行される処理となっています 今回はアラート文を書いて 警告を出すようにしています そしてこちらの「done」の部分ですが こちらはその「fail」とは逆に 正常にAjaxを使って リクエストの結果が帰ってきた際に 実行される処理となっています ではこちらの「done」の 「function」の中を見ていきましょう まずこちらの「function」のカッコの中に書いてある この「data」という変数には そのajaxの結果 要するに今回はGoogleMaps APIの ジオーコーディング機能を使った 住所から緯度経度に変換したデータが こちらのデータに格納されてくるわけですね この変数データを使って 今後の処理を行っていきます まずはこちらの「if文」ですね 「if文」を作ってajaxの処理が 実際に成功しているのかどうかを確認していきます まずは「data.status=='OK'」ということで そのデータの処理が 実際に成功したものなのかどうか というものを確認してみます そして成功した後の処理がこちらですね この移動経路の情報が格納された この変数データから 実際に緯度と経度を抜き出して 変数に代入してみます それがこちらの部分ですね まずこちらの変数 「lat」という部分にはラチチュード 要するに緯度を代入してみます 緯度の取得の仕方は このような形で取得できます そしてその下の「lng」という変数には 経度の情報を代入してみます 経度の取得の方法はこのように書いていきます そしてその緯度と経度のデータを使って 新しくGoogleMaps APIで利用できる 位置情報の データに加工して 新しいこの「newLatLng」 という変数の中に格納してみます ここまでの記述が完了すれば 実際に入力された住所から GoogleMaps APIの ジオコーディング機能を使って 緯度経度の情報に 変換するまでの処理が完了しました 以上でレッスンは終了です 今回はGoogleMaps APIの ジオコーディング機能を使って 検索された住所から 緯度経度を取得する方法について 解説いたしました 以降のレッスンでは GoogleMaps APIを使って 今回取得した緯度経度の位置に 実際にアプリの中の地図を 移動させる方法について 解説していきますので そちらも合わせてご覧ください

PhoneGap Buildで作るGPSを使ったスマートフォン用地図アプリ

PhoneGap BuildとはHTMLやCSS、JavaScriptなどを使って制作したファイルをモバイルアプリに変換してくれるWebサービスです。このコースではPhoneGap Buildを使いながらGPS機能を用いた地図アプリの作成する方法について学習します。PhoneGap Buildの事前準備や地図機能の実装方法などについて詳しく解説します。

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

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

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

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