Closed abdullah951 closed 5 years ago
Hi @abdullah951, sorry for late reply.
It's work for me. Here is my sample implement your code.
HTML
<agm-map [latitude]="lat" [longitude]="lng">
<agm-direction
[origin]="origin"
[destination]="destination"
[waypoints]="waypoints"
[renderOptions]="renderOptions"
[markerOptions]="markerOptions"
>
</agm-direction>
</agm-map>
TS
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public lat = 24.799448;
public lng = 120.979021;
public origin: any = null;
public destination: any = null;
public waypoints: any = null;
public renderOptions = {};
public markerOptions = {};
ngOnInit() {
this.origin = { lat: Number(this.lat), lng: Number(this.lng) };
this.waypoints = [{ location: { lat: Number(24.7998516), lng: Number(120.97283) }, stopover: false, }];
this.destination = { lat: Number(24.7992116), lng: Number(120.974784) };
this.renderOptions = { polylineOptions: { strokeColor: '#0f0' }, suppressMarkers: true };
this.markerOptions = {
origin: { infoWindow: 'Origin', icon: 'http://i.imgur.com/7teZKif.png', },
waypoints: [{ infoWindow: 'Restaurant', icon: 'http://i.imgur.com/7teZKif.png' }],
destination: { infoWindow: 'Destination', icon: 'http://i.imgur.com/7teZKif.png', }
};
}
}
Screenshot
Hope to help you!
I have three latlng. One for origin, other for waypoint and third for destination. It draws extra route which is from waypoint to so unknown location. Is this a bug? Following is my code. Any suggestions sir
this.origin = { lat: Number(lat1), lng: Number(lng1) }; this.waypoints = [{ location: { lat: Number(lat3), lng: Number(lng3) }, stopover: false, }]; this.destination = { lat: Number(lat4), lng: Number(lng4) }; this.renderOptions = { polylineOptions: { strokeColor: '#0f0' }, suppressMarkers: true }; this.markerOptions = { origin: { infoWindow: 'Origin', icon: 'http://i.imgur.com/7teZKif.png', }, waypoints: [{ infoWindow: 'Restaurant', icon: 'http://i.imgur.com/7teZKif.png' }], destination: { infoWindow: 'Destination', icon: 'http://i.imgur.com/7teZKif.png', } };