ionic 4 map working in browser but not in Andriod Device - google-maps

Question

I tried with ionic cordova run browser -l and maps loads just fine. it loads a white screen and no error is thrown in the console. Also, tried to build apk and white screen comes up on mobile device. how i can fix this issue. please help me.
src/app/package.json (directory)
"cordova": {
"plugins": {
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "MY_API_KEY"
},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"browser",
"android"
]
}
src/app/config.xml (directory)
<widget>
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="MY_API_KEY" />
</widget>
src/app/home/home.page.hml (directory)
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h3>google map</h3>
<div id="map_canvas">
<button ion-button (click)="onButtonClick($event)">Demo</button>
</div>
</ion-content>
src/app/home/home.page.ts (directory)
import {
ToastController,
Platform
} from '#ionic/angular';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
Marker,
GoogleMapsAnimation,
MyLocation
} from '#ionic-native/google-maps';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
map: GoogleMap;
address:string;
constructor(public toastCtrl: ToastController,
private platform: Platform) {}
ngOnInit() {
// Since ngOnInit() is executed before `deviceready` event,
// you have to wait the event.
this.platform.ready();
}
onButtonClick()
{
this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas', {
// camera: {
// target: {
// lat: 43.0741704,
// lng: -89.3809802
// },
// zoom: 18,
// tilt: 30
// }
});
this.goToMyLocation();
}
goToMyLocation(){
this.map.clear();
// Get the location of you
this.map.getMyLocation().then((location: MyLocation) => {
console.log(JSON.stringify(location, null ,2));
// Move the map camera to the location with animation
this.map.animateCamera({
target: location.latLng,
zoom: 17,
duration: 5000
});
//add a marker
let marker: Marker = this.map.addMarkerSync({
title: '#ionic-native/google-maps plugin!',
snippet: 'This plugin is awesome!',
position: location.latLng,
animation: GoogleMapsAnimation.BOUNCE
});
//show the infoWindow
marker.showInfoWindow();
//If clicked it, display the alert
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
this.showToast('clicked!');
});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(
(data) => {
console.log("Click MAP",data);
}
);
})
.catch(err => {
//this.loading.dismiss();
this.showToast(err.error_message);
});
}
async showToast(message: string) {
let toast = await this.toastCtrl.create({
message: message,
duration: 2000,
position: 'middle'
});
toast.present();
}
}

Answer 1

Tip for next time, give links to the packages you're using to reduce the effort it takes people to help you.
It looks like you're using the Ionic Native google maps plugin.
Looking in their docs I can see some differences with your code:
https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/README.md
For example you are loading the map on a button click instead in the ionviewdidload event.
You're this.platform.ready() is not doing anything. It returns a promise so you could do something like ``this.platform.ready().then({ /* some code that waits for platform */ })` but the code you have just runs and goes straight onwards.
I'm wondering where you have got the code you've used so far? Is it some tutorial that you have followed? Please post the url if so - to compare if you've done anything wrong.
I'm seeing you defining API_KEY_FOR_ANDROID in your snippets above but that appears to be for an earlier release of the cordova plugin.
I suspect you have made a mess of things and would probably do better starting again with an up to date tutorial.