It shows black screen when trying to load Map on device with ionic 2 Google Map Native plugin

Question

By using the Command $ keys, I was able to install the plugin of the native Google Maps into the ionic 2 project.

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

After this step, one could run the Command $ Ionic Platform in which one must include the ios and following which, the $ Ionic Build ios. Despite everything going in an expected order, everytime I try to display a map, all I see is a black screen and hence, there is an error. Could I get help as to what I’m missing out on? 





Code:

/src/app/app.module.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular'; 
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home'; 
import { 
GoogleMap, 
GoogleMapsEvent, 
GoogleMapsLatLng, 
CameraPosition, 
GoogleMapsMarkerOptions, 
GoogleMapsMarker 
// GoogleMapsMapTypeId
} from 'ionic-native'; 

@Component({ 
templateUrl: 'app.html'
}) 
export class MyApp { 
rootPage = HomePage; 

constructor(platform: Platform) { 
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available. 
// Here you can do any higher level native things you might need. 
StatusBar.styleDefault(); 
Splashscreen.hide();

let map = new MapPage(); 
map.loadMap(); });
}
}

class MapPage { 
constructor() {} 
// Load map only after view is initialize 
ngAfterViewInit() { 
this.loadMap();
}

loadMap() { 
// make sure to create following structure in your view.html file
// and add a height (for example 100%) to it, else the map won't be visible 
// <ion-content>
// <div #map id="map" style="height:100%;"></div> 
// </ion-content> 

// create a new map by passing HTMLElement
let element: HTMLElement = document.getElementById('map'); 

let map = new GoogleMap(element); 
// create LatLng object
let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802); 

// create CameraPosition 
let position: CameraPosition = { 
target: ionic,
zoom: 18,
tilt: 30
}; 

// listen to MAP_READY event 
map.one(GoogleMapsEvent.MAP_READY).then(() => { 
// move the map's camera to position 
map.moveCamera(position); // works on iOS and Android 
}); 

// create new marker 
let markerOptions: GoogleMapsMarkerOptions = { 
position: ionic,
title: 'Ionic' 
};

map.addMarker(markerOptions) 
.then((
marker: GoogleMapsMarker) => { marker.showInfoWindow();
}); 
}
}

/src/pages/home/home.html

<ion-header> 
<ion-navbar> 
<ion-title>
Ionic Blank 
</ion-title> 
</ion-navbar> 
</ion-header> 
<ion-content padding> 
<div #map id="map" style="height:100%;"></div> 
</ion-content>

Answer 1

In order to answer your question, start with

let map = new MapPage(); map.loadMap();`

The MapPage is a plain typescript class and also is not a component which wont let me run lifecycle hooks like the following code:
 

ngAfterViewInit() { 
this.loadMap(); }

Also the call map.loadMap() in App.html is not working because the element is in the home component. In order to ensure it works, it is best to change the map related code to the home component. 

constructor() {} 
@ViewChild('map') 
  private mapElement: ElementRef; 
// Load map only after view is initialize 
ngAfterViewInit() 
{ 
This.loadMap(); } 
loadMap() {
let map = new GoogleMap(this.mapElement.nativeElement);

    //...etc etc
    }

}