Angular 2 Google Maps Javascript API, Route Service function doesn't exist

Question

Trying to get my head around using the Javascript API from Google Maps in my Angular 2 Project.

The problem i have is based on this code:

@Injectable()

export class CalculateAndDisplayRouteService {

public durationTrafficSource = new ReplaySubject<string>();
public durationTraffic$ = this.durationTrafficSource.asObservable();

public changeDurationTraffic(string) {
    this.durationTrafficSource.next(string);
}


public routeResponse(response, status) {
    console.log(response);
    let map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: lat, lng: lng},
        zoom: 8
    });
    if (status === 'OK') {
        let directionsDisplay = new google.maps.DirectionsRenderer({
            suppressMarkers: false,
            suppressInfoWindows: true
        });
        directionsDisplay.setMap(map);
        directionsDisplay.setDirections(response);

        this.changeDurationTraffic(response.routes[0].legs[0].duration.text); //Error is here
    } else {
        window.alert('Directions request failed due to ' + status);
    }
}
private currentDate = new Date();

public route(directionsService, transportMode, origin, destination) {
    if(transportMode === 'DRIVING') {
        directionsService.route({
            origin: origin,
            destination: destination,
            travelMode: transportMode,
            drivingOptions: {
                departureTime: new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() + 1, 7, 45),
                trafficModel: 'pessimistic'
            }
        }, this.routeResponse);

The problem I have is in the routeResponse function. I receive an error where the changeDurationTraffic function is called.

"Uncaught TypeError: this.changeDurationTraffic is not a function".

Is there something i am doing wrong? Thanks.

anyone have any ideas? haha. I've attempted to progress by adding a second function to the callback ` drivingOptions: { departureTime: new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() + 1, 7, 45), trafficModel: 'pessimistic' } }, this.routeResponse || this.otherFunction); ` but this other function still cannot access my changeDurationTraffic function. — jand449
– jand449, Commented Apr 13, 2017 at 3:58

Community · Accepted Answer · 2017-05-23 12:17:37Z

2

The this inside that function is not refering to your component because of this method:

public route(directionsService, transportMode, origin, destination) {
    if(transportMode === 'DRIVING') {
        directionsService.route({
            origin: origin,
            destination: destination,
            travelMode: transportMode,
            drivingOptions: {
                departureTime: new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() + 1, 7, 45),
                trafficModel: 'pessimistic'
            }
        }, this.routeResponse); //<-- ****Error here.****

Change that line to

this.routeResponse.bind(this);

Suggested reading: How to access the correct `this` context inside a callback?

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Apr 13, 2017 at 4:40

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 Google Maps Javascript API, Route Service function doesn't exist

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related