Well I did another check with your suggestions and now the app is not just a white screen
Now it has the ion-nav-bar
But where the map should be is just a black screen.
Any ideas?
Well I did another check with your suggestions and now the app is not just a white screen
Now it has the ion-nav-bar
But where the map should be is just a black screen.
Any ideas?
2.also check that you are using IOS sdk API key, javascript api key wont work
3.try to uninstal plugin and install it again
Well i guess I found out what the issue is, sort of.
Finnally got a white screen again but with the nav bar.
And on the console i do see the Map is ready! log.
And on the Google Console, i do get the request.
So the map is loading somewhere.
So with the safari inspect i look at the propertys.
and well trying to figure out i unchecked a css property and puff the maps showed!
I thought it was a particular property, but it seemed to work with any property I uncheck,
even if it was not from the map div
The map is there, but it seems like the css has a white screen in front, or it dosnt load correctly.
I’ve try with this two hacks i found on github
ion-nav.has-views {
background-color: transparent !important;
}
ion-app.gmaps_cdv .nav-decor{
background-color: transparent !important;
}
But none seems to solve the problem, even tried this
ionViewWillEnter(): void {
document.getElementsByClassName(‘nav-decor’)[2].className += ’ hide’;
document.getElementsByClassName(‘nav-decor’)[3].className += ’ hide’;
}
ionViewWillLeave(): void {
document.getElementsByClassName(‘nav-decor’)[2].className = ‘nav-decor’;
document.getElementsByClassName(‘nav-decor’)[3].className = ‘nav-decor’;
}
Found in here 'nav-decor' hides GoogleMap · Issue #7205 · ionic-team/ionic-framework · GitHub
But it just seem is a too old fix.
Any ideas?
I think it might be opacity.
This is my css, works for Javascript API and Android native plugin, didn’t test on IOS. Some of it may be old artifacts from previous tries
#map_canvas {
width: 100%;
height: 100%;
transition: opacity 150ms ease-in
}
#map_canvas.show-map {
opacity: 1;
}
ion-app._gmaps_cdv_ .nav-decor{
background-color: transparent !important;
}
.show-map {
opacity: 1;
}
See my basic Google Map component here: https://github.com/ihadeed/ionic-native-playground/blob/master/src/components/google-map/google-map.ts
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!
Try using the code from your project
But it doesn’t run, I just get a big white screen.
Did you install the plugin correctly with a valid API key?
Yes, I used the same installation I allready have that is working like in here Google Maps Native not Working
And copy your page and component code
And set the app component to use your page as root.
And I only get this.
And Import the page and Component on App Module
app.module.ts
@NgModule({
declarations: [
MyApp,
HomePage,
GoogleMapComponent,
GoogleMapsPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
GoogleMapsPage
],
providers: [
GoogleMaps,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
google-maps.ts
import { Component } from '@angular/core';
@Component({
selector: 'page-google-maps',
templateUrl: 'google-maps.html'
})
export class GoogleMapsPage {
onMapClick(e) {
console.log('map was clicked', e);
}
onMapReady(e) {
console.log('map is ready', e);
}
}
google-maps.html
<ion-header>
<ion-navbar color="primary">
<ion-title>Google Maps</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<google-map (mapClick)="onMapClick($event)" (mapReady)="onMapReady(e)"></google-map>
</ion-content>
google-map.ts
@Component({
selector: 'google-map',
template: ''
})
export class GoogleMapComponent implements OnInit {
private mapContainer: HTMLElement;
map: GoogleMap;
private isInit: boolean = false;
_height: string = '100%';
@Input()
set height(val: string) {
this._height = val;
this.isInit && this.setHeight();
}
get height(): string {
return this._height;
}
_width: string = '100%';
@Input()
set width(val: string) {
this._width = val;
this.isInit && this.setWidth();
}
get width() {
return this._width;
}
@Output()
mapClick: EventEmitter<any> = new EventEmitter<any>();
@Output()
mapReady: EventEmitter<GoogleMap> = new EventEmitter<GoogleMap>();
constructor(
private platform: Platform,
private renderer: Renderer,
private el: ElementRef,
private googleMaps: GoogleMaps
) {
this.mapContainer = el.nativeElement;
}
ngOnInit() {
this.setupContainer();
this.platform.ready()
.then(() => {
this.map = this.googleMaps.create(this.mapContainer);
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
this.mapReady.emit(this.map);
this.isInit = true;
});
this.map.on(GoogleMapsEvent.MAP_CLICK)
.subscribe(data => this.mapClick.emit(data));
});
}
ngOnDestroy() {
this.map.remove();
}
private setupContainer() {
this.setWidth();
this.setHeight();
// set display block
this.renderer.setElementStyle(this.mapContainer, 'z-index', '1000');
this.renderer.setElementStyle(this.mapContainer, 'display', 'block');
}
private setWidth() {
this.renderer.setElementStyle(this.mapContainer, 'width', this._width);
}
private setHeight() {
this.renderer.setElementStyle(this.mapContainer, 'height', this._height);
}
}
I Just upload the code here
So it’s easer to check.
Still not able to run ionic native google maps on iOS.
Can’t see what’s wrong with it.
Instead of setting that page as your root page, try pushing it through HomePage
's NavController.
It is possible that the map is initializing before the view is ready (since I have ngOnInit
instead of ngAfterViewInit
).
I did what you ask me.
And now it works! and is just exactly what I Need.
thanks for the support!
Is this implemented in your repository as I would like to try this out, I’m also having issues getting this working.
Thanks
Hi,
I have problems loading the map, I do not know if it will be the same. But when loading. It does so in the following way:
I need help
Thanks, thanks
I have the same problem, help me!
Hello, I solved the problem by creating an api key for android and not for web, I hope I have helped
what process u did ?
If you are still struggling with an blank google map on iOS devices and emulators. Go into your config.xml file.
And between the iOS platform tag
<platform name="ios">
</platform>
Add this:
<!-- Allow images, xhrs, etc. to google.com -->
<access origin="http://google.com" />
<access origin="https://google.com" />
<!-- Access to the subdomain maps.google.com -->
<access origin="http://maps.google.com" />
<!-- Access to all the subdomains on google.com -->
<access origin="http://*.google.com" />
<!-- Enable requests to content: URLs -->
<access origin="content:///*" />
<!-- Don't block any requests -->
<access origin="*" />
Its from the Cordova whitelist plugin documentation
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/
It enables your application to retrieve information from Google Maps domains using the Google Maps JavaScript SDK or otherwise. This had me stumped for a good awhile and hopefully this ends the frustrations for some.