HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかった。調べてみるとHTML5のGeolocation APIというものが使えそう。以下対応方法のメモ。

対応ブラウザ

IE9～ / FireFox3.5～ / GoogleChrome 5～ / Safari 5～

取得のみのコード

var ret = new Array();
if( navigator.geolocation ){
    navigator.geolocation.getCurrentPosition(
        function( pos ){ //位置取得成功
            ret['long'] = pos.coords.longitude; //経度
            ret['lat'] = pos.coords.latitude; //緯度
            result( ret );
        },
        function( error ){ //失敗
            switch( error.code ){
                case 1: ret['msg'] = "位置情報の利用が許可されていません"; break;
                case 2: ret['msg'] = "デバイスの位置が判定できません"; break;
                case 3: ret['msg'] = "タイムアウトしました"; break;
            }
            result( ret );
        }
    );
} else { //使用不可のブラウザ
    ret['msg'] = 'このブラウザでは位置取得が出来ません。';
    result( ret );
}
function result( ret ){
    console.log( ret );
}

非同期通信を行う為、ソースが上から順番に読まれるわけではなく、処理順が変わってくるため注意。位置情報取得処理後に違う処理をしたい場合は、考えないといけないのが面倒。

以下にGoogleMapAPIに反映させるサンプルとソース。

サンプル

https://taitan916.info/sample/geolocation/

ソースコード

//サンプルで東京タワーを表示
var currentWindow = null;
var sample = { 'x':'35.65858', 'y':'139.745433', 'balloon':'東京タワー' };
var latlng = new google.maps.LatLng(sample.x, sample.y);
var myOptions = { zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
makeMarker(sample);


//現在位置の取得
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
    function (pos) { 
        var mapData = { 'x':pos.coords.latitude, 'y':pos.coords.longitude, 'balloon':'現在位置' };
        makeMarker( mapData );
    },
    function (error) {
        var msg;
        switch( error.code ){
            case 1: msg = "位置情報の利用が許可されていません"; break;
            case 2: msg = "位置が判定できません"; break;
            case 3: msg = "タイムアウトしました"; break;
        }
        alert(msg);
    });
} else {
    alert("本ブラウザではGeolocationが使えません");
}

//マーカー作成
function makeMarker( mapData ){
    var marker = new google.maps.Marker({
        position : new google.maps.LatLng(mapData.x,mapData.y), 
        map: map
    });

    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', function() {
        if (currentWindow) {
            currentWindow.close();
        }
        infoWindow.setContent(mapData.balloon);
        infoWindow.open(map,marker);
        currentWindow = infoWindow;
    });
}

その他

ブラウザによってリロードのたびに許可を求められるものと求められないものがあった。一度取得したものは10分ぐらいキャッシュさせとくのが良いかも。