スポンサードリンク

交通渋滞情報レイヤーと交通情報ImageMapType

Posted by 管理人 on 2011年7月30日 Leave a comment (2) Go to comments

リアルタイムの交通渋滞情報を Google Maps API では TrafficLayer を使用して地図に取り込むことができます。いくつか方法があるようです。

◆その1

 簡単な方法としては、「交通レイヤー」を使います。既にあるソースのmap = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); の下に、下記scriptを記述すればOKです。

Google先生のこのページに「Google Maps JavaScript API V3 オーバーレイ」についての説明があります。

<script type="text/javascript">
　//◆個別に指定する初期表示の設定
    var center = new google.maps.LatLng(25.03926, 121.50639);
    var zoom = 12;

    var mapTypeId = google.maps.MapTypeId.ROADMAP //通常のデフォルト
    //var mapTypeId = google.maps.MapTypeId.SATELLITE //航空写真タイル
    //var mapTypeId = google.maps.MapTypeId.HYBRID //航空写真タイルと主要な機能（道路、地名）のタイル レイヤの組み合わせ
    //var mapTypeId = google.maps.MapTypeId.TERRAIN //起伏を示すタイル（高度や水系）
</script>
<script type="text/javascript"> 
//<![CDATA[    
var map;
function initialize() 
{
	var myOptions = 
	{

		disableDefaultUI: false,//◆API のデフォルトの UI 設定をオフ(無効)にしたい場合は”true”

		//◆ナビゲーションコントロール
		navigationControl: true,
		navigationControlOptions: 
		{
　　　　　　　　//◆通常 ズームコントロール
		style: google.maps.NavigationControlStyle.DEFAULT,
		position: google.maps.ControlPosition.LEFT_TOP
		},
		//◆マップタイプコントロール
		mapTypeControl: true,
		mapTypeControlOptions: 
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		position: google.maps.ControlPosition.TOP_RIGHT
		},
		//◆スケールコントロール
		scaleControl: true,
		scaleControlOptions: 
		{
		position: google.maps.ControlPosition.TOP_CENTER
		},
	center: center,
	zoom: zoom,
	mapTypeId: mapTypeId
	};

　　　　map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

 var trafficLayer = new google.maps.TrafficLayer();
 trafficLayer.setMap(map);

} 
window.onload=initialize;
//]]>
</script>

  交通渋滞情報レイヤーサンプル地図（1）・・・レイヤーを使用

 

 ◆その2

つぎの方法は、Google’s traffic tiles（トラフィックタイル）を使用して、ImageMapType （イメージマップタイプ）を使います。 Google先生の「Google Maps Javascript API V3 Map Types」のページに「ImageMapType」の説明があります。私の標準マップのソースに下記を追加記述すればOKです。 このクラス(ImageMapTypeのクラス)は、tileSizeとgetTileUrlの定義が必要なImageMapTypeOptionsオブジェクトを使用するとあります。ImageMapTypeOptions オブジェクトの仕様は、コチラ。

その1の交通レイヤーを使った方が表示は速いです。

 

<script type="text/javascript">
　//◆個別に指定する初期表示の設定
    var center = new google.maps.LatLng(37.76, -122.45);
    var zoom = 12;

    var mapTypeId = google.maps.MapTypeId.ROADMAP //通常のデフォルト
    //var mapTypeId = google.maps.MapTypeId.SATELLITE //航空写真タイル
    //var mapTypeId = google.maps.MapTypeId.HYBRID //航空写真タイルと主要な機能（道路、地名）のタイル レイヤの組み合わせ
    //var mapTypeId = google.maps.MapTypeId.TERRAIN //起伏を示すタイル（高度や水系）
</script>
<script type="text/javascript"> 
//<![CDATA[    
var map;

var trafficOptions = 
{
 getTileUrl: function(coord, zoom) 
 {
 return "http://mt3.google.com/mapstt?" + "zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&client=api";
 },
 tileSize: new google.maps.Size(256, 256),
 isPng: true
 };

 var trafficMapType = new google.maps.ImageMapType(trafficOptions);

function initialize() 
{
	var myOptions = 
	{

		disableDefaultUI: false,//◆API のデフォルトの UI 設定をオフ(無効)にしたい場合は”true”

		//◆ナビゲーションコントロール
		navigationControl: true,
		navigationControlOptions: 
		{
　　　　　　　　//◆通常 ズームコントロール
		style: google.maps.NavigationControlStyle.DEFAULT,
		position: google.maps.ControlPosition.LEFT_TOP
		},
		//◆マップタイプコントロール
		mapTypeControl: true,
		mapTypeControlOptions: 
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		position: google.maps.ControlPosition.TOP_RIGHT
		},
		//◆スケールコントロール
		scaleControl: true,
		scaleControlOptions: 
		{
		position: google.maps.ControlPosition.TOP_CENTER
		},
	center: center,
	zoom: zoom,
	mapTypeId: mapTypeId
	};

　　　　map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

 map.overlayMapTypes.insertAt(0, trafficMapType);

} 
window.onload=initialize;
//]]>
</script>

 交通渋滞情報ImageMapサンプル地図（2）・・・・・ImageMaptypeを使用

なお、ImageMapTypeを使ってGoogle Street View（グーグルストリートビュー）の青い道路を表示する方法はコチラ。

 

 ◆交通情報を表示させるON/OFFボタンを追加する

通所、交通情報が地図に表示されていると邪魔ですので、必要なときに地図に表示できるようにボタンを追加しておきます。

