スマホサイトに特殊機能を組み込む

ＧＰＳ機能を使用したマップの組み込み

まずは地図を表示してみましょう。地図として、今回は「Googleマップ」を表示させてみます。ファイルを読み込んだ際に地図が表示されるようにしましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Spotnavi</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
      function initialize() {
          var latlng = new google.maps.LatLng(35.669220, 139.761457);
          var myOptions = {
              zoom: 16,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var googlemap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }
    </script>    
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:230px; height:320px;"></div>
  </body>
</html>

Googleマップを表示するためには、Google MapsのWeb APIを利用するためのJavaScriptライブラリを以下のように読み込む必要があります。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

「sensor=true」と付けることで、スマートフォンに搭載されているGPS機能を利用できるようになります。

続いて、地図の中心の地点にマーカーを表示させてみましょう。以下のように変更します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Spotnavi</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(35.669220, 139.761457);
        var myOptions = {
          zoom: 16,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var googlemap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            map: googlemap                    
        });    
      }
    </script>    
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:230px; height:320px;"></div>
  </body>
</html>

これで、地図の中心である銀座付近にマーカーが表示されます。

次は、現在位置に応じて地図の表示を変える対応を行います。現在位置の情報を取得するためには、「GeoLocation API」の機能を利用します。GeoLocation APIとはアプリケーション内で位置情報を取得するための仕様で、具体的な位置情報取得技術を意識することなく位置情報を利用できます。スマートフォンに搭載されているWebブラウザの多くがGeoLocation APIに対応しているので、このAPIを使えば、定期的に位置情報を取得し、その位置情報に応じた表示をするWebアプリケーションを開発できます。それでは、先ほど作成したコードを、以下のように書き換えます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <title>Spotnavi</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        function initialize(){
            if (typeof(navigator.geolocation) != 'undefined') {
                navigator.geolocation.watchPosition(success, error);
            }
        }
        function success(position){
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            
            var msg = document.getElementById("msg");
            msg.innerHTML = "<div>緯度:" + lat + " 経度:" + lng + "</div>" + "<div>" + (new Date()).toString() + "</div>";
            
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 16,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var googlemap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var marker = new google.maps.Marker({
                position: latlng,
                map: googlemap
            });
        }
        function error(e){
            alert("エラーが発生しました - " + e.message);
        }        
    </script>    
  </head>
  <body onload="initialize()">
      <div id="msg"></div>      
    <div id="map_canvas" style="width:230px; height:320px;"></div>
  </body>
</html>

位置情報を継続して監視する「watchPosition」というメソッドを利用しています。このメソッドは、スマートフォンが現在位置の変化を認識するたびに成功の場合のコールバック関数を呼び出します。動作を確認するために、位置情報取得に成功した場合に、現在位置の緯度・経度、現在時刻を表示するようにしました。

<meta name="viewport" content="initial-scale=1.0,user-scalable=no">

また、viewportをこのように指定し、後ほど動作を確認するスマートフォンでの画面ズーム機能をオフにしています。実行すると、以下のような画面が表示されます。