Having difficulty updating an angular variable within a callback function

Question

Having difficulty updating an angular variable within a callback function

Currently, I am utilizing the Google Maps directions service to determine the estimated travel time.

this.mapsAPILoader.load().then(() => {
  const p1 = new google.maps.LatLng(50.926217, 5.342043);
  const p2 = new google.maps.LatLng(50.940525, 5.353626);

  const directionsService = new google.maps.DirectionsService();
  const request = {
    origin: p1,
    destination: p2,
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
  };

  directionsService.route(request, (response, status) => {

    if (status === google.maps.DirectionsStatus.OK) {
      const point = response.routes[0].legs[0];
      // console.log(point.duration.text);
      this.travelTimeDriving = point.duration.text;
    }
  });


});

While the console is displaying the accurate driving time duration, my variable `this.travelTimeDriving` remains empty.
I suspect that this issue is related to the callback function and scope, but unfortunately, I am unable to resolve it.
Moreover, since the route function does not return a promise, I am unable to utilize `.then()` for handling.

javascript angular google-maps typescript directions

Answer 1

Answer №1

Utilize NgZone for ensuring that the callback is properly bound to the scope. See below for a functioning example:

import { Component, OnInit, NgZone } from '@angular/core';
declare const google: any;

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

  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    let mapProp = {
        center: new google.maps.LatLng(51.508742, -0.120850),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    let map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    const p1 = new google.maps.LatLng(50.926217, 5.342043);
    const p2 = new google.maps.LatLng(50.940525, 5.353626);

    const directionsService = new google.maps.DirectionsService();
    const request = {
      origin: p1,
      destination: p2,
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC,
    };

    directionsService.route(request, (response, status) => this.ngZone.run(() => {

      if (status === google.maps.DirectionsStatus.OK) {
        const point = response.routes[0].legs[0];
        this.travelTimeDriving = point.duration.text;
      }
    }));
  }
}

Answer 2

Utilize NgZone for ensuring that the callback is properly bound to the scope. See below for a functioning example:

import { Component, OnInit, NgZone } from '@angular/core';
declare const google: any;

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

  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    let mapProp = {
        center: new google.maps.LatLng(51.508742, -0.120850),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    let map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    const p1 = new google.maps.LatLng(50.926217, 5.342043);
    const p2 = new google.maps.LatLng(50.940525, 5.353626);

    const directionsService = new google.maps.DirectionsService();
    const request = {
      origin: p1,
      destination: p2,
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC,
    };

    directionsService.route(request, (response, status) => this.ngZone.run(() => {

      if (status === google.maps.DirectionsStatus.OK) {
        const point = response.routes[0].legs[0];
        this.travelTimeDriving = point.duration.text;
      }
    }));
  }
}

Answer 3

Answer №2

It appears that the scope may not be what you were expecting. In most editors/IDEs, this would result in an error when trying to reference

this.travelTimeDriving = point.duration.text;

If your scope is incorrect or the variable is not declared where you expect it to be, then you might need to check if the variable is declared in the class members of the function being called.

A quick way to troubleshoot this is by logging the value right after setting it to see the result.

 if (status === google.maps.DirectionsStatus.OK) {
  const point = response.routes[0].legs[0];
  // console.log(point.duration.text);
  this.travelTimeDriving = point.duration.text;
  console.log(this.travelTimeDriving);
}

To better understand the scope at that point, consider using console.log or setting a breakpoint to inspect the value.

If you can provide more context by sharing surrounding code, it will make it easier to assist you further.

Answer 4

It appears that the scope may not be what you were expecting. In most editors/IDEs, this would result in an error when trying to reference

this.travelTimeDriving = point.duration.text;

If your scope is incorrect or the variable is not declared where you expect it to be, then you might need to check if the variable is declared in the class members of the function being called.

A quick way to troubleshoot this is by logging the value right after setting it to see the result.

 if (status === google.maps.DirectionsStatus.OK) {
  const point = response.routes[0].legs[0];
  // console.log(point.duration.text);
  this.travelTimeDriving = point.duration.text;
  console.log(this.travelTimeDriving);
}

To better understand the scope at that point, consider using console.log or setting a breakpoint to inspect the value.

If you can provide more context by sharing surrounding code, it will make it easier to assist you further.

Having difficulty updating an angular variable within a callback function

Answer №1

Answer №2

Similar questions

Sharing environment variables in gulpfile with other JavaScript files outside NODE_ENV

Link AngularJS service array length property to the controller's scope through binding

AngularJS is experiencing issues with the sorting filter 'orderBy'

Creating dynamic keys to insert objects

What is the reason behind JavaScript's restriction on using double comparison operators?

retrieve data properties from an object

Utilizing Google Analytics 4 in a React TypeScript Environment

Adjust the size of the div to fit its content while maintaining the transition animation

Is it possible to have two different actions with two submit buttons in PHP?

Error when spaces are present in the formatted JSON result within the link parameter of the 'load' function in JQuery

Transform a string into a boolean value for a checkbox

How can an Angular Component be created in the browser using the standard method?

Discover the array of results by implementing a while loop in JavaScript

What is the best approach for presenting MySQL data on an HTML div through Node.js?

Having issues installing Parcel through npm - Encountered an error while parsing package.json information

Looking for a method to substitute "test" with a different value

The process of upgrading all dependencies to a particular version

Troubleshooting: Android compatibility issue with Angular Capacitor iframe

What is the best way to ensure my button displays the complete description of a single country after showcasing all the countries?

Make sure to verify if all values are contained within an array by utilizing JavaScript or TypeScript