Googleマップに、GPSを使って現在位置(と誤差を表す円)を表示するサンプル

タイトルのとおりですが、Google マップ上に GPSなどを使って現在位置(と誤差の範囲を表す円)を表示するサンプルを作ってみました。

HTML5関連の geolocation API というものを使えば、JavaScript から現在位置情報は簡単に取得できます。値はそのまま Google Maps API に渡せますので、連携自体はとても単純です。

ちなみに、位置情報はGPS搭載のスマートフォンでないとダメというわけではなく、PCのブラウザなどからでも取得可能ですよ（環境による精度の差はありますが）。

サンプル

(ブラウザから、位置情報を取得してよいかの確認が行われます)

どうでしょうか、おおよその現在位置と、誤差を表す半透明の青い円が表示されていますでしょうか？

概要

全体のコードはあとでご紹介しますが、肝心の、位置情報の取得に必要な JavaScriptコードはたったこれだけです。

navigator.geolocation.getCurrentPosition(function(pos) {
 // 取得成功時の処理
});

結果は pos.coords に、以下のように格納されています。

　　　　pos.coords.latitude  : 緯度
　　　　pos.coords.longitude : 経度
　　　　pos.coords.accuracy  : 誤差（単位はメートル）

 
で、取得した緯度経度の値をそのまま使って、Googleマップ上にピンを立ててやればOKです。

また、Googleマップには線を引いたり円を描いたりする機能もありますので、誤差の範囲を google.maps.Circle() を使ってマップ上に円で表示してみています。(この円ひとつでずいぶんそれっぽくなりました)

対象ブラウザ

気になる対象ブラウザなんですが、iPohne や Android のブラウザはもちろん、PC の Chrome, FireFox, Safari などでも問題なく取得可能です。IE は、バージョン9以降であれば取得できます。

使用ブラウザが geolocation API に対応しているかどうかは navigator.geolocation を参照すれば判定できますので、以下のようにして

if (! navigator.geolocation) {
    // 非対応ブラウザ向けの処理
}

 
コードの冒頭で処理を分けてやるとよさそうです。

ソースコード

全体のコードはこんな感じになります。(※要jQuery)

jQuery(function($) {

   // gps に対応しているかチェック
 if (! navigator.geolocation) {
      $('#gmap').text('GPSに対応したブラウザでお試しください');
        return false;
   }

   $('#gmap').text('GPSデータを取得します...');

 // gps取得開始
  navigator.geolocation.getCurrentPosition(function(pos) {
        // gps 取得成功
     // google map 初期化
       var gmap = new google.maps.Map($('#gmap').get(0), {
           center: new google.maps.LatLng(35, 135),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
           zoom: 17
        });

     // 現在位置にピンをたてる
      var currentPos = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
     var currentMarker = new google.maps.Marker({
            position: currentPos
        });
     currentMarker.setMap(gmap);

     // 誤差を円で描く
      new google.maps.Circle({
            map: gmap,
          center: currentPos,
         radius: pos.coords.accuracy, // 単位はメートル
         strokeColor: '#0088ff',
           strokeOpacity: 0.8,
         strokeWeight: 1,
            fillColor: '#0088ff',
         fillOpacity: 0.2
        });

     // 現在地にスクロールさせる
     gmap.panTo(currentPos);

 }, function() {
     // gps 取得失敗
     $('#gmap').text('GPSデータを取得できませんでした');
       return false;
   });
});

参考

Geolocation.getCurrentPosition() - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Geolocation.getCurrentPosition