google maps api ルート線変更

質問

Google Maps JavaScript API v3　でルート検索で表示されるポリラインの色や太さを変更したいのですが行き詰ってます。

ネットで調べてますと、polylineOptionのstrokeColorやstrokeWeightなどで変更できるような事は書いてあるのですが、どうやってもうまくいきません。

Googleデベロッパーで紹介されています下記のルートサービスのひな形をもとにいろいろやっているのですが、どこにどのように記述すればいいのでしょうか。

------------------------------------------------
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
}

function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
--------------------------------------------------

回答No.1

fujillin · ベストアンサー

DirectionsRendererのoption設定で、色や太さを設定できます。

＞ネットで調べてますと
map apiに関しては本家のgoogleから詳細なドキュメントが公開されていますので、そちらを調べるのが一番です。
（この回答もそこを見ただけです。）
https://developers.google.com/maps/documentation/javascript/reference?hl=ja#DirectionsRendererOptions

具体的には、初期設定で、
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setOptions({
　polylineOptions: { strokeColor:"#f00", strokeWeight:6 }
});
とか。

以前、似たようなルート検索の質問がありましたので、ご参考までに。
　http://okwave.jp/qa/q8159078.html

お礼

ありがとうございます。

実は、教えて頂いた設定もためしてみたのですが、ぜんぜんダメだったのです。
ダメと言いますか設定する位置に問題があるのだと思います。

もう少しいろいろと探ってみて、原因が絞れてきましたら改めて質問させていただきます。