スポンサードリンク

Googel Maps API + Traffic Layer（交通渋滞情報レイヤー） +ON/OFFボタン ／JQtouch

Posted by 管理人 on 2012年5月5日 Leave a comment (0) Go to comments

Google Mapに表示することの出来る交通渋滞情報が思っていたよりも便利。Traffic Layer（交通渋滞情報レイヤー） をiPhone（スマートフォン用端末）地図に追加してみます。

出来れば、iPhone（スマートフォン端末）の画面をタップしたら表示/非表示を繰り返すことが出来るような手軽なものに。

1.画面タップ用のボタン

 

 

 

jQtouchのボタンの中からclass=”whiteButton”を選択。
これを狭い画面でも邪魔にならないように半透明で設置します（参照記事：全てのブラウザに対応したcssスタイルシートの透明、半透明の背景設定を記述する）。
次に、画面タップを受け付けるようにonclickイベント処理を割り当てます。

<a href="#" class="whiteButton" onclick="toggletraffic()" style="background-color:transparent;filter:alpha(opacity=65);-moz-opacity:0.6;opacity:0.6;"></a>

 

2.ベースの地図を選択

前回ｊQtouch用に現在の位置座標を収得するデモ（watchPosition/clearWatch）を作ってあるので、これにTraffic Layer関係のソースを追加変更していきます（朱書き部）。

 

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Google Map Traffic Layer Demo for Smartphone/iPhone</title>
        <style type="text/css" media="screen">@import "../../themes/css/jqtouch.css";</style>
        <script src="../../src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
        <!--ここからGoogle Maps API v3 -->
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'jqtouch.png',
                addGlossToIcon: false,
                startupScreen: 'jqt_startup.png',
                statusBar: 'black'
            });
        </script>

<link rel="stylesheet" href="http://waox.main.jp/iPhonemap2/css/iPhone-map.css" type="text/css" />

<script type="text/javascript">
//◆個別に指定する初期表示の設定
    var zoom = 12;
    var mapTypeId = google.maps.MapTypeId.ROADMAP 
</script>

<script type="text/javascript">
//<![CDATA[
var watchId=0;
var initialLocation;
var tokyo = new google.maps.LatLng(35.68971, 139.69168);
var browserSupportFlag =  new Boolean();
var map, trafficLayer;
var infowindow = new google.maps.InfoWindow();
var geowindow = new google.maps.InfoWindow();
var position;
var ini;

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

	//◆ナビゲーションコントロール
	navigationControl: true,
		navigationControlOptions:
		{

		//◆通常 ズームコントロール
		//style: google.maps.NavigationControlStyle.DEFAULT,
		style: google.maps.NavigationControlStyle.SMALL,
		position: google.maps.ControlPosition.LEFT_TOP

		//◆Android ズームコントロール
		//style:google.maps.NavigationControlStyle.ANDROID,
		//position: google.maps.ControlPosition.BOTTOM_CENTER
		},

		//◆マップタイプコントロール
		mapTypeControl: true,
		mapTypeControlOptions:
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		//style: google.maps.MapTypeControlStyle.DEFAULT,
		//style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
		position: google.maps.ControlPosition.TOP_RIGHT
		},

		//◆スケールコントロール
		scaleControl: true,
		scaleControlOptions:
		{
		//◆指定無しの場合左下になる
		//position: google.maps.ControlPosition.RIGHT_TOP
		//position: google.maps.ControlPosition.TOP_CENTER
		//position: google.maps.ControlPosition.BOTTOM_CENTER
		},

		zoom: zoom,
		mapTypeId: mapTypeId
	};

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	startLocationTracking();
 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);
}

