勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/01/13  Google Maps API Google HTML

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分ぐらいキャッシュさせとくのが良いかも。

 - Google Maps API Google HTML

  関連記事

Google Maps APIでマーカーが全て表示されるように自動ズームする方法

Google Maps APIでマーカーを複数設置した場合にズームの値や、マーカ ...

GoogleMapAPIでジオコーディングできない場合の対応方法

住所から経度緯度を取得するジオコーディングをGoogleMapAPIを用いて行お ...

Google Maps APIでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...

Google Maps APIで半径●メートル範囲を円で表示する方法

Google Maps APIでマーカーを立てて、そこから範囲●mもしくは●km ...

Google Maps APIでヒートマップを表示する方法

Google Maps APIで花粉状況や雨量を可視化しやすいようなヒートマップ ...