Google maps API V3 ルート検索

質問

Google maps API V3　のルート検索で、出発地と目的地のマーカー（アイコン）を独自のものにするには、どのように記述すればよろしいでしょうか？

デフォルトの設定では、出発地が“A”、目的地が“B”となっています。

以下、テストサンプルです。

http://itohiki119.iinaa.net/bousai/test.html

よろしくお願い致します。

回答No.3

my-- · ベストアンサー

>>No.2 お礼

※関数の外（グローバルコード）に記述

// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#00FF00',
strokeOpacity: 0.5,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'http://itohiki119.iinaa.net/bousai/icon/F_red_kage.png'
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'http://maps.google.co.jp/mapfiles/ms/icons/firedept.png'
});

function func(response) {
var routes = response.routes[0];
lineObj.setPath(routes.overview_path);
lineObj.setMap(map);

var legs = routes.legs[0];
startMarker.setPosition(legs.start_location);
startMarker.setMap(map);

endMarker.setPosition(legs.end_location);
endMarker.setMap(map);

map.fitBounds(routes.bounds); // 追記（自動的に...）
}
// 終了タグ直前にでも置く
</script>

お礼

出来ました！ ＼(^o^)／
ありがとうございました。m(_ _)m
感謝！感謝！です。m(_ _)m

回答No.2

my--

>>No.1 お礼

// ラインオブジェクト
var lineObj = new google.maps.Polyline({
strokeColor: '#000',
strokeOpacity: 0.5,
strokeWeight: 5
});
// 出発地マーカーオブジェクト
var startMarker = new google.maps.Marker({
icon: 'start.png'
});
// 目的地マーカーオブジェクト
var endMarker = new google.maps.Marker({
icon: 'end.png'
});

function func(response) {
var routes = response.routes[0];
lineObj.setPath(routes.overview_path);
lineObj.setMap(map);

var legs = routes.legs[0];
startMarker.setPosition(legs.start_location);
startMarker.setMap(map);

endMarker.setPosition(legs.end_location);
endMarker.setMap(map);
}

...
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
func(response);
}
});
...

お礼

早速のご回答ありがとうございます。

修正したのですが、やはり連続して検索すると（住所を入力して、まず最初に検索した後、“車”を“歩き”にしたり、支部を変更すると…）ラインが重なってしまいます。

私の記述がおかしいのかもしれません。

それと、修正前は検索結果が画面の大きさに合わせて自動的に拡大、縮小できていたものが、出来なくなっています。

本当に厚かましいお願いで申し訳ないですが、マップの記述を下記にアップしましたので、修正箇所を示して頂けないでしょうか。

http://itohiki119.iinaa.net/bousai/test.txt

あとすこしのところで大きな壁にぶち当たってしまっています。

よろしくお願い致します。m(_ _)m

補足

すみません。m(_ _)m

どうもアップ出来ていないようです。

こちらでどうでしょうか。

http://itohiki119.iinaa.net/bousai/test03.js

よろしくお願い致します。

回答No.1

my--

...
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
//directionsDisplay.setDirections(response);
var routes = response.routes[0];
// ラインを引く
new google.maps.Polyline({
map: map,
path: routes.overview_path, // ルート座標
strokeColor: '#000',
strokeOpacity: 0.5,
strokeWeight: 5
});
var legs = routes.legs[0];
// 出発地マーカー
new google.maps.Marker({
map: map,
position: legs.start_location, // 出発地座標
icon: 'start.png' // 画像パス
});
// 目的地マーカー
new google.maps.Marker({
map: map,
position: legs.end_location, // 目的地座標
icon: 'end.png' // 画像パス
});
}
});
...

google.maps.PolylineOptions object specification
https://developers.google.com/maps/documentation/javascript/reference?hl=ja#PolylineOptions
google.maps.MarkerOptions object specification
https://developers.google.com/maps/documentation/javascript/reference?hl=ja#MarkerOptions

お礼

ご回答ありがとうございます。
早速教えて頂いたものを追記したところ、見事に出来ました！
しかしながら、新たな問題が・・・

ルート検索を連続で行なった場合、最初のルートが消えずに新たにラインやアイコンが現れてしまいます。

恐れ入りますが、この件についての追記はどうすればいいでしょうか。

すみません。よろしくお願い致します。