Google Map : Cannot read property 'nativeElement' of undefined


I get this error when I’m trying to load google map on the first screen of my App. “Cannot read property ‘nativeElement’ of undefined”

Below the code I’m using

Blockquotedeclare var google: any;

export class AlertMainFeedPage implements OnInit {

map: any;

@ViewChild(‘map’, {read: ElementRef, static: false}) mapRef: ElementRef;

private geolocation: Geolocation




ngOnInit() {



showMap() {

const location = new google.maps.LatLng(46.2043907, 6.1431577);
const options = {
center : location,
zoom : 15,
disableDefaultUI: true
} = new google.maps.Map(this.mapRef.nativeElement, options);





It’s strange because when I go to an another page, the same code is working. It’s just not working on the first page?!?!

Many thanks for your help

I found the solution.

I replace : @ViewChild(‘map’, {read: ElementRef, static: false}) mapRef: ElementRef;

by : @ViewChild(‘map’, {static: true}) mapElement: ElementRef;

All is working well :slight_smile:

1 Like