Geolocation map, blanc in Ionic2 - ionic-framework

Question

I want to create an map in my application to show my location with a marker.
I'm using ionic 2 but got blanco page:
http://prntscr.com/dx5czu
This is my code in map.html:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Map</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-buttons end>
<button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>
</ion-buttons>
<div #map id="map"></div>
</ion-content>
And my code in map.ts:
import { Component, ViewChild, ElementRef } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Geolocation } from 'ionic-native';
declare var google;
#Component({
selector: 'page-map',
templateUrl: 'map.html'
})
export class Map {
#ViewChild('map') mapElement: ElementRef;
map: any;
constructor(public navCtrl: NavController) {
}
ionViewDidLoad(){
this.loadMap();
}
loadMap(){
Geolocation.getCurrentPosition().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(this.mapElement.nativeElement, mapOptions);
}, (err) => {
console.log(err);
});
}
addMarker(){
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter()
});
let content = "<h4>Information!</h4>";
this.addInfoWindow(marker, content);
}
addInfoWindow(marker, content){
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}
}
There are no errors given.

Answer 1

This plugin just wordk in device mobile

Answer 2

The thing is your code is perfect except the following lines
ionViewDidLoad(){
this.loadMap(); }
ionViewDidLoad is in the old version of ionic. To make it working you can push this.loadMap(); in the constructor. So the new code will look like
constructor(public navCtrl: NavController) {
this.loadMap();
}
For more information, you can visit my github repository https://github.com/darpanpathak/LocationTrackerApp