Ng-Maps change route color of direction renderer

Question

I am trying to change the blue route to any other color, but unable to change it.

plunker url: http://plnkr.co/edit/3ddUOUx7r91LJQqKP43e?p=preview

angular.module('ngMap').run(function($rootScope, NgMap) {
        $rootScope.logLatLng = function(e) {
          console.log('loc', e.latLng);
        }

        NgMap.getMap({id: 'locomotiveMap'}).then(function(map) {

              var directionsDisplay = new google.maps.DirectionsRenderer;
              var polyline = new google.maps.Polyline({
              strokeColor: '#FF0000',
              strokeOpacity: 0.7,
              strokeWeight: 1
              });

              directionsDisplay.setOptions({polylineOptions: polyline});
              directionsDisplay.setMap(map);

              console.log(directionsDisplay);

        });

        $rootScope.wayPoints = [
          { location: { lat: 51.546550, lng: 0.026345 }, stopover: true }, 
          { location: { lat: 51.5429188223739, lng: 0.034160614013671875 }, stopover: true },
          { location: { lat: 51.5493953, lng: 0.0412878 }, stopover: true }
        ];
      });

HTML:

<body ng-app="ngMap">
    <div style="width: 100%; float:left; height: 100%">

      <ng-map id="locomotiveMap" zoom="14" style="height:90%">
        <marker animation="Animation.DROP" position="51.546550, 0.026345" ></marker>

        <marker animation="Animation.DROP" position="51.5493953, 0.0412878"></marker>
        <directions 
          draggable="true"
          waypoints="{{wayPoints}}"
          suppress-markers="true"
          origin="51.546550, 0.026345"
          destination="51.5493953, 0.0412878"
          >
        </directions>

      </ng-map> 

    </div>

  </body>

score 3 · Accepted Answer · answered Nov 14 '16 at 11:09

To specify the color of the line polylineOptions property of DirectionsRendererOptions struct is intended.

In case of ng-map library it could be specified via polyline-options attribute of directions directive:

<directions polyline-options='{strokeColor: "red"}' draggable="true" waypoints="{{wayPoints}}" suppress-markers="true" origin="51.546550, 0.026345" destination="51.5493953, 0.0412878"></directions>

Example

angular.module('ngMap').run(function ($rootScope, NgMap) {
    $rootScope.logLatLng = function (e) {
        console.log('loc', e.latLng);
    }

    initMapDetails();

    $rootScope.wayPoints = [
        { location: { lat: 51.546550, lng: 0.026345 }, stopover: true },
        { location: { lat: 51.5429188223739, lng: 0.034160614013671875 }, stopover: true },
        { location: { lat: 51.5493953, lng: 0.0412878 }, stopover: true }
    ];


    function initMapDetails() {
        NgMap.getMap({ id: 'locomotiveMap' }).then(function (map) {
            google.maps.event.addListener(map, "tilesloaded", function () {
                
            });
        });
    }
});

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="ngMap" style="width: 100%; float:left; height: 100%">
    <ng-map id="locomotiveMap" zoom="14" style="height:90%">
      <marker animation="Animation.DROP" position="51.546550, 0.026345"></marker>

      <marker animation="Animation.DROP" position="51.5493953, 0.0412878"></marker>
      <directions polyline-options='{strokeColor: "red"}' draggable="true" waypoints="{{wayPoints}}" suppress-markers="true" origin="51.546550, 0.026345" destination="51.5493953, 0.0412878">
      </directions>

    </ng-map>
</div>

Updated plunker

Ng-Maps change route color of direction renderer

1 Answers1