Ionic 2 with Google maps - Blank screen appear - google-maps

Question

I guess it should be simple for the ionic/Angular people.
from some reason, I can't get this simple script to work (Ionic2 with GMaps).
Here is my code:
Map.html:
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Google Map</ion-title>
<ion-buttons end>
<button (click)="addMarker()">
<ion-icon name="add"></ion-icon>Add Marker
</button>
</ion-buttons>
</ion-navbar>
<ion-content padding class="map">
<div id="map"></div>
</ion-content>
Map.ts:
import {Page, NavController, Platform} from 'ionic-angular';
import {Geolocation} from 'ionic-native';
/*
Generated class for the MapPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Page({
templateUrl: 'build/pages/map/map.html',
})
export class MapPage {
constructor(public nav: NavController, platform: Platform) {
this.nav = nav;
this.map = null;
// this.platform = platform;
// this.initializeMap();
this.platform = platform;
platform.ready().then(() => {
this.loadMap();
});
}
loadMap(){
let options = {timeout: 10000, enableHighAccuracy: true};
Geolocation.getCurrentPosition(options).then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
});
}
}
I have added my code here (Ionic2 project with Gmap inside):
http://plnkr.co/edit/ERnCxooM1IWD3qVLMQ1K?p=preview
you can find inside: "home.ts" the script, I have comment the code below, since in the moment I'm adding it back All of my ionic project is down, you can try and uncomment it.
I also have found Angular2 with Gmap project, But I couldn't find Ionic2 project with Gmap. here:
Angular2 Gmap
Anyone can see what is wrong there?
Thank you very much!
Eran.

Answer 1

Check if you installed the plugin a correct way.
Validate your API keys at console.developers.google.com
Be sure the HTML element where the maps get injected into has a
predefined height property.
Be sure you run your app on a connected or virtual
device.
If that doesn't work: I've created an Ionic 2.0.0-rc.5 starter with minimal functionality https://github.com/0x1ad2/ionic2-starter-google-maps

Answer 2

I have created an example app with ionic2 and google map.
https://github.com/nazrul104/google-map-with-ionic2. It may help you!

Answer 3

Thanks to #Nazrul here is the changes I made in my ts page file:
export class Page1 {
constructor() {
this.loadMap();
}
loadMap(){
let options = {timeout: 10000, enableHighAccuracy: true};
//ENABLE THE FOLLOWING:
Geolocation.getCurrentPosition(options).then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.querySelector('#map'), mapOptions);
var x = document.querySelector('#map');
console.log(x);
});
}
}
Now I can see the map :)

Answer 4

My solution was, do not initialize the map on the constructor, initialize it on the ionViewDidLoad.
ionViewDidLoad() {
console.log('ionViewDidLoad Maps');
setTimeout(()=>{
this.loadMap();
}, 1000)
}