kojilow Blog

Nasunaviのスマートフォンサイトで、Google MAPでお店の場所と現在地からのルートを表示するようなものを作ったのでメモ。

まず、ページにmapを表示させてお店の場所にマーカーを表示。

function initialize(){
	$(‘#pageMap’).live(’pageshow’, function(){
		var map;
		var directionsDisplay = new google.maps.DirectionsRenderer();
		var directionsService = new google.maps.DirectionsService();
		var myLatLng = new google.maps.LatLng(‘お店の緯度’, ‘お店の経度’);
		var myOptions = {
			zoom: 15,
			center: myLatLng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}
		var elem = $(‘#map_canvas’)[0];
		var map = new google.maps.Map(elem, myOptions);
		var createMarker = new google.maps.Marker({
			position: myLatLng,
			map: map
		});
		//クリックで位置情報取得・ルート表示
		$(‘#root’).click(function(){
			myLocation();
		});
	});
}

jQuery Mobile使ってるのでpageshowイベントで発生させてます。
お店の位置情報（緯度経度）はwordpressのカスタムフィールドで持たせたものを渡してます。

ここから本番。
Geolocation APIで位置情報を取得させますが、AndroidブラウザではGoogle Gearsを利用しなければダメみたいなのでgears_init.jsを読み込みます。

function myLocation(){
	var geo = navigator.geolocation || google.gears.factory.create(‘beta.geolocation’);
	if(geo){
		geo.getCurrentPosition(
			function(pos){
				var my_lat = pos.coords.latitude;
				var my_lng = pos.coords.longitude;
				//取得したデータからルート表示を実行
				myRoot(my_lat, my_lng);
			},
			function(){
				alert(‘位置情報を取得できませんでした。’);
			},
			{
				enableHighAccuracy: true
			}
		);
	}
}

Geolocation APIで取得した位置情報をもとに、現在地からお店までのルートを表示します。
今回は運転ルートで指定してます。

function myRoot(my_lat, my_lng){
	directionsDisplay.setMap(map);
	var request = {
		origin: myLatLng,
		destination: my_lat+’,'+my_lng,
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	}
	directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		}
	});
}

上記には記載してませんが位置情報取得中などは$.mobile.pageLoading()でローディング表示したりしてます。
また、ルート検索で表示される緑のマーカーはdirectionsDisplay.setOptionsで消せるので、オリジナルマーカーにもできます。

こんな感じでスマートフォンサイトでお店までのルート検索ができました。