Google Maps API

授業

Static Maps API

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Google Map Test</title>
</head>

<body>
<a href="http://maps.google.com/maps/api/staticmap?center=35.724943,139.719913&zoom=16&size=500x500&maptype=roadmap&sensor=false">マップで見る</a>
</body>
</html>

Maps JavaScript API

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Google Map API</title>
<!--[1]Google Map APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!--[2]どんな地図を描くかのメイン-->
<script>
//地図を初期化し表示
function initialize() {
	
	//地図を表示する緯度経度を指定する
	var latlng = new google.maps.LatLng(35.724943, 139.719913);
	//地図必須プロパティを設定
	var myOptions = {
	
	//ズームレベルの指定0〜17
	zoom: 13,
	
	//地図の中心を指定（上記で設定の緯度経度latlng）	
	center: latlng,
	
	//地図のタイプ設定
	// ROADMAP: デフォルト、SATELLITE: 写真タイル、 HYBRID: 写真タイルと主要な機能、 TERRAIN: 物理的な起伏を示すタイル
	mapTypeId: google.maps.MapTypeId.ROADMAP
	
	};//地図プロパティここまで
	
	//<div id="map_canvas">と結びつけて、その領域に地図を描く
	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(35.718278,139.705824);
	var marker2 = new google.maps.Marker({
		position: myLatlng,
		title:"切手の博物館"
	});
	marker2.setMap(map);
	
	//マーカーをクリックしたら、情報ウィンドウを表示
	var marker1text = 'ここは<span style="color:#0066cc;">南池袋</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:#0066cc;">切手の博物館</span>です'
	var infowindow2 = new google.maps.InfoWindow({
		content: marker2text,
		maxWidth:200
	});
	google.maps.event.addListener(marker2, 'click', function() {
		infowindow2.open(map, marker2);
	})
	
}//initialize()
	
</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>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[１]Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!--[2]どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

//地図初期化し表示
function initialize(position) {

  //地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(35.728926,139.71038);
  
  //地図必須プロパティを設定
  var myOptions = {
    
    //ズームレベルの指定 0〜17
    zoom: 15,
    
    //地図の中心を指定（上記で設定の緯度経度latlng）
    center: latlng,
    
    //地図のタイプ設定
    //ROADMAP：デフォルト、SATELLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル
    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"));
        }
    });
  
  //<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  //ルート検索地図に表示する
  directionsDisplay.setMap(map);
  
}//initialize() 
</script>

</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="viewport" content="initial-scale=1.0, user-scalable=no">
<title>ルートマップ</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
  }
  div#map_canvas {
    width: 500px;
    height: 500px;
  }	
</style>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
  var map;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService();
  function initialize() {
    var myOptions = {
      center:new google.maps.LatLng(35.728926,139.71038),
      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>
</head>
<body onload="initialize();">
<div id="map_canvas" style="width: 500px; height: 500px;"></div>
</body>
</html>