Try This and no luck.
Well now I still on this point
app.scss
ion-nav.has-views {
background-color: transparent !important;
}
home.scss
ion-app._gmaps_cdv_ .nav-decor{
background-color: transparent !important;
}
page-home {
#map {
height: 100%;
}
}
home.ts
constructor(public navCtrl: NavController,
private googleMaps: GoogleMaps,
private platform: Platform) {
platform.ready().then(()=>{
console.log("PLATFORM READY!");
this.loadMap();
});
}
loadMap() {
// make sure to create following structure in your view.html file
// and add a height (for example 100%) to it, else the map won't be visible
// <ion-content>
// <div #map id="map" style="height:100%;"></div>
// </ion-content>
// create a new map by passing HTMLElement
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = this.googleMaps.create(element);
// listen to MAP_READY event
// You must wait for this event to fire before adding something to the map or modifying it in anyway
map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
console.log('Map is ready!');
// create LatLng object
let ionic: LatLng = new LatLng(43.0741904, -89.3809802);
// create CameraPosition
let position: CameraPosition = {
target: ionic,
zoom: 18,
tilt: 30
};
// move the map's camera to position
map.moveCamera(position);
// create new marker
let markerOptions: MarkerOptions = {
position: ionic,
title: 'Ionic'
};
map.addMarker(markerOptions)
.then((marker: Marker) => {
marker.showInfoWindow();
});
});
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div id="map"></div>
</ion-content>
I Got a White Screen
And if i go to Safari Inspector and uncheck any CSS Propertys the map shows!
Unchecked any property and the map shows!
