Google Maps is not showing: Ionic V3

Hi everyone I used the Google Maps API, but when I launch my app using the android studio emulator, nothing is displayed.
Thank you for helping me and happy new year 2019


import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

// Native components
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions, Marker, GoogleMapOptions }
 from '@ionic-native/google-maps';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  constructor(public navCtrl: NavController, private googleMaps: GoogleMaps, public platform: Platform) {

    ionViewDidLoad() {
    loadMap() {
      let mapOptions: GoogleMapOptions = {
        camera: {
           target: {
             lat: 43.0741904,
             lng: -89.3809802
           zoom: 18,
           tilt: 30
      }; = GoogleMaps.create('map_canvas', mapOptions);


      let marker: Marker ={
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: {
          lat: 43.0741904,
          lng: -89.3809802
      marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {


      Ionic Blank

  <button {click}="addMarker()" ion-button block></button>
  <p>Hello everybody</p>
  <div id="map_canvas">

Try adding some css

#map_canvas {
    height: 500px; //or any height

Thank you but the problem is always the same. The screen is still white.

Yes, this works for me. Keep updating

you could also try wrapping your ionic-native logic in platform.ready():

onViewDidLoad() {
    this.platform.ready().then(() => {
1 Like

thank you once again but the result is the same. the blank screen

are you using 4.x.x for the ionic native packages or the 5.0.0 betas?
if its the latter, your import must be from '@ionic-native/google-maps/ngx';

how can I check the version of these packages?

check in package.json

The version of the native packages is in version 4

  "@ionic-native/core": "^4.18.0",
    "@ionic-native/google-maps": "^4.15.1",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",

have you got any debug links from the emulator or the run command?
I would also try to add #map_canvas to the div and not only id.

have you also added the plugin with API keys like written in the description:

you could also try out the ionic google maps demo:

yes I added the plugin with the API keys as shown in the picture below

from ionic-team/ion-native-google-maps changelog:

judging from this information, you could try downgrading @ionic-native/core version to 4.16.0

Alternatively, you could try upgrading to the 5.x.x packages


how can i update packages to have version 5.xx?

Upon further investigation, it looks like you have to downgrade actually

Ionic v3 only supports up to Angular 5.x.x and typescript up to 2.x.x
@ionic-native requires Angular 7.1.x and typescript 3.1.x

it becomes complicated. What proposal do you make for me to solve this problem definitely?

try downgrading all of your @ionic-native package versions to 4.15.0 and reinstall npm

Can I have the installation commands please?

"@ionic-native/core": "^4.18.0",
"@ionic-native/google-maps": "^4.15.1",
"@ionic-native/splash-screen": "~4.17.0",
"@ionic-native/status-bar": "~4.17.0",


"@ionic-native/core": "4.15.0",
"@ionic-native/google-maps": "^4.15.1",
"@ionic-native/splash-screen": "4.15.0",
"@ionic-native/status-bar": "4.15.0",

Then delete the project node_modules folder and run
$ npm install from the project root

I have what you said but always the same result.