Type Error of Geocoder undefined in Angular

Question

My Geocoder in my Angular project is crashing because it is undefined. I tried this: Getting 'Uncaught TypeError: Cannot read property 'geocode' of undefined ' error

But it doesn't work if I initialize it first or assign it. Both do not work.

My code, error in the first line:

private geoCoder = new google.maps.Geocoder();

  @ViewChild('search', { static: false })
  public searchElementRef: ElementRef;

  constructor(private maps: MapsAPILoader, private ngZone: NgZone){ }

  ngOnInit() {
    // Load places autocomplete
    this.maps.load().then(() => {
      this.setCurrentLocation();

      let autocomplete = new google.place.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"]
      });

      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          // Get the place result
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          // Verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          // Set latitude, longitude & zoom
          this.userLat = place.geometry.location.lat();
          this.userLng = place.geometry.location.lng();
          this.zoom = 12;
        });
      });
    });
  }

  // Get Current Location Coordinates
  private setCurrentLocation() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.userLat = position.coords.latitude;
        this.userLng = position.coords.longitude;
        this.zoom = 15;
      });
    }
  }

getaddress(latitude, longitude) {
    this.geoCoder.geocode({ "location": { lat: latitude, lng: longitude } }, (results, status) => {
      console.log(results);
      console.log(status);

      if (status === "Ok") {
        if (results[0]) {
          this.zoom = 12;
          this.address = results[0].formatted_address;
        } else {
          window.alert("No results found.");
        }
      } else {
        window.alert("Something went wrong, please try again.");
      }
    });
  }

From (scroll down to Add Location/Places Search bar):

https://www.freakyjolly.com/angular-7-6-add-google-maps-in-angular-2-plus-applications-using-angular-google-maps-module-agm-core-easily/

How do you prevent the crash? Thanks!

EDIT: Fixed: https://stackblitz.com/edit/angular-rhbjrx

Answer 1

You need to make sure you have the correct import statement and using the correct library.

As Geocoder is not defined in @agm, but it is defined in @types/googlemaps and you need to download it if you do not have it: npm install --save @types/googlemaps.

Use this import statement: import { } from 'googlemaps'; after you made this file, index.d.ts in your src folder or root one, and declared inside it this:

index.d.ts

declare module "googlemaps";

And make sure you put brackets with your Geocoder: Geocoder().

This should fix the problem, as it did for me.

See https://stackblitz.com/edit/angular-rhbjrx