傾けた方向にGoogleマップを移動させる
加速度の値の取得方法が分かったところで、今度は地図を動かしてみましょう。まずGoogleマップを表示する領域（コンテナ）を用意します。ここではID名に「map_canvas」と付けた空のdiv要素を用意しました。
ページ内容が読み込まれたら、Googleマップをnew google.maps.Map()として生成し表示します。地図のスタート地点（デフォルト位置）は後ほどGeo Location APIで変更しますが、ここではひとまず秋葉原駅にしてあります。位置を変更したい場合は以下の2行の値を変えてください。
var lat = 35.698179;
var lng = 139.772489;
次に、PCを傾けた方向に地図を移動させます。デフォルトの位置を示す変数lat, lngに加速度センサーの値を加算していき、新たな位置をsetCenter()を使って設定します。これで、PCを傾けた方向に地図が移動するようになります（サンプル02）。ズームアウトすると地図はゆっくりと移動します。
|
|---|
| サンプル02。傾けた方向に地図がスクロールする |
●サンプル02[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>傾けた方向にグーグルマップを移動させる</h1>
<div id="map_canvas"></div>
<div id="sensor"></div>
</body>
</html>
●サンプル02[JavaScript:sample.js]
var gmap;
var lat = 35.698179;
var lng = 139.772489;
window.addEventListener("MozOrientation", function(orientData){
var x = orientData.x; // 左右方向の傾き
var y = orientData.y; // 奥～手前方向の傾き
lng = lng + Math.round(x * 1000) / 10000000;
lat = lat - Math.round(y * 1000) / 10000000;
gmap.setCenter(new google.maps.LatLng(lat, lng)); // 現在地をマップの中心座標に設定
document.getElementById("sensor").innerHTML = "x:"+x+"<br>y:"+y;
}, true);
window.addEventListener("load", function(){
gmap = new google.maps.Map(document.getElementById("map_canvas"), {
zoom : 19,
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
});
}, true);
スクロール速度を変えたい場合は、以下の2行の10000000の数値を変更してください。PCに搭載されている加速度センサーの精度によっては、x, yを別々に設定した方がよいかもしれません。
lng = lng + Math.round(x * 1000) / 10000000;
lat = lat - Math.round(y * 1000) / 10000000;
ソーシャルリアクション
この連載の記事
- 第81回 iBooks AuthorでHTML5の電子書籍作ってみた
- 第80回 iOS 5の新機能で作る「パノラマビュー」アプリ
- 第79回 CanvasとPhoneGapで作るiPhone用落書きアプリ
- 第78回 PhoneGapでiPhoneのコンパスアプリを再現
- 第77回 もうFlashは要らない!?スマホ用CSS3アニメを作ろう
- 第76回 iPhoneでも動くアニメが作れるSencha Animatorの使い方
- 第75回 CSS3でFlash並みアニメが作れるSencha Animator
- 第74回 Capture APIでiPhone用ビデオレコーダーを作ろう
- 第73回 JavaScriptで作れるiPhone用ボイスレコーダー
- 第72回 PhoneGapのMedia APIでバイブ付き音楽プレーヤー
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
