VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで

AngularJSを使ってGoogleマップ(11)ルートサービスで表示するルートの線の色、太さを設定する方法

ルートサービスで地図上に表示したルートの線の色、太さを変更する方法についてです。

デモとコードサンプルはこちら
 
デフォルトでは、水色で表示されています。ルートの線の色や太さを変更する設定方法を確認しました。
 
●設定方法
 
DirectionsRendererのオプションで指定します。
 
・strokeColor:
 線の色
 
・strokeOpacity:
 線の透明度を0~1の範囲で指定。
 
・strokeWeight:
 線の幅をピクセルで指定。
 
●設定例
 
ルートの線を赤くし、線の太さを太くします。

var polyOptions = {
  strokeColor: '#ff0000',
  strokeOpacity: 0.7,
  strokeWeight: 7
};
var rendererOptions = {
  draggable: true,
  polylineOptions: polyOptions
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

 
AngularJS、Googleマップの他の記事の目次

モバイルバージョンを終了