IONIC 3 google map is ready but nothing showing in the map - google-maps

Question

I am new on ionic and integrating google map one of my app. I have everything installing google map plugin using apikey and writing some code here it is:
#ViewChild('map') mapElement: ElementRef;
map: GoogleMap;
spaArray:any = []
setupLocation(){
this.location = new LatLng(42.346903, -71.135101);
//Add cluster locations
this.locations.push({position: {lat: 42.346903, lng: -71.135101}});
this.locations.push({position: {lat: 42.342525, lng: -71.145943}});
this.locations.push({position: {lat: 42.345792, lng: -71.138167}});
this.locations.push({position: {lat: 42.320684, lng: -71.182951}});
this.locations.push({position: {lat: 42.359076, lng: -71.0645484}});
this.locations.push({position: {lat: 42.36, lng: -71.1}});
}
ionViewDidLoad() {
this.provider.presentLoadingDefault()
this.platform.ready().then(() => {
// let element = this.mapElement.nativeElement;
let element: HTMLElement = document.getElementById(this.mapElement.nativeElement);
this.map = this.googleMaps.create(this.mapElement.nativeElement);
// this.map.clear();
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
this.provider.hideLoader()
let options = {
target: this.location,
zoom: 8
};
this.map.moveCamera(options);
setTimeout(() => {this.addCluster()}, 500);
});
});
}
html is here
<ion-content>
<div #map style="height: 100%" id="map"></div>
</ion-content>
but when I am running the app into my mobile its only showing blank map with google logo bottom of this.
Help me into this please.

Answer 1

Here you have a working example:
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker,
MarkerCluster,
LatLng,
HtmlInfoWindow,
MyLocation
} from '#ionic-native/google-maps';
inside your class:
private mapElement: HTMLElement;
private map: GoogleMap;
inside your platform.ready().then()
this.mapElement = document.getElementById('map');
// DEFINE YOUR OWN MAP SETTINGS
let mapOptions: GoogleMapOptions = {
controls: {
indoorPicker: true
},
gestures: {
rotate: true,
scroll: true,
tilt: true,
zoom: true
},
preferences: {
building: true,
zoom: {
maxZoom: 20,
minZoom: 1
}
}
};
this.map = GoogleMaps.create(this.mapElement, mapOptions);
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
// DO MAP STUFF HERE
});
this should work fine.