FC2ブログ

地図の色を変えたGoogleMAPにディレクションモードを表示する


GoogleMAPSV3で地図の色を変更してディレクションモードを追加する


前回作成したGoogle MAPS API V3の地図の色(MAP STYLE)をオリジナルにしたもの
にDirection Modeを追加して、ナビゲートできるようにします。

dire.jpg



まず、head内にgooglen mapsを呼び出すスクリプトを張ります

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


そして</body>の直前に

<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
           //まずこの2文を入れる
var MY_MAPTYPE_ID = 'original'//なんでもいいので名前をつける
var map;
var centerPos = new google.maps.LatLng(緯度,経度);
        //地図の中心位置を決めて変数centerPosに格納
function initialize() { // mapの初期化

var stylez = [ //前回作ったstyleのJSON
{
featureType: "water",
elementType: "geometry",
stylers: [
{ invert_lightness: true }
]
},{
featureType: &quiot;road.highway",
elementType: "all",
stylers: [
{ visibility: "on" },
{ lightness: -17 },
{ hue: "#00ff55" },
{ saturation: 33 }
]
},{
featureType: "road.arterial",
elementType: "all",
stylers: [
{ hue: "#ff8800" },
{ gamma: 0 },
{ invert_lightness: true },
{ visibility: "on" },
{ lightness: 46 },
{ saturation: 24 }
]
},{
featureType: "landscape",
elementType: "all",
stylers: [
{ hue: "#ff0000" },
{ invert_lightness: true },
{ lightness: 0 },
{ gamma: 0 },
{ saturation: -6 }
]
}
];
directionsDisplay = new google.maps.DirectionsRenderer();//ナビゲートを画面表示する
var mapOptions = {
zoom: 13,
center: centerPos,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]},
mapTypeId: MY_MAPTYPE_ID
};
  //map optionで地図の中心位置と、初期の拡大率、地図の種類(satellyteとかroadmapとか)
  // をいれる。カスタムマーカーなどを入れるならここに入れる。



map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
//マップを表示するDIVのID ここではmap_canvas
var styledMapOptions = {
name: "Ori"
}; //mapのStyleに名前をつけとく

var Original = new google.maps.StyledMapType(
stylez, styledMapOptions); //地図名前にmapstyleを結合させる

map.mapTypes.set('original', Original);
map.setMapTypeId('original');
directionsDisplay.setMap(map); //ナビゲーションをmapに表示する
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
};//directionpanelというIDのDIVに、ナビゲーション詳細を表示する
};
function calcRoute() { //ルート処理

 var start = document.getElementById("start").value;
//出発点のvalueを取得、ここではstartというselectに設定
var end = document.getElementById("end").value;
//到着点のvalueを取得、ここではendというselectに設定
var request = {
origin:start, //ルート計算開始位置
destination:end, //ルート計算終了位置
travelMode: google.maps.DirectionsTravelMode.WALKING
};
         //ルートの方法 WALKING DRIVING,BICYCLINGの中から選ぶ
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); document.getElementById("access").style.display = "none";
}
}); //エラー処理
};
</script>


HTMLはセレクトとオプションを使って、
出発点と到着点を選択してもらい、
map_canvasに地図を表示
directionPanelにナビゲート詳細を表示します。

まず忘れずにこれを入れて
<body onload=&quit;initialize()">


以下タグの打ち方
<div>
<b>出発地</b>
<select id="start" name="start" onchange="calcRoute();">
<option value="品川駅">品川駅</option>
<option value="国際展示場駅">国際展示場駅</option>
<option value="お台場海浜公園">お台場海浜公園</option>
</select>
<input type="hidden" name="AHidden" id="AHidden" value="">
<b>目的地</b>
<select id="end" name="end" onchange="calcRoute();">
<option value="台場公園">台場公園</option>
<option value="芝浦埠頭">芝浦埠</option>
<option value="東京都中央区晴海5丁目9-34">晴海埠頭公園</option>
</select>
</div>
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
<div id="directionsPanel" style="width:200px; height:50px;"></div>

最初のgoogleMAPの呼び出しで言語を&language=jaにしていれば、
ディレクションモードのvalueは、日本語で地名を表記または住所を表記するだけで、
自動的に緯度経度が近い場所を選択してくれて、ルート表示されます。

サンプルページはこちら→http://www.geocities.jp/coliraxa/map1.html



残念なことに、direction rendererには 
線の色を変えるとかそういう機能はまだついてない模様です。
forumにリクエストも出てるので、そのうちoptionがつくかもしれませんね。

それでもどうしても線の色をカスタマイズしたい場合は、また次回!
スポンサーサイト



テーマ : Webサービス
ジャンル : コンピュータ

コメントの投稿

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

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

FC2Blog Ranking

AMAZON
カラーミーショップ
ブログ広告
ブログ広告ならブログ広告.com
ぐるなび
中古DVD
QRコード
QR
SEO