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

0 votes

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>
Feb 8 in Others by Soham
• 8,730 points
85 views

1 answer to this question.

0 votes

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
    }

}
answered Feb 8 by Rahul
• 8,980 points

Related Questions In Others

0 votes
0 answers
0 votes
1 answer

I am getting Failed to load resource: net::ERR_BLOCKED_BY_CLIENT with Google chrome

These errors are usually generated from an ...READ MORE

answered Feb 16 in Others by Soham
• 8,730 points
240 views
0 votes
1 answer

Golang on Linux... How to install it?

Hey @Abhi, if you want to install ...READ MORE

answered Mar 1, 2019 in Others by Anvi
• 14,170 points
312 views
0 votes
1 answer

I am trying to run following command But I end up with an error :

Hii Nishant, You are running this command inside ...READ MORE

answered Apr 6, 2020 in Others by Niroj
• 82,680 points
709 views
0 votes
0 answers
0 votes
1 answer

How to open the Google Play Store directly from my Android application?

By using developer.andriod.com, one can solve this ...READ MORE

answered Feb 8 in Others by Rahul
• 8,980 points
10 views
0 votes
1 answer

Git refusing to merge unrelated histories on rebase

To answer your question, the “git merge” ...READ MORE

answered Feb 9 in Others by Rahul
• 8,980 points
64 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP