スポンサードリンク

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

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.ベースの地図を選択

前回jQtouch用に現在の位置座標を収得するデモ(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

スポンサードリンク

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