GoogleAPI 位置情報・GoogleMap利用

GoogleAPI

位置取得

//getCurrentPosition(成功時コールバック関数)
navigator.geolocation.getCurrentPosition(
  function(pos){
    "緯度:" + pos.coords.latitude + " , " +
    "経度:" + pos.coords.longitude);
  }
);

//getCurrentPosition(①成功時コールバック関数, ②失敗時コールバック関数, ③オプション)

//①位置取得成功時のコールバック関数
function successCallback(pos) {
  window.alert(
    "緯度:" + pos.coords.latitude + " , " +
    "経度:" + pos.coords.longitude);
}

//②位置取得失敗時のコールバック関数
function errorCallback(positionError){
  window.alert(positionError.code + "," + positionError.message);
}

//③位置取得オプション(geolocation.getCurrentPosition()の引数)
var positionOption = {
  enableHighAccuracy: true,
  timeout: 60000,
  maximumAge: 0
};

//実行(①②③)
navigator.geolocation.getCurrentPosition(
  successCallback,
  errorCallback,
  positionOption);

→結果(=successCallbackの実行結果)
緯度:35.751165 , 経度:139.70924399999998

位置監視

//位置監視開始
var watchId = navigator.geolocation.watchPosition(
  successCallback,
  errorCallback,
  positionOption);

//位置監視終了
navigator.geolocation.clearWatch(watchId);

→結果(=successCallbackの実行結果)
緯度:35.751165 , 経度:139.70924399999998

GoogleMap表示




<head>
  <!—GoogleMapsAPI読込—>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true">
  </script>
</head>

<!–地図(html)–>
<div id="map" style="width: 320px; height: 240px;"></div>

<script type="text/javascript">

  //地図オプション
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(35,135),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  //地図の作成(html上のmapを指定)
  var map = new google.maps.Map(
    document.getElementById("map"),
    mapOptions);
    
  //マーカーオプション
  var markerOptions = {
    position: new google.maps.LatLng(35,135),
    map: map
  };
  
  //マーカー作成
  var marker = new google.maps.Marker(markerOptions);
</script>

カテゴリーAPI