I have the following:
button for the user's current location with the following code
initMap() {
this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000,
enableHighAccuracy: true }).then((resp) => {
this.mylocation = new google.maps.LatLng(resp.coords.latitude,
resp.coords.longitude);
this.map = new google.maps.Map(this.mapElement.nativeElement, {
zoom: 15,
center: this.mylocation
});
this.directionsDisplay.setMap(this.map);
});
let watch = this.geolocation.watchPosition();
watch.subscribe((data) => {
this.deleteMarkers();
//guardo datos en firebase
this.actuario.update({
lat: data.coords.latitude,
lng: data.coords.longitude
});
this.lat = data.coords.latitude;
this.lng = data.coords.longitude;
this.updatelocation = new google.maps.LatLng(data.coords.latitude, data.coords.longitude);
//this.calculateAndDisplay_Route(data.coords.latitude,data.coords.longitude);
let image = 'assets/imgs/blue-bike.png';
this.addMarker(this.updatelocation, image);
this.setMapOnAll(this.map);
});
}
button to generate route
calculateAndDisplay_Route(){
this.directionsService.route({
origin:{lat:this.lat,lng:this.lng},
destination: this.direccion,
travelMode: 'DRIVING'
}, (response, status) => {
if (status === 'OK') {
this.directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
so far I have the following
the idea is to update the map in real time, have a third button that says "Go" at that time point A should be updated and go forward.