Reverse geocoding in angular google maps

Question

getAddress( lat: number, lng: number ) {
    console.log('Finding Address');
    if (navigator.geolocation) {
      let geocoder = new google.maps.Geocoder();
      let latlng = new google.maps.LatLng(lat, lng);
      let request = { latLng: latlng };
      geocoder.geocode(request, (results, status) => {
        if (status === google.maps.GeocoderStatus.OK) {
          let result = results[0];
          let rsltAdrComponent = result.address_components;
          let resultLength = rsltAdrComponent.length;
          if (result != null) {
            this.address = rsltAdrComponent[resultLength - 8].short_name;
          } else {
            alert('No address available!');
          }
        }
      });
  }
  }

I am trying to use reverse geocoding in my angular 4 application. I am using agm for integrating google map with the angular app.

Declared google variable in *.ts as follows

declare let google: any;

But when I am using I am getting the error as follows,

ERROR ReferenceError: google is not defined

Please help me to resolve the issue.

Here is the component.ts

declare let google: any;
@Component({
  selector: 'app-find-cycle',
  templateUrl: './cmp.component.html',
  styleUrls: ['./cmp.component.scss']
})

export class Cmp {
}

Hope you have declared declare let google: any; above component decorator? — Franklin Pious
– Franklin Pious, Commented May 10, 2018 at 11:45
you need to use the map loaded function, and call getAddress() in there, google is not loaded before — Ruben
– Ruben, Commented May 10, 2018 at 12:04

Ruben · Accepted Answer · 2018-05-10 12:08:33Z

6

execute getAddress() after the map is loaded:

<agm-map (mapReady)="mapReady()" [latitude]="lat" [longitude]="lng" [zoom]="zoom" [styles]="styles">

mapReady() {
    this.getAddress(...);
}

or add private mapsAPILoader: MapsAPILoader, to your constructor do this

 this.mapsAPILoader.load().then(() => { ... });

answered May 10, 2018 at 12:08

Ruben

9,28415 gold badges71 silver badges104 bronze badges

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

1 Comment

Anil Over a year ago

Thanks, I got it. I was missing the loading of agm-map into my component.

Collectives™ on Stack Overflow

Reverse geocoding in angular google maps

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related