スポンサードリンク

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

リアルタイムの交通渋滞情報を 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

スポンサードリンク

Related Posts

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="">