Google Maps Ionic Native show blank page in android and ios - ionic-framework

Question

I am new with ionic, I'm trying to integrate a google map in my application with ionic-native-googlemaps. In my browser it works fine but when I build for android or ios I have a blank page, and if I look at the console of google chrome at url chrome://inspect/device I don't have an error.
This is my typescript file
import {AfterViewInit, Component, OnInit} from '#angular/core';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
MarkerOptions,
Marker,
Environment, LatLng, GoogleMapOptions
} from '#ionic-native/google-maps/ngx';
import { ActionSheetController, Platform, AlertController } from '#ionic/angular';
#Component({
selector: 'app-favoris',
templateUrl: './favoris.component.html',
styleUrls: ['./favoris.component.scss'],
})
export class FavorisComponent implements OnInit, AfterViewInit {
map: GoogleMap;
constructor(
public alertController: AlertController,
public actionCtrl: ActionSheetController,
private platform: Platform
) {
}
ngOnInit() {
// await this.platform.ready();
// await this.loadMap();
}
ngAfterViewInit() {
this.platform.ready().then( () => {
this.loadMap();
});
}
loadMap() {
const map = GoogleMaps.create('map');
map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {
const coordinates: LatLng = new LatLng( 45.649864, -73.584213 );
const position = {
target: coordinates,
zoom: 14
};
map.animateCamera( position );
const markerOptions: MarkerOptions = {
position: coordinates,
// icon: "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png",
title: 'Hello California',
draggable: true
};
const marker = map.addMarker( markerOptions )
.then( ( markesr: Marker ) => {
markesr.showInfoWindow();
});
});
}
}
And in my html file I have
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>List</ion-title>
</ion-toolbar>
<ion-toolbar class="new-background-color">
<ion-title class="text-center text-white">Favoris</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div id="map" style="height:100%;"></div>
</ion-content>
</ion-app>
I have searched for a solution everywhere but I have not found anything.

Answer 1

finaly i solve my problem, if someone have a same problem later,
just downgrade a version ionic-google maps and ionic core like this
"#ionic-native/core": "^5.24.0",
"#ionic-native/google-maps": "^5.0.0-beta.20",
After that look if your div with who contains google if is have a 500px height or more if it's ok, your map workly fine and you need to paid google map too.

Answer 2

you don't have to downgrade googleMap .
there is two way to solve this problem :
First you can put the tag DIV outside ion-content
<div id="map" style="height:100%;"></div>
<ion-content>
</ion-content>
OR you can add style css to put the content background transparant to overlaye the map screen.

Answer 3

In my case it was showing right on Android but no IOS. API key was ok. The map was there, under the html, but ion-content was not transparent.
Try adding this to your global scss or css file.
._gmap_cdv_ {
--background: transparent !important;
}

Answer 4

For iOS and Chrome, if your application has 'location' function. Apple is serious about location security aspect and Google Chrome is also somewhat serious about it. Hence:
Step 1. In your Mac enable 'Location Services' under 'Security and Privacy' :
Navigate to 'Settings'=>'Security & Privacy'=>Privacy Tab=>Select
Location Services ; click the padlock to make changes=>make sure
checkbox is checked for Google Chrome
Step 2. In Google Chrome go
to Settings=>privacy & Security=>make sure localhost:8100 is in the
'allowed' list=>click on it and on the next tab 'Reset permissions'
and select 'Allow' in the drop-down box for location property.
That should do it.