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