FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

google maps API V3 のディレクションモード(direction mode)



GOOGLE MAPS API V3 のディレクションモードを使ってみた。
(direction mode WALKING)



V2ではドライブモードしかなくて、最寄駅から徒歩でのルートを描けなかったので、入れてなかったけれど、
ついに徒歩モードが出たので、早速!!(正式な名前は、DirectionTravelMode クラスのWALKING)

詳しい説明はこちらのサイト(英文)
http://stiern.com/tutorials/how-to-use-directions-with-google-maps-api-v3




function calcRoute() {
var aaa = new google.maps.LatLng(緯度,経度);
var eki = [緯度, 経度];
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
document.getElementById("access").style.display = "none";
}
});


HTMLのタグは


<div>
<p>出発地</p>
 <select id="start" name="start" onchange="calcRoute();">

<option value="出発地1">出発地1</option>
<option value="出発地2">出発地2</option>
<option value="出発地3">出発地3</option>
</select>

<p>目的地</p>
  <select id="end" name="start" onchange="calcRoute();">

<option value="目的地1">目的地1</option>
<option value="目的地2">目的地2</option>
<option value="目的地3">目的地3</option>
</select>

</div>
>div id="map_canvas" style="width: 700px;height: 450px;"></div>
<div id="directionsPanel" style="width:200px; height:50px;"></div>


使ってみた感想
なかなか便利!
でも、ルートの詳細のところに大きく、ベータ版なので、歩道じゃないところも表示される可能性が・・・うんぬんの注意がちょっと目立つ
あと、IE、firefox、chromeでは、ルートの詳細が日本語表記なのに、SAFARIだけ何故か英語になってしまう・・・
言語表記選択のオプションってどこにあるんだろう・・・また調べなくては
と思ったら、リファレンスにのってた

headのスクリプト文に&language=jaと足せばいいんだそうです。


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja">


ついでに、ウオーキングモードなどの探索をおこなうと、せっかく前回つくったカスタムマーカーと

到着のマーカーがかぶってしまって、見えなくなっていたので、marker optionのなかに、

zIndex:10000を入れることにしました。


var marker = new google.maps.Marker({
position: myLoc,
map: map,
shadow: myshadow,
icon: myimage,
shape: shape,
zIndex:10000
});


しかし相変わらず、ブラウザによって影シャドウの透過率がまちまち

サンプルページは direction mode だけのページ 

Custom MarkerとInfo Windowとdirectionmode のサンプル

で見てください

スポンサーサイト

テーマ : インターネット関連
ジャンル : コンピュータ

コメントの投稿

管理者にだけ表示を許可する

検索フォーム
カテゴリ
最新記事
アンケート
月別アーカイブ
お名前.com
リンク
RSSリンクの表示
google
MicroAD
ninja
忍者アド
広がるブログ
blomotion
サンプル・イベント・モニターならBloMotion
プレスブログ
[プレスブログ]価値あるブログに換金可能なポイントを差し上げます。
wadax
ブログ村
フリーエリア
人気ブログランキングへ
ブログランキングドットネット
リンクリックブログランキング
フリーエリア
FC2ブログランキング

FC2Blog Ranking

AMAZON
カラーミーショップ
ブログ広告
ブログ広告ならブログ広告.com
ぐるなび
中古DVD
QRコード
QR
SEO
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。