GoogleAPI 位置情報・GoogleMap利用
GoogleAPI
位置取得
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>
