I have installed Ionic Native Google Maps plugin on my Ionic 4 app. Here is some information:
"@ionic-native/google-maps": "^5.5.0",
"cordova-plugin-googlemaps": "^2.6.2",
...
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": (my api key),
"API_KEY_FOR_IOS": (my api key),
"PLAY_SERVICES_VERSION": "15.0.1",
"ANDROID_SUPPORT_V4_VERSION": "27.+",
"LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
"LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
}
and here is my implementation:
config.xml
<widget>
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value='(my api key)' />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value='(my api key)' />
</widget>
page.ts
<ion-content color="background">
<ion-grid>
<ion-row>
<ion-col size="12">
<div id="map_canvas"></div>
</ion-col>
</ion-row>
<ion-grid>
<ion-content>
page.scss
#map_canvas {
min-height: 300px;
height: 100%;
padding-left: 15px;
padding-right: 15px;
border: 0.5px solid rgba(104, 112, 137, 0.5);
}
page.ts
import { GoogleMap, GoogleMaps, Environment } from '@ionic-native/google-maps/ngx';
export class Page implements OnInit {
map: GoogleMap;
constructor() { }
ngOnInit() {
this.platform.ready().then(() => this.loadMap());
}
loadMap() {
Environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': (my api key),
'API_KEY_FOR_BROWSER_DEBUG': (my api key),
});
this.map = GoogleMaps.create('map_canvas');
}
}
But the map cannot be shown properly like:
It’s empty!
What can I do? My device is Android 10. Thank you.
ionic info
Ionic:
Ionic CLI : 5.4.13
Ionic Framework : @ionic/angular 4.11.7
@angular-devkit/build-angular : 0.803.21
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, browser 6.0.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 10 other plugins)
Utility:
cordova-res : 0.8.1
native-run : 0.3.0
System:
Android SDK Tools : 26.1.1
NodeJS : v10.16.3
npm : 6.9.0
OS : Windows 10