Property 'map' does not exist on type - Angular Google Maps project

Question

Im new to angular and trying to make a simple google maps application. I keep getting this error error TS2339: Property 'map' does not exist on type 'AppComponent'

Im trying to access the map attribute but I cant. Perhaps I havent initialised it correctly?

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  title = 'simple-gmaps-demo';
  lat = 51.678418;
  lng = 7.809007;

  onMapReady(map: google.maps.Map) {

    this.map = map;
    this.map.setCenter({lat:-32, lng:127});
    this.map.setZoom(10);
    
    // this.map.data.loadGeoJson('http://localhost:4200/assets/sample-farms.geojson', {}, features => {
    //   console.log(features);
    // });
  }
}

Answer 1

You need to declare property map

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  title = 'simple-gmaps-demo';
  lat = 51.678418;
  lng = 7.809007;
  map: any; // add this line

  onMapReady(map: google.maps.Map) {

    this.map = map;
    this.map.setCenter({lat:-32, lng:127});
    this.map.setZoom(10);
    
    // this.map.data.loadGeoJson('http://localhost:4200/assets/sample-farms.geojson', {}, features => {
    //   console.log(features);
    // });
  }
}

Answer 2

Declare map property in AppComponent below title like :-

map: google.maps.Map;