Google Analytics／ウェブマスター ツール／ルート検索マップ

API 授業

Google analytics

コンテンツ→ページ解析
どこがクリックされているのか、動向を確認することができる

SEO対策の話

最終的には、
タイトル、、、本文さえ基本を押さえておくことが一番大事！！！！


ウェブマスター ツール

検索エンジンを呼び込むのに外部リンクが作れない場合に使えるワザ
（はてなブログでは試せず）

  1. 「サイトを追加」ボタンから進む
  2. 管理したいサイトのURLを入力
  3. HTML 確認ファイルが出来上がるので、設定したサイトにアップする（indexと同じ階層）
  4. アップロードが確認できたら「確認」ボタンをクリックして完了

Google Maps JavaScript API

ルート検索マップ

エッフェル塔→モンサンミシェルまで

<!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 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(48.858278,2.294254); 
	
	//地図必須プロパティを設定
	var myOptions = {
		
		//ズームレベルの指定　0〜17
		zoom: 15,
		
		//地図の中心を指定
		center: latlng,
		
		//地図タイプ
		//ROADMAP:デフォルト、SATELLLITE：写真タイル、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,
		avoidTolls: false
	};
	directionsService.route(request, function(response,status)
	{
		if (status == google.maps.DirectionsStatus.OK)
		{
			directionsDisplay.setDirections(response);
		}	 
 });
 
 //<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>

</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 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(48.858278,2.294254); 
	
	//地図必須プロパティを設定
	var myOptions = {
		
		//ズームレベルの指定　0〜17
		zoom: 15,
		
		//地図の中心を指定
		center: latlng,
		
		//地図タイプ
		//ROADMAP:デフォルト、SATELLLITE：写真タイル、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,
		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>

お役立ちツール