function startLocationTracking()
{
	divblock('inside');//◆watchPosition gif表示
	divblock('mylocation');//◆mylocation表示

	//◆座標収得
	if(navigator.geolocation)
	{
	browserSupportFlag = true;
		watchId = navigator.geolocation.watchPosition(function(position)
		{
		initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
		map.setCenter(initialLocation);
		showCurrentLocation(position);

		//◆現在地マーカー
　　　　　　　　　　　　var ini = new google.maps.Marker(
　　　　　　　　　　　　{
　　　　　　　　　　　　position:initialLocation,  
　　　　　　　　　　　　map: map,
　　　　　　　　　　　　title: '現在位置',  
　　　　　　　　　　　　draggable: false,  
　　　　　　　　　　　　icon: 'http://waox.main.jp/maps/icon/car2.png',
			animation: google.maps.Animation.DROP
　　　　　　　　　　　　});
		},
		function()
		{
		handleNoGeolocation(browserSupportFlag);
		});
	}
	else
	{

	// Browser doesn't support Geolocation
	browserSupportFlag = false;
	handleNoGeolocation(browserSupportFlag);
	}

	google.maps.event.addListener(map, 'dragend', function() //◆地図を移動（ドラッグ）するとclearWatch
	{
		if (watchId > 0)
		{
		navigator.geolocation.clearWatch(watchId);
		divnone('inside');//◆watchPosition gif表示
		divnone('mylocation');//◆mylocation表示
		}
	});
}

//◆現在地座標表示
function showCurrentLocation(position)
{
	document.getElementById("mylocation").innerHTML = "Lat:" + position.coords.latitude.toFixed(7) + " , Lng:" + position.coords.longitude.toFixed(7) ;
}

function handleNoGeolocation(errorFlag)
{
	if (errorFlag == true)
	{
	initialLocation = tokyo;
	contentString = "位置を特定できません。サポートされていないブラウザです。東京都庁を表示します。";
	}
	else
	{
	initialLocation = tokyo;
	contentString = "位置を特定できません。サポートされていないブラウザです。東京都庁を表示します。";
	}
	map.setCenter(initialLocation);
	geowindow  .setContent(contentString);
	geowindow  .setPosition(initialLocation);
	geowindow  .open(map);
}

//div表示の切換え
function divblock(id)
{
	var ele = document.getElementById(id);
	ele.style.display = 'block';
}  

//div非表示の切換え
function divnone(id)
{
	var ele = document.getElementById(id);
	ele.style.display = 'none';  
}

window.onload=initialize;

//]]>
</script>
    </head>
    <body>
    <div id="traffic">
    <div id="getlocation">
                <div class="toolbar">
                    <h1>Traffic Layer</h1>
                <a class="button flip" id="infoButton" href="#about">説明</a>
                <a class="button leftButton" target="_webapp" href="../main/index.html#home">Home</a>
                </div>
		<input type="button" value="現在位置を追跡" onclick="startLocationTracking()" style="width : 100%;" />
		<div id="mylocation" align="center" style="color : white;">
		</div>
		<div id="map_canvas" >
		</div>
		<div id="inside"><img src="http://waox.main.jp/maps/gif/Earth-06-june.gif" width="30" height="30" border="0" /></div>
		</div>

 <div id="traffic_button">
 <table border="0">
 <tbody>
 <tr>
 <td>

 <ul class="edit rounded" style="text-align : center;font-size : 12px;" >
 道路渋滞情報<br/><a href="#" class="whiteButton" onclick="toggletraffic()" style="background-color:transparent;filter:alpha(opacity=65);-moz-opacity:0.6;opacity:0.6;"></a>
 </ul>

 </td>
 </tr>
 </tbody>
 </table>
 </div>

        </div>

        <div id="about">
            <div class="toolbar">
                    <h1>地図の説明</h1>
            <a class="button flip" id="infoButton" href="#traffic">Back</a>
        </div>

	<div>
 <form class="scroll">
 <ul class="edit rounded">
 <li>Traffic Layerの使用方法</li>
 <li><p style="font-size : 14px;">地図中央下部のボタンをタップする度に、Traffic LayerのON/OFFを行います。</p></li>
 </ul>
 </form>
            <a style="margin:30px 10px;color:rgba(0,0,0,.9)" href="#traffic" class="whiteButton goback">Back</a>
    </div>
    </div>
    </body>
</html>

 

