iPhoneのGPSをJavaScriptで操ろう

2009年07月06日 18時24分更新

古籏一浩

ツイートする

現在地をマップ上に表示する

　Googleマップが表示できるようになったので、いよいよGPSデータと組み合わせます。

　現在の位置情報から緯度、経度を読み出し、Googleマップの表示場所に設定します。地図の中心座標を指定した場所にするには set_center() を使います。パラメーターに中心座標にしたい緯度経度オブジェクトを指定します。

　地図の中心が移動したらマーカーも同時に移動させましょう。マーカーの位置を再設定するには set_position() を使います。パラメーターにはマーカーを表示する緯度経度オブジェクトを指定します。

　ここまでをまとめたものがサンプル03です。実際にiPhone上のSafariで開いてみると、現在地点がGoogleマップ上に表示されるはずです。うまく表示されない場合は、屋外で高い建物がないところまで移動してみてください。


Googleマップ上に矢印のマーカーが表示される

●サンプル03のソースコード


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Safari + GPS</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript"><!--
window.onload = function(){
    var defPos = new google.maps.LatLng(36, 137); // 座標値はどこでもよい
    gmap = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom : 17,  // ズームレベルは17（詳細地図）
        center : defPos,    // 地図の中央座標
        mapTypeId : google.maps.MapTypeId.ROADMAP // 地図の種類（通常の地図）
    });
    gmarker = new google.maps.Marker({
        positon : defPos, // マーカーの表示位置
        map: gmap,  // マーカーの表示対象となるマップオブジェクト
        icon : "./arrow.png"    // マーカーアイコン画像のURL
    });
    navigator.geolocation.watchPosition(update);
}
// 位置情報を表示しマップ上に反映
function update(position){
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    var currentPos = new google.maps.LatLng(lat, lng);  // 緯度経度オブジェクトを生成
    gmap.set_center(currentPos);    // 現在地をマップの中心座標に設定
    gmarker.set_position(currentPos); // マーカーを中央に表示
    document.getElementById("pos").innerHTML = lat+","+lng+"<br>"+(new Date());
}
// --></script>
</head>
<body>
<div id="map_canvas" style="width:80%;height:80%"></div>
<div id="pos">lat, lng</div>
</body>
</html>