Google Maps is not showing: Ionic V3

Ionic Native
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();
    });
}
1 Like
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:

image
image.png904×206 27 KB

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

2 Likes
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.