●サンプル07のソースコード
<!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 + Database</title>
<style><!--
#pos, #msg { font-size:9pt; }
#gpsData { font-size:8pt;line-height:110%; }
--></style>
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript"><!--
// GPSデータ保存用データベースを開く（記録されたデータベースが存在することが必須）
var myDB = openDatabase("gpsDB","1.0","GPSデータ");
var db = new Array(); // 配列にまとめて読み出す
var maxCount = 0; // 記録されたデータの最大数を入れる変数
// データベースからGPSデータを読み出し
function readDB(){
myDB.transaction(
function(tx){
tx.executeSql('SELECT * from gpstable;',
[ ],
function (tx, rs){
maxCount = rs.rows.length; // 記録された数（最大値）を変数maxCountに入れる
for (var i=0; i<maxCount; i++){
var row = rs.rows.item(i);
db[i] = [row.lat, row.lng, row.time]; // 配列に読み出した情報を入れる
}
});
},
function(){
document.getElementById("pos").innerHTML = "データベース読み出しエラー";
},
function(){
// データベース内のデータを全て読み終わった時の処理
setTimeout("moveGMap()", 100); // 0.1秒ごとにマップの更新を行う
}
);
}
// ページが読み込まれたときの処理
window.onload = function(){
// グーグルマップ ver 3の構築と表示
var defPos = new google.maps.LatLng(36, 137); // 座標値はどこでもよい
gmap = new google.maps.Map(document.getElementById("map_canvas"), {
zoom : 17,
center : defPos,
mapTypeId : google.maps.MapTypeId.ROADMAP
});
gmarker = new google.maps.Marker({
positon : defPos,
map:gmap,
icon : "./arrow.png"
});
readDB(); // データベースから記録された座標値を読み出す
count = 0;
}
// マップ移動表示
function moveGMap(){
var lat = db[count][0];
var lng = db[count][1];
var dt = new Date(db[count][2]); // 記録された日付オブジェクト生成
var M = dt.getMonth() + 1; // 月を求める
var D = dt.getDate(); // 日にちを求める
var h = dt.getHours(); // 時を求める
var m = dt.getMinutes(); // 分を求める
var s = dt.getSeconds(); // 秒を求める
// 緯度、経度と時間を組み合わせた文字列を生成
var tmsg = M+"月"+D+"日 "+h+"時"+m+"分"+s+"秒";
// 読み出した緯度、経度をグーグルマップ上に反映
var currentPos = new google.maps.LatLng(lat, lng);
gmap.set_center(currentPos);
gmarker.set_position(currentPos);
document.getElementById("pos").innerHTML = (count+1)+"/"+maxCount+" : " + lat+","+lng+"<br>"+tmsg;
// 配列からの読み出す場所（要素番号）を1つ増やす。最大値未満の場合だけ繰り返す
count++;
if (count < maxCount) { setTimeout("moveGMap()", 250); }
}
// --></script>
</head>
<body>
<div id="map_canvas" style="width:90%;height:75%"></div>
<div id="pos">lat, lng</div>
</body>
</html>
エラーが発生したときには……データベースの削除方法
サンプルプログラムを実行した際、何らかの原因でエラーが発生した場合には以下の手順で一度データベースを手動で削除してから再度テストしてみてください。
（1）設定のアイコンをタッチする
（2）Safariの欄をタッチする
（3）データベースが作成されている場合はデータベースという欄があるのでタッチする
（4）データベース一覧が表示されるので右上にある「編集」ボタンをタッチする
（5）削除したいデータベース名の左側にある(-)をタッチする
（6）削除ボタンが表示されるのでタッチする