コピペ用

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Google Map Traffic Layer Demo for Smartphone/iPhone</title>
        <style type="text/css" media="screen">@import "../../themes/css/jqtouch.css";</style>
        <script src="../../src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../src/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<!--ここからGoogle Maps API v3 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'jqtouch.png',
                addGlossToIcon: false,
                startupScreen: 'jqt_startup.png',
                statusBar: 'black'
            });
        </script>

<link rel="stylesheet" href="http://waox.main.jp/iPhonemap2/css/iPhone-map.css" type="text/css" />

<script type="text/javascript">
//◆個別に指定する初期表示の設定
    var zoom = 12;
    var mapTypeId = google.maps.MapTypeId.ROADMAP 
</script>

<script type="text/javascript">
//<![CDATA[
var watchId=0;
var initialLocation;
var tokyo = new google.maps.LatLng(35.68971, 139.69168);
var browserSupportFlag =  new Boolean();
var map, trafficLayer;
var infowindow = new google.maps.InfoWindow();
var geowindow = new google.maps.InfoWindow();
var position;
var ini;

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

	//◆ナビゲーションコントロール
	navigationControl: true,
		navigationControlOptions:
		{

		//◆通常 ズームコントロール
		//style: google.maps.NavigationControlStyle.DEFAULT,
		style: google.maps.NavigationControlStyle.SMALL,
		position: google.maps.ControlPosition.LEFT_TOP

		//◆Android ズームコントロール
		//style:google.maps.NavigationControlStyle.ANDROID,
		//position: google.maps.ControlPosition.BOTTOM_CENTER
		},

		//◆マップタイプコントロール
		mapTypeControl: true,
		mapTypeControlOptions:
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		//style: google.maps.MapTypeControlStyle.DEFAULT,
		//style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
		position: google.maps.ControlPosition.TOP_RIGHT
		},

		//◆スケールコントロール
		scaleControl: true,
		scaleControlOptions:
		{
		//◆指定無しの場合左下になる
		//position: google.maps.ControlPosition.RIGHT_TOP
		//position: google.maps.ControlPosition.TOP_CENTER
		//position: google.maps.ControlPosition.BOTTOM_CENTER
		},

		zoom: zoom,
		mapTypeId: mapTypeId
	};

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	startLocationTracking();
	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);
}

function startLocationTracking()
{
	divblock('inside');//◆watchPosition gif表示
	divblock('mylocation');//◆mylocation表示

	//◆座標収得
	if(navigator.geolocation)
	{
	browserSupportFlag = true;
		watchId = navigator.geolocation.watchPosition(function(position)
		{
		initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
		map.setCenter(initialLocation);
		showCurrentLocation(position);

		//◆現在地マーカー
　　　　　　　　　　　　var ini = new google.maps.Marker(
　　　　　　　　　　　　{
　　　　　　　　　　　　position:initialLocation,  
　　　　　　　　　　　　map: map,
　　　　　　　　　　　　title: '現在位置',  
　　　　　　　　　　　　draggable: false,  
　　　　　　　　　　　　icon: 'http://waox.main.jp/maps/icon/car2.png',
			animation: google.maps.Animation.DROP
　　　　　　　　　　　　});
		},
		function()
		{
		handleNoGeolocation(browserSupportFlag);
		});
	}
	else
	{

	// Browser doesn't support Geolocation
	browserSupportFlag = false;
	handleNoGeolocation(browserSupportFlag);
	}

	google.maps.event.addListener(map, 'dragend', function() //◆地図を移動（ドラッグ）するとclearWatch
	{
		if (watchId > 0)
		{
		navigator.geolocation.clearWatch(watchId);
		divnone('inside');//◆watchPosition gif表示
		divnone('mylocation');//◆mylocation表示
		}
	});
}

//◆現在地座標表示
function showCurrentLocation(position)
{
	document.getElementById("mylocation").innerHTML = "Lat:" + position.coords.latitude.toFixed(7) + " , Lng:" + position.coords.longitude.toFixed(7) ;
}

