このページの本文へ

iPhoneのGPSをJavaScriptで操ろう (6/6)

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

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

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

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

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

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

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

iPhone GPS

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データをデータベースに記録する方法を解説します。どうぞお楽しみに。


■もっと勉強したい人のための参考書(Amazon.co.jp)

前へ 1 2 3 4 5 6 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く