Google Maps JavaScript API V3の交通量レイヤと自転車道レイヤ
交通量レイヤはAndroid のモバイル Google マップアプリ、iOS のマップアプリからも利用可能になっているもので、スマフォを持ってる人は見たことあるんじゃないかな。
自転車道レイヤは自転車専用道路か自転車推奨道路を表示してるんだけど、日本ではまだ運用されてないっぽい。
それでマップと作ってみたのがこれ。
自転車道レイヤは自転車専用道路か自転車推奨道路を表示してるんだけど、日本ではまだ運用されてないっぽい。
それでマップと作ってみたのがこれ。
Googleは本当にやることに夢がある。交通量がわかるってことは交通センサスとかも簡単に集計できるようになるし、都市計画とかにも利用できるよな。
ちなみに交通状況を表す色については、
っていう意味になります。
ソースは以下の通り
----
var map;
//座標一覧
var Tokyo = new google.maps.LatLng(35.6894875, 139.6917064);
var Paris = new google.maps.LatLng(48.8701348, 2.373046875);
//道路レイヤー
var traffic;
var bikeLayer;
function initialize12() {
var myOptions = {
zoom: 12,
center: Tokyo ,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas12"),myOptions);
//交通量レイヤー設定
traffic = new google.maps.TrafficLayer();
traffic.setMap(map);
//自転車道レイヤー設定
bikeLayer = new google.maps.BicyclingLayer();
}
function straffic(){
if(traffic.getMap())
{
traffic.setMap(null);
}
else
{
traffic.setMap(map);
map.panTo(Tokyo);
}
}
function sbike(){
if(bikeLayer.getMap())
{
bikeLayer.setMap(null);
}
else
{
bikeLayer.setMap(map);
map.panTo(Paris);
}
}
google.maps.event.addDomListener(window, 'load', initialize12);
----
ちなみに交通状況を表す色については、
- 緑色: 交通状況が良い
- 黄色: ある程度の交通量がある
- 赤色: 交通量が多く、混雑している
- 灰色: 現在利用できる情報はありません
っていう意味になります。
ソースは以下の通り
----
var map;
//座標一覧
var Tokyo = new google.maps.LatLng(35.6894875, 139.6917064);
var Paris = new google.maps.LatLng(48.8701348, 2.373046875);
//道路レイヤー
var traffic;
var bikeLayer;
function initialize12() {
var myOptions = {
zoom: 12,
center: Tokyo ,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas12"),myOptions);
//交通量レイヤー設定
traffic = new google.maps.TrafficLayer();
traffic.setMap(map);
//自転車道レイヤー設定
bikeLayer = new google.maps.BicyclingLayer();
}
function straffic(){
if(traffic.getMap())
{
traffic.setMap(null);
}
else
{
traffic.setMap(map);
map.panTo(Tokyo);
}
}
function sbike(){
if(bikeLayer.getMap())
{
bikeLayer.setMap(null);
}
else
{
bikeLayer.setMap(map);
map.panTo(Paris);
}
}
google.maps.event.addDomListener(window, 'load', initialize12);
----
0 件のコメント:
コメントを投稿