Property 'map' is used before its initialization. (Google Maps in Angular)

Question

I am working on implementing google maps in an angular webpage but I am getting this error (The app still works)

Edit: Just to clarify, The map works, the markers also work, I'm just getting the error in my Visual studio code and a method not implemented in my inspection of the webpage(which is an exception by the map not being initialized)

ERROR in src/app/app.component.ts:29:15 - error TS2729: Property 'map' is used before its initialization.

29 map: this.map,
~~~

src/app/app.component.ts:15:3 15 map: google.maps.Map;
~~~ 'map' is declared here. src/app/app.component.ts:36:15 - error TS2729: Property 'map' is used before its initialization.

36 map: this.map,
~~~

src/app/app.component.ts:15:3
15 map: google.maps.Map; ~~~
'map' is declared here.

my app component.ts

    import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
        
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    
    })
    export class AppComponent implements AfterViewInit  {
      title = 'maps-v1';
      @ViewChild('mapContainer', {static: false}) gmap: ElementRef;
      map: google.maps.Map;
      lat = 37.37;
      lng = -122.04;
      coordinates = new google.maps.LatLng(this.lat, this.lng);
    
    
      mapOptions: google.maps.MapOptions = {
        center: this.coordinates,
        zoom: 12,
        gestureHandling:"cooperative",
      };
    
      marker = new google.maps.Marker({
        position: this.coordinates,
        map: this.map,
        title:"Start"
      });
    
      mark2=new google.maps.Marker({
        label: "TEST",
        position:{lat:37.37,lng:-122.03},
        map: this.map,
        title:"TESTERSZ"
    
      });
    
      ngAfterViewInit(){
        this.mapInitializer();
        throw new Error('Method not implemented.');
        
      }
      
    
      mapInitializer() {
        this.map = new google.maps.Map(this.gmap.nativeElement, 
        this.mapOptions);
        this.marker.setMap(this.map);
        this.mark2.setMap(this.map);
    
       }
       
    }

Any help would be appreciated

Answer 1

the error was because the markers object is initialized first before the map is getting initialized in afterViewInit

The solution is to move markers initializations into mapInitializer() and put them after this.map = new google.maps statement.

mapInitializer() {
  this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);

  const marker = new google.maps.Marker({
    position: this.coordinates,
    map: this.map, // this.map will contain the map object here
    title:"Start"
  });

  const mark2 = new google.maps.Marker({
    label: "TEST",
    position:{lat:37.37,lng:-122.03},
    map: this.map,
    title:"TESTERSZ"
  });

  marker.setMap(this.map);
  mark2.setMap(this.map);
}

Answer 2

you must wait for the map to initialize so change it like the following

 mapInitializer() {
    setTimeout(() => {
        this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);
    }, 500);
    this.marker.setMap(this.map);
    this.mark2.setMap(this.map);

 }