Google Mapの使い方

授業

まずはシンプルな「Static Maps API」。
「URLパラメータ」では、httpsを推奨しているが、
httpのほうが安定しているようで、今回こちらで作成。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Map Test</title>
</head>
<body>
<a href="http://maps.google.com/maps/api/staticmap?center=35.681382,139.766084&zoom=16&size=320x480&maptype=roadmap&sensor=false">マップで見る</a>
<a href="http://maps.google.com/maps/api/staticmap?center=<緯度>,<経度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦幅>&sensor=<ユーザーの位置情報取得センサーの使用の有無>"></a>
</body>
</html>

緯度経度の数値は、今回「Geocoding」で取得。

「Google Maps JavaScript API」でルート検索マップ。
東京・京都間のルート

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ぐーぐるまっぷ・るーと</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
<script type="text/javascript">
	function initialize(position) {
	var latlng = new google.maps.LatLng(35.681382,139.766084);	
	var myOptions = {
		zoom:15,
		center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var rendererOptions = {
		draggable:true,
		preserveViewpoint:false
		};
		var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
		var directionsService = new google.maps.DirectionsService();
		var request = {
			origin:"東京",
			destination:"京都",
			travelMode: google.maps.DirectionsTravelMode.DRIVING,
			unitSystem: google.maps.DirectionsUnitSystem.METRIC,
			optimizeWaypoints:true,
			avoidHighways:false,
			avoidTolls:false
		};
		directionsService.route(request,function(response,status)
		{
			if(status == google.maps.DirectionsStatus.OK)
			{
				directionsDisplay.setDirections(response);
				directionsDisplay.setPanel(document.getElementById("directionsPanel"));
			}
		});
		var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
		directionsDisplay.setMap(map);
	}

</script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
article, section, figure, header, nav { display: block; }
</style>
</head>
<body onLoad="initialize()">
	<div id="map_canvas" style="width:640px; height: 480px;"></div>
<div id="directionsPanel" style="width: 640px; height: 480px;"></div>
</body>
</html>

池袋駅から徒歩ルート

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="initial-scale=1.0,user-scalable=no">
<title>ぐーぐるまっぷ・るーと2</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
<script type="text/javascript">
	var map;
	var directionsDisplay = new google.maps.DirectionsRenderer;
	var directionsService = new google.maps.DirectionsService();
	function initialize() {
	var myOptions = {
		center:new google.maps.LatLng(35.67849, 139.39178),	
		zoom:13,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
	};
	map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
		directionsDisplay.setMap(map);
		calcRoute();
	}
	
	var end = new google.maps.LatLng(35.724442,139.715447);
	function calcRoute()
	{
		var request = {
			origin: "池袋駅",
			destination:end,
			travelMode: google.maps.DirectionsTravelMode.DRIVING,
			optimizeWaypoints:true,
		};
		directionsService.route(request, function(response,status){
			if(status == google.maps.DirectionsStatus.OK){
				directionsDisplay.setDirections(response);
		}
		});
	}
</script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style type="text/css">
html,body {
	margin:0;
	padding:0;
}
div#map_canvas {
	width:330px;
	height:370px;
}
article, section, figure, header, nav { display: block; }
</style>
</head>
<body onLoad="initialize()">
	<div id="map_canvas" style="width:640px; height: 480px;"></div>
</body>
</html>

シンプルな方法で地図載せてみよう。

大きな地図で見る
超シンプル。
やっぱり「iframe」タグを使わないとブログ内に表示とかは難しいかな。