初めてのGoogle Maps API

ジオコーディング機能を使って、住所から緯度経度を取得

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

ぜひご覧ください。

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

字幕

このレッスンでは Google Maps APIの ジオコーディング機能を使って 住所入力ファームに入力された地名や住所から 緯度経度の情報を取得する方法について 解説して行きます まずはダウンロードしてきた こちらの 「 geocoding_latlng 」 というフォルダの中に入っている これら3つのファイルを エディタで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルを使って 今回のレッスンの解説を進めて行きます それでは早速レッスンを始めて行きましょう それではまずこの index.html をブラウザで開いて 現状の動きを確認してみたいと思います こちらのファイルをブラウザで開きます するとこのように表示されてきました ではこちらに適当に住所や地名を 入れてみたいと思います 例えば 「東京スカイツリー」と入れてみましょう そしてこちらの移動のボタンをクリックします するとこのように JavaScript のアラートで 緯度と経度の内容が表示されてきています これが東京スカイツリーの 緯度と経度となります 今回はこのアラートの内容を表示させる所まで 解説して行きたいと思います それでは OK ボタンを押して エディタに戻ります では javascript.js のファイルをエディタで 確認して行きます 今回解説して行く場所というのは このファイル上のこの部分となります ちょっと長いですね では順を追って確認して行きたいと思います まずは前回のレッスンで行なった 移動ボタンに対するクリックイベントが この部分となっていて その下に $(this).blur(); がある状態です 今回のレッスンはこの下からとなります まずは入力フォームに入力された住所や地名を 変数に格納して行きます このように div#dgeocoding の直下にある input の var とすることで 入力された内容を取得することができます その入力された内容を $.trim で 囲ってあげることで 文頭や文末についた不要なスペースを 取り除いています そうして加工をしたものを この変数 address という所に入れています そしてそれが取得されたら次はこの部分です if 文です if (address) { } としています if (address) とすることで この変数 address の中に 入力された内容があれば この if の中を実行するといった形にしています ちなみにこの if には ずっと下に降りて行くと ここにそれの対となる else が存在しています そしてここには住所が入力されていなかった場合 要するに変数 address が空っぽの場合に 実行される内容を書いています ここではアラート 「住所が入力されていません」としています では上の方に戻って 続きをみていきましょう 住所が入力されていたら まずはこの request parameter を 作成して行きます これは入力された住所をベースに google maps API の ジオコーディング機能を使って 住所を緯度経度に変換するために 利用するためにパラメータとなります もちろんこのパラメータには このように address という内容に 先ほど住所を格納したこの変数 address を 割り当てています そしてもう1つのパラメータである この sensor には ここでは false と入れておきましょう この2つのパラメータを変数 param に オブジェクトして格納しておきます ここまでできましたら 次は ajax というものを使って行きます ajax とは簡単に言うと javascript を使って他のサイトや他のドメインに リクエストを投げてそして そのリクエストに基づいたレスポンスを 受け取るための手法となります その ajax ですが このように書いて行きます まずは $.ajax({ と書きます そしてこの中には その ajax を実行するにあたっての 設定項目を書いて行きます そしてその後に2つの項目が並びます まずはこちら fail と done です まずはこちらの fail ですが この fail に後に続く function の { } の中には その Ajax の処理中にエラーが発生した場合に 実行する処理を書いていきます そしてもう1つのこちら done について この done の後の function の { } の間に その ajax の処理が無事に成功した時に 実行させるためのプログラムを書いていきます ではまずこちらの ajax の後の { } の中から まずは type: 'Get' としています これで get 通信を行なう形になります そしてこの URL は Google Maps API を使った ジオコーディングの機能にアクセスするための URL を書いています この URL に関しては google maps API のサイト上にある ドキュメントにも記載があります そして最後のこちらの data という項目には 先ほど設定したこちらの リクエストパラメータが入っている 変数 param がそのまま設定してあります このようにすることでこの param を パラメータとして こちらの Google Maps API ジオコーディング機能にアクセスするわけです そしてそのアクセスした結果が こちらの fail と done で分岐されます 失敗すればこちらの fail の中の 処理が実行されます ここではアラートにして 「処理中にエラーが発生しました」 というダイアログを出すようにしています そしてポイントはこちらの成功した際 ajax 処理に成功するとこちらの done の後の function の { } の中にあるこの data という 変数の中に その結果が格納されています まずこの data. status の項目には 'OK' という項目が入ってきます この 'OK' が入ってくることによって 無事成功したという形になります そしてこの data には リクエストパラメータで 投げた住所をベースとした 緯度経度の値が入っていきます その緯度経度を使いやすいように 変数に格納しているのが こちらの部分となります 例えば緯度でしたら 変数 var 名前を lat として =data.results そして配列の0番 そして .geometory.location.lat としています そして経度に関しても 同じような形で longitude の long を 指定しているわけです そしてそれぞれ格納した緯度経度を こちらのアラート文で緯度と経度を 出力しているわけですね 今回 ajax というものがでてきて 少し難しく感じられる方もいるかも知れません この ajax は覚えておくと様々なことに 応用できるようになるため 今回 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宛までご連絡ください。