Reverse geocoding using Angular

Question

I am using reverse geocoding in Angular app.

The needed script is added in index.html

<script async defer src="https://maps.googleapis.com/maps/api/js">
</scrip>

and the component file looks like this

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

export class MapComponent {

  lat;
  lng;
  address;

  constructor() {
    this.locate();
  }

  public locate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          this.lat = position.coords.latitude; // Works fine
          this.lng = position.coords.longitude;  // Works fine

          let geocoder = new google.maps.Geocoder();
          let latlng = new google.maps.LatLng(this.lat, this.lng);
          let request = {
            latLng: latlng
          };

          geocoder.geocode(request, (results, status) => {
            if (status == google.maps.GeocoderStatus.OK) {
              if (results[0] != null) {
                this.address = results[0].formatted_address;  //<<<=== DOES NOT WORK, when I output this {{ address }} in the html, it's empty
                console.log(this.address);  //<<<=== BUT here it Prints the correct value to the console !!!
              } else {
                alert("No address available");
              }
            }
          });
        },
        error => {
          console.log("Error code: " + error.code + "<br /> Error message: " + error.message);
        }
      );
    }
  }
}

and in the component html file, It's supposed to output the address

<div>{{ lat }}</div>        // Works fine
<div>{{ lng }}</div>        // Works fine 
<div>{{ address }}</div>    // Deosn't Work, EMPTY

but it's always empty, however this line

console.log(this.address);

printed the correct value.

Thanks, your code helped me kick start my geocoder!

Henry
– Henry

2020-12-05 16:52:43 +00:00
Commented Dec 5, 2020 at 16:52 — Henry
– Henry, Commented Dec 5, 2020 at 16:52

Lazar Ljubenović · Accepted Answer · 2017-12-17 08:46:58Z

3

There are two possibilities that I see here but cannot confirm without a reproduction, so I'll list them both.

1) You're not in Angular's zone

The code which changes the variable for displaying is not being executed inside Angular's zone. This tends to happen when using callbacks from third party libraries like you're doing here.

To fix, inject the NgZone and wrap any changes you want to see reflected in the UI with this.ngZone.run, like in the following snippet.

constructor(private ngZone: NgZone) {}

locate() {
  /* ... */
      this.ngZone.run(() => {
        this.location = results[0].formatted_address
      })
  /* ... */
}

2) Wrong `this`

Somewhere along the way, you've lost the this which points to class instance, and you're instead writing the result into something else. You console.log works because that's also logging the wrong this, and Angular shows nothing because the actual property was not changed.

answered Dec 17, 2017 at 8:46

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

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

2 Comments

M.J Over a year ago

You saved my life :)

Anil Over a year ago

@M.J, for me it is showing an error as follows ERROR ReferenceError: google is not defined

user2030471 · Accepted Answer · 2017-12-17 09:07:15Z

0

Your component may not have been initialized when you're setting this.location as Angular doesn't control when the constructor will be called.

You should try placing locate call in ngOnInit which guarantees that your component is ready to display data bound properties:

ngOnInit() {
  this.locate();
}

answered Dec 17, 2017 at 9:07

user2030471

2 Comments

yurzui Over a year ago

You're not in Angular's zone is correct answer here

M.J Over a year ago

Thank you, I tried placing the call in ngOnInit and it didn't work, but the ngZone solved the issue.

Collectives™ on Stack Overflow

Reverse geocoding using Angular

2 Answers 2

1) You're not in Angular's zone

2) Wrong `this`

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1) You're not in Angular's zone

2) Wrong this

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

2) Wrong `this`