function handleNoGeolocation(errorFlag)
{
	if (errorFlag == true)
	{
	initialLocation = tokyo;
	contentString = "位置を特定できません。サポートされていないブラウザです。東京都庁を表示します。";
	}
	else
	{
	initialLocation = tokyo;
	contentString = "位置を特定できません。サポートされていないブラウザです。東京都庁を表示します。";
	}
	map.setCenter(initialLocation);
	geowindow  .setContent(contentString);
	geowindow  .setPosition(initialLocation);
	geowindow  .open(map);
}

//div表示の切換え
function divblock(id)
{
	var ele = document.getElementById(id);
	ele.style.display = 'block';
}  

//div非表示の切換え
function divnone(id)
{
	var ele = document.getElementById(id);
	ele.style.display = 'none';  
}

window.onload=initialize;

//]]>
</script>
    </head>
    <body>
    <div id="traffic">
    <div id="getlocation">
                <div class="toolbar">
                    <h1>Traffic Layer</h1>
                <a class="button flip" id="infoButton" href="#about">説明</a>
                <a class="button leftButton" target="_webapp" href="../main/index.html#home">Home</a>
                </div>
		<input type="button" value="現在位置を追跡" onclick="startLocationTracking()" style="width : 100%;" />
		<div id="mylocation" align="center" style="color : white;">
		</div>
		<div id="map_canvas" >
		</div>
		<div id="inside"><img src="http://waox.main.jp/maps/gif/Earth-06-june.gif" width="30" height="30" border="0" /></div>
		</div>

		<div id="traffic_button">
		<table border="0">
		<tbody>
		<tr>
		<td>

			<ul class="edit rounded" style="text-align : center;font-size : 12px;" >
			道路渋滞情報<br/><a href="#" class="whiteButton" onclick="toggletraffic()" style="background-color:transparent;filter:alpha(opacity=65);-moz-opacity:0.6;opacity:0.6;"></a>
			</ul>

		</td>
		</tr>
		</tbody>
		</table>
		</div>

        </div>

        <div id="about">
            <div class="toolbar">
                    <h1>地図の説明</h1>
            <a class="button flip" id="infoButton" href="#traffic">Back</a>
        </div>

	<div>
	<form class="scroll">
		<ul class="edit rounded">
                        <li>Traffic Layerの使用方法</li>
			<li><p style="font-size : 14px;">地図中央下部のボタンをタップする度に、Traffic LayerのON/OFFを行います。</p></li>
		</ul>
	</form>
            <a style="margin:30px 10px;color:rgba(0,0,0,.9)" href="#traffic" class="whiteButton goback">Back</a>
    </div>
    </div>
    </body>
</html>

 

 

コチラの記事も参考までに「交通渋滞情報レイヤーと交通情報ImageMapType」

 

◆Google Maps JavaScript API V3　サンプル

 Googel Maps API + Traffic Layer（交通渋滞情報レイヤー） +ON/OFFボタン ／JQtouch   Googel Maps API + Traffic Layer（交通渋滞情報レイヤー） +ON/OFFボタン ／JQtouch   Googel Maps API + Traffic Layer（交通渋滞情報レイヤー） +ON/OFFボタン ／JQtouch

 

◆Google Maps JavaScript API V3

関連記事一覧

スポンサードリンク

関連記事一覧

  1. Apple iPhone（アイフォン）で正確な地理的座標位置を取得するメソッドの比較。／Googel Maps API v3 Geolocation　
  2. jQTouch iPhone用Google Maps API V3 地図 でのjQuery click event （クリックイベント）
  3. 画面左上部のclass ”back” button(バックボタン)が target=”_webapp”の場合に正常に動作しない問題（不具合）／jQtouch
  4. 交通渋滞情報レイヤーと交通情報ImageMapType
  5. ユーザの現在座標位置を収得する方法とは？／Geolocation + iPhone（アイフォン）+Google Maps API v3
Related Posts
Google Maps API v3, Google Maps API V3 jQTouch, jQTouch, タイル・オーバーレイ・イメージ, 地図（マップ）内のコントローラ表示等, , , , , , , , ,

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