読者です 読者をやめる 読者になる 読者になる

ゆとり世代プログラマの備忘録

ゆとり世代プログラマが備忘録を書いていく

Geolocatoion APIで現在地を取得しGoogleマップに表示する方法

JavaScript API

JavaScript で Geolocatoion APIを使用して現在地の緯度、経度を取得しGoogleマップに表示するまでをまとめておく。

実際に動いているのはこちら

http://ec2-54-191-139-159.us-west-2.compute.amazonaws.com:8080/forBlog/20160111/

位置情報を取得 ボタンを押し、位置情報の取得を許可すればマップが表示されるはず。

Macsafariでは以下の手順で位置情報の取得を許可しないと現在地を取得できないっぽい。 OS X と Safari の位置情報サービスについて - Apple サポート

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Geolocation API テスト</title>
    <script src="http://maps.google.com/maps/api/js"></script>
    <script src="./js/app.js"></script>
   <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
   <p>
      <button id="get_position_button">位置情報取得</button>
    </p>
    <ul>
      <li><span id="latitude"></span></li>
      <li><span id="longitude"></span></li>
      <li><span id="altitude"></span></li>
      <li><span id="accuracy"></span></li>
      <li><span id="altitudeAccuracy"></span></li>
      <li><span id="heading"></span></li>
      <li><span id="speed"></span></li>
      <li><span id="timestamp"></span></li>
    </ul>
    <!-- Google マップ 表示領域 -->
    <div id="map">
    </div>
  </body>
</html>

5行目でGoogle Maps API を使用するためのライブラリを読み込んでいる。

次にCSS Googleマップを表示する領域の縦幅と横幅を指定しているだけ。

#map {
    height: 600px;
    width: 600px;
}

最後にJavaScript

(function () {
    'use strict';
    var successCallBackFunction, errorCallBackFunction, option;

    /**
    * 測位成功時のコールバック関数
    */
    successCallBackFunction = function (position) {
        var myPosition, map, marker;

        myPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            center: myPosition,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        marker = new google.maps.Marker({
            position: myPosition,
            map: map
        });

        document.getElementById('latitude').textContent = ('緯度: ' + position.coords.latitude);
        document.getElementById('longitude').textContent = ('経度: ' + position.coords.longitude);
        document.getElementById('altitude').textContent = ('高度: ' + position.coords.altitude);
        document.getElementById('accuracy').textContent = ('緯度/高度の精度: ' + position.coords.accuracy);
        document.getElementById('altitudeAccuracy').textContent = ('高度の精度: ' + position.coords.altitudeAccuracy);
        document.getElementById('heading').textContent = ('方角: ' + position.coords.heading);
        document.getElementById('speed').textContent = ('速度: ' + position.coords.speed);
        document.getElementById('timestamp').textContent = ('測位が成功した時刻: ' + position.timestamp);
    };


    /**
    * 位置情報取得失敗時のコールバック関数
    */
    errorCallBackFunction = function (positionError) {

        alert(positionError.code + ': ' + positionError.message);
    };


    option = {
        enableHighAccuracy: true, // GPS を使用して正確さを増すかどうか true: GPSを使用する false: GPSを使用しない
        maximumAge: 0, // キャッシュを保持するミリ秒
        timeout: 30000 // タイムアウトミリ秒 指定した時間内にデータを取得できない場合タイムアウトエラーを発生させる
    };


    /**
    * HTML読み込み終了時の処理
    */
    window.addEventListener('load', function () {

        // Geolocation API 使用可/不可 のチェック
        if (!navigator.geolocation) {
            alert('Geolocation API 使用不可');
            return;
        }

        document.getElementById('get_position_button').addEventListener('click', function () {

            navigator.geolocation.getCurrentPosition(successCallBackFunction, errorCallBackFunction, option);
        }, false);
    }, false);
}());

以下の部分でボタンを押した際の処理を定義している、

       document.getElementById('get_position_button').addEventListener('click', function () {

            navigator.geolocation.getCurrentPosition(successCallBackFunction, errorCallBackFunction, option);
        }, false);

navigator.geolocation.getCurrentPosition() が現在地を取得するメソッド。 ちなみに、一定間隔おきに現在地を取得するメソッドは watchPosition() メソッド

引数では、左から順番に、現在地の測定成功時のコールバック関数、エラー時のコールバック関数、オプションを渡している。

コールバック関数(ここでは successCallBackFunction )内で Google Map API を使用してマップを表示したり、各DOMに緯度 経度などを表示している。