HTML5のGeolocationを試してみる。

HTML5のGeolocationでは、ネットワークの情報から現在位置を調べることができるとか。
いろいろ機能が増えてて面白いなぁ、ということで早速デモを作成。
Geolocationで現在位置を取得して、GoogleMapsに表示するだけの簡単デモです。

デモ

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0"/>
<title>Geolocation|HTML5サンプル|Yellow-Sunset</title>
<style>
body{
	margin:0px;
	padding:0px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
<script>
//Geolocationを使用可能な場合
if(navigator.geolocation){
	//ここで実際に位置を取得
	navigator.geolocation.watchPosition(
	//取得成功時のメソッド
	function(position){
		var lat = position.coords.latitude;
		var lng = position.coords.longitude;
		setMap(lat, lng);
	},
	//取得失敗時のメソッド
	function(){
		alert("Location取得失敗");
	}
	);
}else{ //Geolocationが使用不可能な場合
	alert("Geo Location APIに対応していません");
}

//GoogleMapsに表示するメソッド
function setMap(_lat, _lng){
    var latlng = new google.maps.LatLng(_lat, _lng);
    var myOptions = {
      zoom: 18,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }</script>
</body>
</html>

ちなみに実際に位置を取得するところは、watchPositionを使ってるけど、1回だけ取得するならgetCurrentPositionでいいみたい。

全然別の問題だろうけど、HTML5のDOCTYPEを宣言するとGoogleMapsが表示されない。
なんでだろう?

今度調べてみたいと思います。