9/5授業(メモ)

  • googlemap
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>google maps</title>
</head>
<body>
<a href="http://maps.google.com/maps/api/staticmap?center=35.801922,139.717583&zoom=16&size=320x480&maptype=roadmap&sensor=false">地図で見る</a>
</body>
</html>

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>google maps api</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja">
</script>

<script type="text/javascript">
function initialize(){
	var latlng = new google.maps.LatLng(40.828713, 140.734682);
	var myOptions = {
		zoom: 15,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new
	google.maps.Map(document.getElementById("map_canvas"),myOptions);
	var marker1 = new google.maps.Marker({
		position: latlng,
		title: "青森駅"
		});
		marker1.setMap(map);
		
		var myLatlng = new google.maps.LatLng(40.828805, 140.736093);
		var marker2 = new google.maps.Marker({position: myLatlng, title: "青森駅・東横イン"
		});
		marker2.setMap(map);
		
		var marker1text = '<span style="color:#000;">青森駅</span>へようこそ。'
		var infowindow1 = new google.maps.InfoWindow({
			content: marker1text,
			maxWidth:200
			});
			google.maps.event.addListener(marker1,'click',function(){infowindow1.open(map,marker1);});
			
			var marker2text = '<span style="color:#000;">青森駅</span>近くの宿です。'
		var infowindow2 = new google.maps.InfoWindow({
			content: marker2text,
			maxWidth:200
			});
			google.maps.event.addListener(marker2,'click',function(){infowindow2.open(map,marker2);});
}
</script>

</head>

<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px;"></div>
</body>
</html>

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>google maps api sdk</title>
</head>

<!-- [if IE] -->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<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.801922, 139.717583);
	var myOptions = {
		zoom: 15,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var rendererOptions=
	{
		draggable: true,
		preserveViewport: 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>

<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height:600px;"></div>
<div id="directionsPanel" style="width:800px; height:600px;"></div>
</body>
</html>