Changing Color of Way points.

[Hokino]

Suppose I have an Origin of A and Destination of D with a way point of B and C.

Is it possible to change the stroke color of the waypoint section of the agm-direction.

Something like:
waypoints: [
{
icon: 'your-icon-url',
label: 'marker label',
opacity: 0.8,
polylineOptions: {
strokeColor: '0080ff',
strokeWeight: 6,
strokeOpacity: 0.55
}
},
],

For example could I have :
A -> B (default blue)
B -> C (red)
C -> D (default blue)

I have tried to do multiple directions so that each of the above routes (a -> b, b -> c, c -> d) are its own direction and setting the strokeColor in the renderOptions. But then the markers are not automatically showing as a,b,c,d. Rather they are showing up like this.

Please tell me if such a functionality already exists.

Thanks!

[explooosion]

Hi @Hokino !

There is no way to custom waypoints style now with any waypoint params in GoogleMapAPI - directions#Waypoints. 😞

But I have found this post, you can create your own polylines to replace exist polylines from result.

I have try and it seems to be successful.

Hope to help you.

• Demo

• HTML

<agm-map [latitude]="lat" [longitude]="lng" (mapReady)="onMapReady($event)">
  <agm-direction
   [origin]="origin"
   [destination]="destination"
   [waypoints]="waypoints"
   [renderOptions]="renderOptions"
   (onResponse)="onResponse($event)"
   >
  </agm-direction>
</agm-map>

• TS

import { Component } from '@angular/core';
import { Polyline, PolylineOptions, GoogleMap } from '@agm/core/services/google-maps-types';

declare var google: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  public lat = 24.799448;
  public lng = 120.979021;

  public origin: any = 'Taichung Railway Station, Taiwan';
  public destination: any = 'Wenxin Forest Park, Taiwan';

  public waypoints: Array<any> = [
    { location: 'Chung Shan Medical University, Taiwan', stopover: true },
    { location: 'National Chung Hsing University, Taiwan', stopover: true },
  ];

  // Hide origin polylines
  public renderOptions = { suppressPolylines: true };

  // Custom polylines
  public polylines: Array<Polyline> = [];

  // Current map
  public map: GoogleMap;

  // Save GoogleMap instance
  public onMapReady(event: GoogleMap) {
    this.map = event;
  }

  public async onResponse(event: any) {

    // Default style
    const polylineOptions: PolylineOptions = {
      strokeWeight: 6,
      strokeOpacity: 0.55,
    };

    // Polylines strokeColor
    const colors = ['#0000FF', '#FF0000', '#0000FF'];

    // Clear exist polylines
    this.polylines.forEach(polyline => polyline.setMap(null));

    const { legs } = event.routes[0];

    legs.forEach((leg, index) => {

      leg.steps.forEach(step => {
        const nextSegment = step.path;
        const stepPolyline: Polyline = new google.maps.Polyline(polylineOptions);

        // Custom color
        stepPolyline.setOptions({ strokeColor: colors[index] });

        nextSegment.forEach(next => stepPolyline.getPath().push(next));

        this.polylines.push(stepPolyline);
        stepPolyline.setMap(this.map);
      });
    });
  }
}

Your suggestion is great, it can be a new feature. 🙂

Ref

• how to draw a google maps waypoint with multi-colored polylines
  
• Directions Service

[Hokino]

Hi @explooosion I have another question. Say that the directions are circular. So for the same previous example, if A -> B -> C -> A (D). If we are going in a loop where the origin matches the destination is there a way to prevent the A from becoming labelled with a D pin.

Where
Origin = { latitude: 41.4214, longitude: -112.4768 }
Destination = { latitude: 41.4214, longitude: -112.4768 }
Waypoints = { latitude: 43.6686, longitude: -116.6462}, { latitude: 44.083, longitude: -116.7836 }

My example:

Im thinking that maybe i could have a click event that modifies the z-index of the marker selected that would send it to the back. So maybe swap the two values? That way once a user clicks once marker A would be visible and then on another click marker D would be visible?

Does that seem like the correct solution? I looked into marker cluster and spider marker solutions but those dont look like they will work for my purposes.

[Hokino]

Sorry a follow up question to my first question. I was able to implement your suggested changes and this is the result:
The B -> C is red as intended! Thanks for that.

However, i am seeing a unique interaction. Sometimes when i load the map it is fully zoomed out. Like this:

It isn't always zoomed out, sometimes it is zoomed in as intended. I tried adding the [zoom] attribute to the agm-map but it doesn't seem to affect the above behavior. It seems like maybe the map is being loaded too early before the zoom is ready?

When i try it again it usually will zoom in the expected amount. It will only be zoomed out on the very first try.

EDIT: Sorry i found out the issue. The component was being loaded before the lat, lngs were finished updating therefore it wasnt automatically zooming.

[Hokino]

Sorry for all the questions!

I noticed that if i want to change the labels while still having different colored routes that the labels do not behave as expected while the waypoints stopover property is set to false.

In this example i set the [markerOptions] to the below and the labels didnt work as expected.

markerOptions = {
origin: {
label: { color: 'white', text: '1' }
},
destination: {
label: { color: 'white', text: '4' }
},
waypoints: [
{
label: { color: 'white', text: '2' }
},
{
label: { color: 'white', text: '3' }
}
]
};

However, if i set stopover to false:
public waypoints: Array = [
{ location: 'Chung Shan Medical University, Taiwan', stopover: false },
{ location: 'National Chung Hsing University, Taiwan', stopover: false },
];

The labels work as expected, but now the different route colors are no longer being changed:

My question is, can you have both custom colored routes and custom markers?
Or is it possible to suppress a single marker? Rather than all of them?

EDIT:
I found a way around this by suppressing all markers.
renderOptions = { suppressPolylines: true, draggable: true, suppressMarkers: true };

And then creating individual agm-markers that point to the lat and lngs and have the label text to a letter of the alphabet..

markerList: { lat: number; lng: number; labelText: { text: string; color: string } }[] = [];

Then i call this method to populate the markerList array:
populateMarkerList(mapLocations) {
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const alphabetLength = 26;
mapLocations.forEach((element, index) => {
if (index >= alphabet.length) index = index - alphabetLength;
const location = {
lat: element.lat,
lng: element.lng,
labelText: { text: alphabet.charAt(index), color: 'white' }
};
this.markerList.push(location);
});
}

Then I loop through them in the html.

<agm-map
[latitude]="origin ? origin.lat : lat"
[longitude]="destination ? destination.lng : lng"
[scrollwheel]="null"
[gestureHandling]="'cooperative'"
(mapReady)="onMapReady($event)"

<ng-container *ngIf="origin && destination">
<agm-marker
*ngFor="let marker of markerList; let i = index"
[latitude]="marker.lat"
[longitude]="marker.lng"
[label]="marker.labelText"
>

<agm-direction
  [visible]="done"
  [origin]="origin"
  [destination]="destination"
  [waypoints]="waypoints"
  [provideRouteAlternatives]="true"
  [renderOptions]="renderOptions"
  (onResponse)="onResponse($event)"
></agm-direction>

[MarcosPauloSouzaMiranda]

Good Morning @Hokino

I have same problem with markers and option stopover in direction, thanks for the solution.

Att,
Marcos Paulo Souza Miranda