上記、その1　 交通渋滞情報レイヤーサンプル地図（1）を変更します。朱書き部。

<script type="text/javascript">
　//◆個別に指定する初期表示の設定
    var center = new google.maps.LatLng(35.719758,139.312134);
    var zoom = 12;

    var mapTypeId = google.maps.MapTypeId.ROADMAP //通常のデフォルト
    //var mapTypeId = google.maps.MapTypeId.SATELLITE //航空写真タイル
    //var mapTypeId = google.maps.MapTypeId.HYBRID //航空写真タイルと主要な機能（道路、地名）のタイル レイヤの組み合わせ
    //var mapTypeId = google.maps.MapTypeId.TERRAIN //起伏を示すタイル（高度や水系）
</script>
<script type="text/javascript"> 
//<![CDATA[    
 var map, trafficLayer;
function initialize() 
{
	var myOptions = 
	{
                    
		disableDefaultUI: false,//◆API のデフォルトの UI 設定をオフ(無効)にしたい場合は”true”

		//◆ナビゲーションコントロール
		navigationControl: true,
		navigationControlOptions: 
		{
　　　　　　　　//◆通常 ズームコントロール
		style: google.maps.NavigationControlStyle.DEFAULT,
		position: google.maps.ControlPosition.LEFT_TOP
		},
		//◆マップタイプコントロール
		mapTypeControl: true,
		mapTypeControlOptions: 
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		position: google.maps.ControlPosition.TOP_RIGHT
		},
		//◆スケールコントロール
		scaleControl: true,
		scaleControlOptions: 
		{
		position: google.maps.ControlPosition.TOP_CENTER
		},
	center: center,
	zoom: zoom,
	mapTypeId: mapTypeId
	};

　　　　map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

 trafficinfo()
} 

function trafficinfo() 
{
 trafficLayer = new google.maps.TrafficLayer();
 trafficLayer.setMap(map);
 trafficLayer.setMap(trafficLayer.getMap() ? null : map);
}

function toggletraffic() 
{
 trafficLayer.setMap(trafficLayer.getMap() ? null : map);
}

window.onload=initialize;
//]]>
</script>

 

コピペ用

<script type="text/javascript">
　//◆個別に指定する初期表示の設定
    var center = new google.maps.LatLng(35.719758,139.312134);
    var zoom = 12;

    var mapTypeId = google.maps.MapTypeId.ROADMAP //通常のデフォルト
    //var mapTypeId = google.maps.MapTypeId.SATELLITE //航空写真タイル
    //var mapTypeId = google.maps.MapTypeId.HYBRID //航空写真タイルと主要な機能（道路、地名）のタイル レイヤの組み合わせ
    //var mapTypeId = google.maps.MapTypeId.TERRAIN //起伏を示すタイル（高度や水系）
</script>
<script type="text/javascript"> 
//<![CDATA[    
 var map, trafficLayer;
function initialize() 
{
	var myOptions = 
	{                   
		disableDefaultUI: false,//◆API のデフォルトの UI 設定をオフ(無効)にしたい場合は”true”

		//◆ナビゲーションコントロール
		navigationControl: true,
		navigationControlOptions: 
		{
　　　　　　　　//◆通常 ズームコントロール
		style: google.maps.NavigationControlStyle.DEFAULT,
		position: google.maps.ControlPosition.LEFT_TOP
		},
		//◆マップタイプコントロール
		mapTypeControl: true,
		mapTypeControlOptions: 
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		position: google.maps.ControlPosition.TOP_RIGHT
		},
		//◆スケールコントロール
		scaleControl: true,
		scaleControlOptions: 
		{
		position: google.maps.ControlPosition.TOP_CENTER
		},
	center: center,
	zoom: zoom,
	mapTypeId: mapTypeId
	};

　　　　map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

	trafficinfo()
} 

function trafficinfo() 
{
	trafficLayer = new google.maps.TrafficLayer();
	trafficLayer.setMap(map);
	trafficLayer.setMap(trafficLayer.getMap() ? null : map);
}

function toggletraffic() 
{
	trafficLayer.setMap(trafficLayer.getMap() ? null : map);
}

window.onload=initialize;
//]]>
</script>

 

 <body内>

ON/OFF用のトグルボタンを追加

　<div>
　<button onclick="toggletraffic()">交通情報を表示</button>
　</div>

　<div id="map_canvas">
　</div>

 

 完成したサンプル地図：　リアルタイムの交通渋滞情報を表示させる「ON/OFFボタン」を配置

 

 ◆Google Maps JavaScript API V3　サービスエリア

  • 現在交通情報がサポートされているエリア・都市は、コチラ。

◆Google Maps JavaScript API V3

関連記事一覧

スポンサードリンク

関連記事一覧

  1. Googel Maps API + Traffic Layer（交通渋滞情報レイヤー） +ON/OFFボタン ／JQtouch
  2. ストリートビューの青い道路を常に表示させるオーバーレイヤーに変わるImageMapType
  3. ナビゲーションコントロール、マップタイプコントロール、距離スケールコントロールを表示する標準マップ
  4. WordPressの記事内にGoogle Mapを表示する（復習）
  5. 地図をクリックして、マーカー（アイコン）を追加／全てのマーカー（アイコン）を一括で削除する方法
Related Posts
Google, Google Maps API v3, タイル・オーバーレイ・イメージ, , , , , ,

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

Trackbacks and Pingbacks: