CODEWITHSUNDEEP
angulargoogle-mapsgoogle-maps-api-3maps
Lucas Alves
Lucas Alves

Reputation: 111

How to create a agm-direction with multiples points?

I have 10 points (west and south cood) and I need to create a unic agm-map with this points. The route must pass through all these points. But.... When I search I found origin and destination points. but... and the intermediary points?

 <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination"></agm-direction>

I'm Using Angular 7. And the npm agm map

Upvotes: 0

Views: 8959

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59328

What you are looking for is called waypoints in Google Maps Directions Service API which:

allow you to calculate routes through additional locations, in which case the returned route passes through the given waypoints.

A waypoint consists of the following fields:

  • location (required) specifies the address of the waypoint.
  • stopover (optional) indicates whether this waypoint is a actual stop on the route (true) or instead only a preference to route
    through the indicated location (false). Stopovers are true by
    default.

I guess you are utilizing Agm-Direction component to draw a route, if so waypoints could be specified like this: 

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-direction [origin]="origin" [destination]="destination" [waypoints]="waypoints"></agm-direction>
</agm-map>


export class AppComponent {

  lat = 41.85;
  lng = -87.65;

  origin = { lat: 29.8174782, lng: -95.6814757 };
  destination = { lat: 40.6976637, lng: -74.119764 };
  waypoints = [
     {location: { lat: 39.0921167, lng: -94.8559005 }},
     {location: { lat: 41.8339037, lng: -87.8720468 }}
  ];
}

Here is a demo

Upvotes: 4

Related Questions