yamabu’s diary

１・２ヶ月で？グーグルサービスを・・・する

観光ガイド見るの？グーグルマップあるのに？その５

前回買い物マップ編最終回を目指しておきながら、途中でお腹が空いて投げ出した。今回こそしめたい。

前回記事を書いていて出てきた、秋葉原駅から出発して、端の方のパーツ街で売っている特価品を買いに行く、と言う良い例を取り上げてみる。えっ？なに？パーツ街なんて知ってるし、お店の場所もだいたい分かるって？はいはいよく聞こえません。じゃあそれ駅で溢れてる人達に説明してみてよ。想像しただけで面倒でしょ？それに、駅の周りで今日どこいこっかーてへぺろ的雰囲気だしてる人たくさんいるけど、その人たちパーツ街みたいな小売店でほとんど見ないじゃん。アキバで買い物するのに一番大事な部分を見ないまま帰ってるよきっと。お店にとってもお客さんにとっても損じゃない？これ口頭説明したら多分嫌な顔されるけど、グーグルマップで表示したらふーんで済むと思う。そうグーグルならね。

実装結果を下に示す。
f:id:gichan:20140803163202p:plain
簡単に実装できた。前回のコードでJavascriptコード部に10行程度追加しただけ。簡単でイイじゃないか。コードは終わりに示す。

これで、観光ガイド風お買い物マップ向け最小機能が実現できた。うーんまだやる事あるから、しめられませんでしたっ。次回は、表示画面の最終デザインと、未実装の機能用件を振り返り、お買い物マップ編をしめくくる予定。

<!DOCTYPE html> 
<html>
  <head>
    <title>買い物スポット</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 95%;
        width: 90%; 
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script>
    var directionsDisplay = new google.maps.DirectionsRenderer();
	var directionsService = new google.maps.DirectionsService();
	var map;

	function initialize() {
		directionsDisplay = new google.maps.DirectionsRenderer();
		var mapOptions = {
 	   		zoom: 16,
   			center: new google.maps.LatLng(35.699712, 139.771353),
    		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
  		map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  		directionsDisplay.setMap(map);
		
		/* Point1 あき◯お〜店 */
		var myPoint1=new google.maps.LatLng(35.700200, 139.770300);
		var contentString1="<dl id='infowin1'><dt><b>あき◯お〜◯店</b></dt><dd><img src='animal_kowai_kuma.png' align='left' />◯月×日　商品A　価格△△円 </dd><dd>記事へのリンク</dd></dl>";
		var infowindow1=new google.maps.InfoWindow({
			content: contentString1
		});
		var marker1=new google.maps.Marker({
			position: myPoint1,
			map: map,
			title:"あき◯お〜店"
		});
		infowindow1.open(map,marker1);
		
		/* Point2... */
		var myPoint2=new google.maps.LatLng(35.702590, 139.770501);
		var contentString2="<dl id='infowin1'><dt><b>Q◯P◯SS店</b></dt><dd><img src='ryouri_kuma.png' align='left' />◯月×日　商品B　価格××円 </dd><dd>記事へのリンク</dd></dl>";
		var infowindow2=new google.maps.InfoWindow({
			content: contentString2
		});
		var marker2=new google.maps.Marker({
			position: myPoint2,
			map: map,
			title:"Q◯P◯SS店"
		});
		infowindow2.open(map,marker2);
		
		calcRoute();
	}
	
	function calcRoute() {
  		var start = new google.maps.LatLng(35.698343, 139.773033);
  		var end = new google.maps.LatLng(35.702590, 139.770501);
  		var request = {
      		origin: start,
      		destination:end,
      		travelMode: google.maps.TravelMode.WALKING
  		};
  		directionsService.route(request, function(response, status) {
    		if (status == google.maps.DirectionsStatus.OK) {
     		 directionsDisplay.setDirections(response);
    		}else{
				alert("ルート検索に失敗しました");
			}
  		});
	}
	
	google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>