Trying to change agm direction waypoints marker's icon ONLY

Question

I developing a project where I am using <agm-direction> from angular google map api. Actually I want to display a direction which has an origin, a destination and between those some waypoints/stepover. Please find my object below:

  public directions: Array<any> = [
    {
      task_label:'DHL0001',
      origin: 'Beau-bassin Rose-Hill Mauritius',
      destination: 'Flic en flac, police station Mauritius',
      waypoints:[
        {
          location: 'Quatre Bornes, Police station'
        }
      ],
      visible: true,
      render_options: 
        {
          suppressMarkers: true,
          draggable: true,
          polylineOptions: { 
            strokeColor: '#cc33ff', 
            strokeOpacity :1,
            strokeWeight: 5,
            zIndex: 1,
            geodesic: false,
            clickable: true,
            editable: false,
           } 
        },
      marker_options:
        {
          origin: {
            icon: 'https://www.shareicon.net/data/32x32/2016/04/28/756617_face_512x512.png',
            draggable: true,
            infoWindow: `<h4>Test</h4>`,
            label: {
              text: 'Something',
              fontWeight: 'bold',
            }
          },
          destination: {
            icon: 'https://www.shareicon.net/data/32x32/2016/04/28/756626_face_512x512.png',
            label: 'MARKER LABEL',
            opacity: 0.8,
        }
        }
    }
  ]

And below this is the angular html code:

        <agm-map [zoom]="zoom" [latitude]="lat" [longitude]="lng">
            <agm-direction *ngFor="let direction of directions; let i = index"
            [origin]="direction.origin"
            [destination]="direction.destination"
            [renderOptions]="direction.render_options"
            [markerOptions]="direction.marker_options"
            [waypoints]="direction.waypoints"
            [visible]="direction.visible"
            (onChange)="change($event,i)"
            ></agm-direction>
          </agm-map>

Everything is fine except that the waypoints marker is having the destination marker's icon and the destination marker does NOT have any icon. Please find the result

I would like to have three different icon for the origin, destination and waypoints more further I would like to save the new draggable waypoint. Can someone help me please?

Answer 1

Had the same problem and finally fixed it. Leaving post here if someone else encounters the same problem:

When adding new waypoint, add stopover: false.

markerOptions = {
      origin: {
        icon: 'path-to-icon'
      },
      destination: {
        icon: 'path-to-icon'
      },
      waypoints: {
        icon: 'path-to-icon'
      }
    }

renderOptions = {
    suppressMarkers: true
  };

let latlng = new google.maps.LatLng(a.latitude, a.longitude);
      this.waypoints.push({
        location: latlng,
        stopover: false
      });


<agm-direction [origin]="origin"
                           [destination]="destination"
                           [waypoints]="waypoints"
                           [markerOptions]="markerOptions"
                           [renderOptions]="renderOptions"
                           [optimizeWaypoints]="false"></agm-direction>