I can't able to view google maps in ionic 3?

Asked Feb 09 '21 at 07:34

Active Feb 09 '21 at 07:37

Viewed 32 times

I'm trying to show google maps in ionic 3 page but can't able to view it, I'm getting this error

TypeError: Cannot read property 'nativeElement' of undefined

HTML:

<ion-col col-12>
  <div #map id="map_active"></div>
</ion-col>

TS:

@ViewChild('map1') mapElement:ElementRef;

  loadMap(){
   //alert('hi');
    let latLng = new google.maps.LatLng(-34.9290, 138.6010);
  
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

  }

edited Feb 09 '21 at 07:37

Suraj Rao

28,850
10
94
99

asked Feb 09 '21 at 07:34

harish

where is `loadMap` called? – Suraj Rao Feb 09 '21 at 07:38
@Suraj RAO I called loadmap function inside the constructor. – harish Feb 09 '21 at 07:41
1

This should help https://stackoverflow.com/a/60230574/4826457. Try calling loadMap in ngAfterViewInit – Suraj Rao Feb 09 '21 at 07:43
I called on ngAfterViewInit but still getting the same error . – harish Feb 09 '21 at 08:37
I also dont see a 'map1' in your html – Suraj Rao Feb 09 '21 at 08:43
yeah my bad, and now it worked thanks @SurajRao. – harish Feb 09 '21 at 09:21

I can't able to view google maps in ionic 3?

0 Answers0