in my html
<ion-content>
<div #map id="map"></div>
</ion-content>
In my TS
export class HistoryDetailsPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
constructor(public navCtrl: NavController, public geolocation: Geolocation) {
}
ionViewDidLoad()
{
this.loadMap();
}
loadMap(){
this.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);
});
}
}