libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

Geolocation APIを利用する (4/4)

作成:2011-10-17 09:41
更新:2011-10-17 09:41

■Googleマップと連携する

GPSが使える！となれば、誰もがまず思い浮かぶのは「Googleマップとの連携」でしょう。では、実際にGPSから現在位置を取得し、Googleマップに表示するサンプルを挙げておきましょう。

ここでは、ざっと全体の流れを説明しておきます。まず、ページにアクセスしたら、doActionでGPSアクセスを開始します。そして、成功時のコールバック関数getPosition内で、緯度と経度の値を取り出したら、それらを引数に指定してinitMap関数を呼び出します。

このinitMapで、マップの作成と設定を行なっています。まず、位置の値を元にLatLngオブジェクトを作成します。
var latlng = new google.maps.LatLng(lat,lng);
続いて、マップの作成です。あらかじめ表示設定を連想配列としてまとめておき、それを元にしてgoogle.maps.Mapオブジェクトを作成します。
var options = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(element,options);
続いて、現在地点にマーカーを作成します。これも、あらかじめ表示に関する設定情報を連想配列にまとめておき、google.maps.Markerオブジェクトを作成します。
var options = {
    position: latlng,
    map: map,
    title: "現在位置"
};
var marker = new google.maps.Marker(options);
そして、情報ウインドウの作成と表示です。やはり表示メッセージなどの情報を連想配列にまとめ、google.maps.InfoWindowを作成します。そして、openを呼び出してウインドウを画面に表示させておきます。
var info_opt = { content: "現在位置！" };
var info = new google.maps.InfoWindow(info_opt);
info.open(map,marker);
ざっと「マップ」「マーカー」「情報ウインドウ」の３大要素を作成してみました。watchPositionを使えば、移動中に現在地点をマーカーでどんどんマップに追加する、というようなサンプルも作れそうですね。いろいろと応用ができそうです。

※GoogleマップのAPIについては、以下に説明してありますのでこちらを参照ください。

http://libro.tuyano.com/index3?id=84001

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type"
		content="text/html; charset=utf-8">
	<title>Test</title>
	<style>
	body { padding:5px; }
	h1 { font-size:18pt; background-color:#EEEEFF; }
	</style>
	<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
	<script type="text/javascript">
	<!--
	var counter = 0;
	var gps_id = 0;

	function doAction(){
		var opt = { 
			enableHighAccuracy:true, 
			timeout: 3000
		};
		navigator.geolocation.getCurrentPosition(getPosition,error,opt);
	}

	function getPosition(p){
		var lat = p.coords.latitude;
		var lng = p.coords.longitude;
		initMap(lat,lng);
	}
	
	function error(err){
		alert("ERROR(" + err.code + ")\n" + err.message);
	}

	function initMap(lat,lng){
		var element = document.getElementById("map");
		var latlng = new google.maps.LatLng(lat,lng);
		// マップ作成
		var options = {
		zoom: 12,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(element,options);
		// マーカー作成
		var options = {
			position: latlng,
			map: map,
			title: "現在位置"
		};
		var marker = new google.maps.Marker(options);
		var info_opt = { content: "現在位置！" };
		var info = new google.maps.InfoWindow(info_opt);
		info.open(map,marker);
	}
	// -->
	</script>
	</head>
	<body onload="doAction();">
		<h1>GPS Sample</h1>
		<div id="map" style="width:400px; height:400px;"></div>
		
	</body>
</html>
※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る