W3C Geolocation Standardを利用する

HTML5の一部として定義されているW3C Geolocation Standard(参考:Geolocation API Specification)をGoogle Maps APIで利用する方法を紹介します。

サンプル

以下のサンプルはGoogle MAPS APIを使ったページのソースです。 navigator.geolocation.getCurrentPositionを利用します。

解説はソース内部に記述しています。


<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map { height: 100% }
    </style>

    <script src="http://maps.google.com/maps/api/js?v=3&sensor=true"
        type="text/javascript" charset="UTF-8"></script>

    <script type="text/javascript">
    //<![CDATA[

    var map;
    var infowindow = new google.maps.InfoWindow();

    // 初期化。bodyのonloadでinit()を指定することで呼び出してます
    function init() {

      // Google Mapで利用する初期設定用の変数
      var latlng = new google.maps.LatLng(39, 138);
      var opts = {
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: latlng
      };

      // getElementById("map")の"map"は、body内の<div id="map">より
      map = new google.maps.Map(document.getElementById("map"), opts);

      // W3C Geolocationを使う
     if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(handleGeolocation,
                                                 handleNoGeolocation);

      } else {
        alert("W3C Geolocationがありません");
      }
    }

    // getCurrentPositionで行われる処理を記述
    function handleGeolocation(position) {

      // 位置情報を取得
      var latlng = new google.maps.LatLng(position.coords.latitude,
                                      position.coords.longitude);

      // ふきだしで表示する文字列を設定
      var str = "W3C Geolocationを利用して取得した位置情報";

      showInfoWindow(latlng, str);
    }

    // ふきだしの位置と中身を設定
    function showInfoWindow(latlng, str) {
      // 地図の中心位置を設定
      map.setCenter(latlng);

      // ふきだしの中身と位置を設定
      infowindow.setContent(str);
      infowindow.setPosition(latlng);
      infowindow.open(map);
    }


    // エラーの内容を表示。getCurrentPosition失敗時に呼び出されます
    function handleNoGeolocation(err) {
      var errCodeStr;

      // エラー内容を示す文字列を用意。
      // エラーコード解説用なので必ずしも必要ではありません。
      if (err.code == 0) {
        errCodeStr = "UNKNOWN_ERROR";
      } else if (err.code == 1) {
        errCodeStr = "PERMISSION_DENIED";
      } else if (err.code == 2) {
        errCodeStr = "POSITION_UNAVAILABLE";
      } else if (err.code == 3) {
        errCodeStr = "TIMEOUT";
      } else {
        errCodeStr = "想定外";
      }

      var errStr = "失敗 [" + err.code + "] " + errCodeStr;

      // 失敗内容をふきだしで表示。位置はいい加減。
      showInfoWindow(new google.maps.LatLng(37, 143), errStr);
    }

    //]]>
    </script>
  </head>

  <body onload="init()">
    <div id="map" style="width:100%; height:100%"></div>
  </body>

</html>


注意点としては、位置情報を取得するためにセンサーの値を「sensor=true」としなければならない点が挙げられます。


<script src="http://maps.google.com/maps/api/js?v=3&sensor=true">

表示例

表示例です。 実行時にブラウザから位置情報提供の許可を求められます。 許可もしくは拒否(ブロック)をすると、ふきだしが表示されます。