Google Maps is not showing: Ionic V3

#1

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

.home.ts

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';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

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

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

    
  addMarker(){

  
      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');
      });
    }
  }
  


.home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>


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

#2

Try adding some css

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

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

#4

Yes, this works for me. Keep updating

#5

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


onViewDidLoad() {
    this.platform.ready().then(() => {
        this.loadMap();
    });
}
#6

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

#7

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';

#8

how can I check the version of these packages?

#9

check in package.json

#10

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",
#11

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:

#12

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

#13

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

#14

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

#16

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

#17

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

#18

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

#19

Can I have the installation commands please?

#20
"@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",

becomes

"@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

#21

I have what you said but always the same result.