現在地をマップ上に表示する
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>
さて、今週はここまでです。次週は、SQLiteを使って、iPhoneから取得したGPSデータをデータベースに記録する方法を解説します。どうぞお楽しみに。
