このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第28回

加速度センサーで操縦する地図サイトを作ろう

2010年03月12日 11時00分更新

古籏一浩

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

傾けた方向に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;


Web Professionalトップページバナー

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

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

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