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, every time 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
9 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Others

0 votes
1 answer

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

In order to answer your question, start ...READ MORE

answered Feb 8 in Others by Rahul
• 8,980 points
91 views
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
243 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
313 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
710 views
0 votes
1 answer

Unable to communicate to device with .local domain using android, corova-zeroconf-plugin

Use IP address instead of http://iotdevice.local..Use htt ...READ MORE

answered Aug 2, 2018 in IoT (Internet of Things) by anonymous2
• 4,280 points
1,017 views
0 votes
1 answer

How do I create folder under an Amazon S3 bucket through PHP API?

Of Course, it is possible to create ...READ MORE

answered Apr 24, 2018 in AWS by anonymous
9,008 views
0 votes
1 answer

Detecting BLE beacons that are not ibeacons on IOS

You'll have to understand that CoreLocation is ...READ MORE

answered Aug 1, 2018 in IoT (Internet of Things) by nirvana
• 3,130 points
373 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