angulartypescriptagm

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


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);
    // });
  }
}

Solution

  • 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);
        // });
      }
    }