NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

GoogleMapApi v3 と GeolocationAPI を使って簡単に現在地の住所を取得する

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1216日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

GoogleMapsAPIなどを利用する場合、経度や緯度といった座標情報を取得する必要があります。これはジオコーディング(Geocoding)と呼ばれ、GoogleMapsAPIにもそのための仕組みが用意されていました。

それに対し、GPSや地図をドラッグさせるなどして取得した座標から地名などを取得する方法は逆ジオコーディング(Reverse Geocoding)と呼ばれていますが、以前はこちらの方法はAPIが提供されていませんでした。

しかし、いつの間にか(V3になってから?)GoogleMapsAPIでも逆ジオコーディングが出来るようになっていたので、今回はそれをつかって、スマホから現在地を取得し、住所を表示させてみようと思います。

GPSから座標を取得する方法

今回はHTML5のGeolocationAPIという仕組みを使います。

理由としては、

  1. 実装が簡単であること
  2. GPSを使ったウェブアプリとなるとターゲットはほぼスマホになること
  3. スマホブラウザをメインとするならデスクトップ向けよりもHTML5をごりごり使えること(古いIEとかを考慮しないでいいため)

などです。

GeolocationAPIはGPS以外にも、無線LAN・WiFi・携帯電話基地局・IPアドレスなどから現在地を割り出すことが出来るため、PC環境でもある程度の位置までは取得できるようです。[*1]

では早速現在地を取得してみましょう。

 これだけでOKです。

実行結果に応じて、成功したら第一引数の関数が、失敗すると第二引数の関数が呼ばれます。

今回は、成功時は is_success()、失敗時は is_error() という関数名に、更にそれぞれ、position、errorに結果を格納するようにしました。名前を変更する場合はうまいこと読み替えて下さい(←

と、いうことで成功時は position に座標情報が格納されますので、それを取り出していけばOKです。

経度 position.coords.latitude
緯度 position.coords.longitude
高度 position.coords.attitude
経度・緯度の誤差 position.coords.accuracy
高度の誤差 position.coords.altitudeAccuracy
方角 position.coords.heading
速度 position.coords.speed

例えば、経度をコンソールに出したいなら、

って具合です。

続いてエラーの時の内容ですが、こちらはエラーの内容に応じて error.code にエラーコードが返ってきます。また、エラーの詳細が error.message に入ります

1 PERMISSION_DENIED
位置情報の取得が許可されていない
2 POSITION_UNAVAILABLE
デバイスの位置情報の取得に失敗
3 TIMEOUT
処理がタイムアウトした
(タイムアウト時間を指定してる場合)

ただし、エラーが起きた時に、ユーザーに提示するエラーメッセージとして error.message をそのまま使用すべきではないとのことなので、このコードで判定して独自にメッセージを作成したほうがいいみたいです。[*2]

ということで、ここまでをまとめるとこんなかんじになります。

これを適当に名前をつけて、ブラウザで開くと、「現在地の利用を許可するか」を聞いてきますので許可します。拒否すると、エラーコード2になります。

取得出来れば現在地の座標が表示されるはずです。 

これで座標の取得はできるようになりました。

続いて座標から地名を取得(逆ジオコーディング)します。 

逆ジオコーディングの方法

ジオコーディング サービス – Google Maps JavaScript API v3 — Google Developers

こちらのページを見ると、逆ジオコーディング(住所の逆検索)という章があり、そこにそのまんまサンプル付きで載っていますので、それをそのまま利用すればよさそうですね。

サンプルではフォームに入力された座標から地名を取得し、地図をそこに移動してバルーンに地名を出していますが、今回は地図は出さないしフォームも使わずGPSからとった位置で判定するのでその辺をごりごり消していきます。

これを保存して開くと、

現在地の経度・緯度・住所が表示されるはずです。

因みに地名の精度(?)は

results[0].formatted_address 

の[0]って部分で変更できます。

0〜7まであって、それぞれ取得できる範囲が異なります。

皇居の例 スカイツリーの例
0 日本, 〒102-0072 東京都千代田区千代田1−1 日本, 東京都墨田区押上1丁目1−2
1 〒100-8111, 日本 日本, 東京スカイツリータウン(バス)(東京)
2 〒100-0001, 日本 日本, 東京都墨田区押上1丁目1
3 〒100-0001, 日本 日本, 東京都墨田区押上1丁目
4 〒102-0072, 日本 日本, 東京都墨田区押上
5 日本, 東京都千代田区千代田 〒131-0045, 日本
6 日本, 東京都千代田区千代田1 日本, 押上駅(東京)
7 〒101-0021, 日本 日本, 東京都墨田区

こんなかんじで、実はいろんな返り方をします。0番以外は結構ブレますね。

一致率が最も高い住所から最も低い住所の順で表示されます。通常、より正確な住所が最も重要な結果であり、この場合もそうなっています。最も詳細な番地まで含む住所から、周辺地域、都市、郡、州などのより範囲の広い行政区画まで、さまざまなタイプの住所が返されていることに注意してください。より一般的な住所との一致を検索する場合は、results[].types フィールドを調べます。

注: 逆ジオコーディングは科学的に正確というわけではありません。ジオコーダは、一定の許容範囲内で最も近い、住所の特定が可能な場所を探そうとします。

とのことです。

逆ジオコーディングを使って住所を入力する場合でも、あくまでGPSによる取得は補助的なものとして使い、取得結果をフォームに出力させておいて、手動で修正できるようにするのがよさそうですね。 

おまけ

ところで、GPSのテストとかをする場合、実際にあちこち移動してチェックするのは大変ですよね。

そんなときは開発ツールにあるGPSの上書き機能を使うと便利です。

Chromeでの例になりますが、Cmd+Opt+I(またはF12)でデベロッパーツールを開き、右下の歯車アイコンをクリックすると出てくる、Settings の Overrides にある、「Override Geolocation」を有効化して、座標を入力すると、GPSなどの機能を使うときにその座標を返すようになるそうです。

override_geolocation

これを使えばいろんな座標でテストを行うことができますね。

しかし、これがうまく動かないことがあったり、そもそも座標を調べるのが面倒だったりってこともありますよね。

そんなときは、 Manual Geolocation という Chrome エクステンションが便利です。

インストールして、Manual Geolocation のアイコンをクリックすると、GoogleMapっぽいものが表示されます。初期状態では無効「disable」になってますので、「enable」をクリックします。

manual_geolocation_1

すると、地図上にマーカーが出て、そのマーカーの座標で現在地が上書きされます。

「場所を入力」に地名を入力して「search」をクリックするとマーカーが移動して、現在地の情報もそこに変わります。

また、手動で地図をダブルクリックしてもそのマーカーがその位置に移動します。

manual_geolocation_2更に、マーカーの下の「○」をドラッグすると、このように輪を広げることができます。

これを調整することで、GPSの取得誤差をかえることができます。

デベロッパーツールについている機能を使うよりもこちらのほうが地図や地名から簡単に設定できるため、GPSを利用したなにかを作るときのテストにはおすすめです。

テストが終わったら「disable」をクリックして機能をオフにすることを忘れずに…。

ダウンロードはウェブストアからどうぞ。

Chrome ウェブストア – Manual Geolocation

参考

Geolocation API-HTML5のAPI、および、関連仕様

ジオコーディング サービス – Google Maps JavaScript API v3 — Google Developers

TAGS