Geolocation

グーグルマップのAPIキー取得してないので動かない。

by yshrkn

HTML

<div id="latitude"></div>
<div id="longitude"></div>
<div id="map_canvas" sty;e="width: 500px; height: 300px;"></div>

JavaScript

// 現在地取得
function getCurrentPos() { 
  window.navigator.geolocation.getCurrentPosition(success, err, {
    enableHighAccuracy: true,
    maximumAge: 0,
    timeout: 1000,
  });
}

// 取得成功時の処理
function success(pos) { 
  // 緯度取得
  var currentLatitude = pos.coords.latitude;

  // 経度取得
  var currentLongitude = pos.coords.longitude;

  // マップに表示
  showGeolocationMap(currentLatitude, currentLongitude);
}

// 現在位置をマップに表示
function showGeolocationMap(latitude, longitude) { 
  document.getElementById("latitude").innerHTML = latitude;
  document.getElementById("longitude").innerHTML = longitude;

  // googlaMapに表示
  var pos = new google.maps.LatLng(latitude, longitude);
  var options = {
    zoom: 14,
    center: pos,
    scrollWheel: false,
    mapTypeId: google.maps.Map(document.getElementById("map_canvas"), options);
  }; 
}

// 失敗時の処理
function err(e) { 
  // エラー処理
}

window.onload = function () { 
  getCurrentPosition();
}