Google map is not working

Ionic Native
1

I was testing in my mobile. no error found. white screen shows.
i used “ionic cordova run android --device --livereload -c --address 192.168.0.103”

ts file

import {GoogleMaps,GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker} from '@ionic-native/google-maps';
export class Login {
 map: GoogleMap;
constructor(
  public googleMaps: GoogleMaps
)
	loadMap() {
		let mapOptions: GoogleMapOptions = {
		  camera: {
			 target: {
			   lat: 43.0741904,
			   lng: -89.3809802
			 },
			 zoom: 18,
			 tilt: 30
		   }
		};

		this.map = GoogleMaps.create('map_canvas', mapOptions);

		let marker: Marker = this.map.addMarkerSync({
		  title: 'Ionic',
		  icon: 'blue',
		  animation: 'DROP',
		  position: {
			lat: 43.0741904,
			lng: -89.3809802
		  }
		});
		marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
		  alert('clicked');
		});
	}
	ionViewDidLoad(){
		this.loadMap();
	}
}

html file

<div id="map_canvas"></div>

style file

#map_canvas {
height: 100%;
}

google api

Untitled

2

Do you execute the loadMap() after platform.ready()?

3

Yes. same white screen

4

i have written code in constructor. is this right?

this.platform.ready().then(() => {
		  this.loadMap();
		});
5

Ok, confirm the native log using logcat command.
If the api key authentication is failed, there should be some message.

Even if you can’t solve the problem by yourself, please share your project files on GitHub.

6

You might have taken care of it, just on a note, have you given sufficient height for the map div ?

7 
#map_canvas {
height: 100%;
}
11

when i run( ionic cordova run android --device ) in android device then gogole map does not show. only show white screen.
when i build apk file and run apk file then google map is working.
Is it possible to run android device?

12

run ionic cordova run android --prod
It should work on device
As its a google native sdk plugin, map will not show in browser too

13

ionic cordova run android --prod not working for me

14

can you share me the error ?

15

only white screen. no error found.

16

How do write
let latlng: LatLng = new LatLng(30.068544, 31.349004);// shows LatLng error
instead of below code

let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      icon: 'blue',
      animation: 'BOUNCE',
      position: {lat: ..., lng: ...}
    });
17

As I said, if you can’t solve the problems by yourself, please share your project files on GitHub. I’m busy. I don’t want to spend my limited private time without reproduce project files.

18

i found solution here for ionic4 google map.