geolocation-api-polyline.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Geolocation API Sample</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map {
  width : 100%;
  height : 300px;
}
</style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery","1.4.2");
google.load("jqueryui", "1.8.2");
google.load("maps","3", {"other_params":"sensor=true"});
</script>
<script type="text/javascript">

$(function(){
  var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(35.68,139.76),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"),myOptions); 
  
  // geolocationオブジェクトを生成
  var geolocation;
  try {
    if(typeof(navigator.geolocation) == 'undefined'){
      geolocation = google.gears.factory.create('beta.geolocation');
    } else {
      geolocation = navigator.geolocation;
    }
  } catch(e) {}
  if (!geolocation) {
    alert('位置情報は利用できません');
    return;
  }

  var watchId;
  var latlngs = [];
  // 位置情報取得に成功したとき呼ばれるcallback関数
  var success = function (position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var latlng = new google.maps.LatLng(lat, lon);
    map.setCenter(latlng);
    if (latlngs.length > 0) {
      var prevLatlng = latlngs[latlngs.length -1];
      var pathLatlng = [prevLatlng, latlng];
      var path = new google.maps.Polyline({
        path: pathLatlng,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      path.setMap(map);
    }
    latlngs.push(latlng);
  } 
  // 位置情報取得に失敗したとき呼ばれるcallback関数
  var error = function (error) {
    var result = $('<tr>' + 
      '<td>' + error.code + '</td>' +
      '<td>' + error.message + '</td>' +
      '</tr>');
    $('#errorresult').append(result);
  }
  // 位置情報取得時に設定するオプション
  var option = {
    enableHighAccuracy: true,
    timeout : 10000, 
    maximumAge: 0
  };  
  // 位置情報取得を開始する関数
  function start() {
    watchId = geolocation.watchPosition(success, error, option);
    $('#controler').attr('value','stop');
  }
  // 位置情報取得を停止する関数
  function stop() {
    geolocation.clearWatch(watchId);
    $('#controler').attr('value','start');
  } 
  // ボタンに開始/停止関数を紐付け 
  $('#controler').toggle(start, stop);
});
</script>
</head>
<body>
<form><input type="button" value="start" id="controler"></form>
<h2>取得成功</h2>
<div id="map"></div>
<h2>取得失敗</h2>
<table id="errorresult">
  <tbody>
  <tr>
    <th>code</th>
    <th>message</th>
  </tr>
  </tbody>
</table>
</body>
</html>