omadog-blog

自分が体験したこと、自分の頭で考えたことを書きます

HTML5のGeolocationで現在地表示

HTML5のことをもっと理解したいと思い、APIなど勉強初めて見ました。
Geolocationは現在位置をGPSやWi-Fiなどから測定して緯度経度情報を得られるAPIです。

GooglemapのAPIと連携させると現在位置をスマホのブラウザ上で地図上に表示させたりするのが結構簡単にできます。

GeolocationのgetCurrentPosition()メソッドで現在地の情報が取得できます。

getCurrentPosition(成功時コールバック、エラー時コールバック、情報保持時間)

こんな風にやると、Geolocationで取得した緯度経度をGooglemapの地図上にプロットして現在位置を表示させることができます。

navigator.geolocation.getCurrentPosition(function(position) {
 var lat = position.coords.latitude;
 var lng = position.coords.longitude;
var currentPos = new google.maps.LatLng(lat,lng,true);
 }
);

これを行うための準備としてGooglemapのオブジェクトをHTML上の地図の表示箇所とプロパティを指定して生成しておく必要があります。
【JS】
var map = new google.maps.Map(document.getElementById('mapArea'),mapOptions);

Geolocationのメリットというのは、HTML上の記述で地図情報を操作できるので、デバイスごとの記述が必要なくて、ブラウザの仕組みとして、同じ記述でいろんな種類のデバイスで利用できるという点ですね。

以上、備忘録として。