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

サンプルコード ———————————————————————-

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

<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>

– 上のコードのサンプルページ

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

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

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

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

geolocation.watchPosition とは？ ———————————————————————-

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

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

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

– クラウドで動く GPS 連動スマホ用 Web アプリを作る – ＠IT – PhoneGap API Documentation

ありがとうございます！