[ JavaScript ] 現在地周辺の地図をリアルタイム表示するスマホ用サンプル

スポンサードリンク

クラウドで動く GPS 連動スマホ用 Web アプリを作る – @IT と言う記事で、現在地周辺の地図をリアルタイム表示するスマホ用サンプルが紹介されていたのでやってみました。

サンプルコード

掲載されていたサンプルにコメントを入れたもの。ほぼ、そのままです。スミマセン…。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<title>現在地周辺の地図をリアルタイム表示するスマホ用サンプル</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

// 初期処理
function initialize(){
    if (typeof(navigator.geolocation) != 'undefined') {
        // 位置情報を継続して監視する
        navigator.geolocation.watchPosition(success, error);
    }
}

// 現在位置を表示する
function success(position){

    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    console.log("[ 緯度 ] " + lat);
    console.log("[ 経度 ] " + lng);
    console.log("[ 日時 ] " + (new Date()).toString());

    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var googlemap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position: latlng,
        map: googlemap
    });
}

// エラー用
function error(e){
    alert("エラーが発生しました - " + e.message);
}        

</script>    
</head>
<body onload="initialize()">
<p>現在地周辺の地図をリアルタイム表示するスマホ用サンプル</p>
<div id="map_canvas" style="width:230px; height:320px;"></div>
</body>
</html>

iPhone の Safari で開いたらエラーが発生

iPhone の Safari で開いたら、次のようなエラーが発生して動きませんでした。

The operation couldn’t be completed. (kCLErrorDomain error 1.)

Gps

こんな時は、iPhone の [ 設定 ] → [ 位置情報サービス ] で [ Safari ] の位置情報サービスをオンに変更するとエラーが出なくなります。

geolocation.watchPosition とは?

サンプルコードの中で使っている geolocation.watchPosition は位置情報に変化があった場合にデバイスに現在位置情報を返す非同期関数なんだそうです。

環境によっては、iPhone を移動していないのに、数秒ごとに位置情報を取得して再描画するため地図がちらつく事があり見づらいです。 位置検知の周期を遅くすると解決できそうなんですが、そんなこと出来るのかな?

参考にさせてもらったページ

ありがとうございます!

スポンサードリンク

この記事が気に入ったら、ぜひシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。