Ionic 2 & Google Maps native implementation

Ionic Framework ionic-v3
1

Hi everyone,

I’m using the google map native implementation using:
ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID=“ANDROID_KEY” --variable API_KEY_FOR_IOS=“IOS_KEY”

// map.ts
export class MapPage {
    map: GoogleMap;
    constructor(public navCtrl: NavController, public platform: Platform) {
        platform.ready().then(() => {
          this.loadMap();
        });
    }
    loadMap(){
        this.map = new GoogleMap('map');
    }
}

// map.html
<ion-content>
  <div id="map"></div>
</ion-content>

// map.scss
ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}
#map{
  height: 100%;
}

I don’t understand why there is a blank screen in Ionic View, and when I run the Google Maps application and then come back to Ionic View, the blank screen disappear and i can see the map.

This is the only way to make native Google Maps working.

Can anyone help me ? Thx.

I search on google since 1 week… can’t fix this…

2

Don’t know? Have you seen the Josh Morony tutorial?

This is my code to load the map.

  //---------------------------------------------------------------------
  loadMap() {
    this.locationService.getCurrentLocation()
      .then((currentLocation) => {

        this.location = currentLocation;

        this.map = new GoogleMap('map', {
          'backgroundColor': 'white',
          'controls': {
            'compass': true,
            'myLocationButton': true,
            'indoorPicker': true,
            'zoom': true
          },
          'gestures': {
            'scroll': true,
            'tilt': true,
            'rotate': true,
            'zoom': true
          }
        });

        this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {

          let startLocation = this.getLocation(currentLocation,this.deliveryList[0].lat,this.deliveryList[0].lon);

          // create CameraPosition
          let position: CameraPosition = {
            target: startLocation,
            zoom: 12,
            tilt: 30,
            bearing: 40
          };

      this.map.moveCamera(position);    // move the map's camera to position
      this.addMarkers()
    })
  })
  .catch((err) => alert('Cannot get current location: /n' + err))

}

3

I have read all the tutorial about google maps native i think.

Your code is doing the same.

It seems like this is a Ionic View bug.
When i reload the Ionic View, and i open my app inside, the map appears, but if i close my app then I repoen it, it does not work. The map appears only when i close then open Ionic View.