#2【Google Maps API v3】現在地座標を取得しマップ上に表示させる

こんにちは!@Higemuraです!

前回は指定した座標をマップ上に表示させることができました!

前回の記事はこちら↓

#1Google Maps API v3】指定座標をマップ上に表示させる

今回は現在地座標を取得して動的にマップ上にマーカー画像を表示させていきたいと思います。

現在地を取得するには?

Google Map で現在地を取得するには Geolocation API というものを使用します。 Geolocation API はユーザーが使用しているデバイスの位置情報を扱うことができます。 地図アプリなどを起動すると「位置情報の取得を許可しますか?」みたいなポップアップを見たことありませんか?

この動作をGeolocation API を使用することで位置情報の取得をすることができます。

今回は Geolocation API を使用して以下のような動作を実装していきます。

  • 位置情報取得の許可の確認
    • 許可現在地情報を取得成功したら → 取得した座標をマップに表示
    • 現在地情報を取得失敗したら → マップを表示しない
    • 拒否位置情報を取得しない&マップを表示しない

ユーザーへ位置情報を取得するか確認をして 拒否したら取得しない&マップを表示しない もしくは通信環境が悪かったり位置情報が取得失敗したらマップを表示しない という条件分岐で実装したいと思います。

Geolocation で条件分岐を実装

現在地を取得できているかを確認するには getCurrentPosition() というメソッドを使用します。

これを navigator.geolocation.getCurrentPosition() という形で取得していきます。 JavaScriptを以下のように追記してください↓

これで、現在地情報を取得する準備が整いました!

しかし、現在地情報を 取得成功 or 取得失敗 した時の処理を分岐させなくてはいけません。

そこで getCurrentPosition() 第一引数第二引数を設定することで成功or失敗の処理を分けることができます。

  • 第一引数に成功した時の処理(success
  • 第二引数に失敗した時の処理(error

を設定できました!

埋め込みだとうまく確認できないかもしれないのでCodePenで直接確認ください↓

デモはこちら(Safari をお使いの方は確認できませんのでご注意ください)

See the Pen #2 Google Map My Location by Higemura (@Higemura) on CodePen.0

しかしこのままでは位置情報の取得に時間が掛かった時に永遠に処理が終了しません。

そこで getCurrentPosition()第三引数 にタイムアウトなどのオプションを設定できます。

このように 第三引数 の options 内に以下のような設定が可能です。

enableHighAccuracy true or false 精度の高い位置情報を取得する
timeout 数値 タイムアウトまでの時間(単位:ミリ秒)
maximumAge 数値 位置情報の有効期限(単位:ミリ秒)

現在地座標を取得する

これで現在地の座標を取得できるようになりました! あとは success 内に 引数を使って現在地の緯度経度を取得し、指定することでマップ上に表示することができます。

以前、手動で指定していた緯度経度(東京駅の座標)を以下のように書き換えましょう↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です