勉強したことのメモ

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でマーカーを複数表示し、近隣のエリアごとにまとめて ...

Google Maps APIで現在地取得と目的地までのルートを表示させる方法

Google Maps APIを使って現在地を取得しつつ、目的地までのルートを表 ...

Google Maps APIで住所から経度緯度を取得する方法

やりたかった事はformに住所を入れてsubmitする際に、javascript ...

Google Maps APIで都道府県の中心地と県庁所在地にマーカーを立てる方法

Google Maps APIで都道府県の中心地もしくは県庁所在地にマーカーを立 ...

GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる

フォーム内に住所・経度・緯度のテキストボックスを設置し、住所を入力後にボタンを押 ...