This is perfectly working
ionic map.html file
map.ts file
ionic map.html file
<ion-content>
<div class="map">
<ion-searchbar #searchbar placeholder="Suchen" [hidden]="!search"></ion-searchbar>
<div id="map" #map></div>
</div>
import { Component, ViewChild,ElementRef } from '@angular/core';
import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation';
import { NavController, NavParams,Platform } from 'ionic-angular';
declare var google;
@Component({
selector: 'page-map',
templateUrl: 'map.html',
})
export class MapPage {
options : GeolocationOptions;
currentPos : Geoposition;
@ViewChild('map') mapElement: ElementRef;
map: any;
status:any;
isActive:any;
alertmsg:any;
alertcondition:any;
data:any = {};
constructor(public navCtrl: NavController, public navParams: NavParams,private geolocation: Geolocation) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad MapPage');
this.mapload();
}
/*##Get user location map starts##*/
mapload(){
// this.loadMap(13.08648395538330,80.27350616455078 );
this.options = {
enableHighAccuracy : true
};
this.geolocation.getCurrentPosition(this.options).then((pos : Geoposition) => {
this.currentPos = pos;
console.log(pos);
console.log(pos.coords.latitude+','+pos.coords.longitude)
//this.addMap(pos.coords.latitude,pos.coords.longitude);
this.loadMap(pos.coords.latitude,pos.coords.longitude);
},(err : PositionError)=>{
console.log("error : " + err.message);
});
}
}
loadMap(lat,long){
let latLng= new google.maps.LatLng(lat, long);
let mapOptions={
center:latLng,
radius:300,
strokeColor:'#AA00FF',
strokeWidth: 5,
fillColor : '#880000',
zoom:15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map=new google.maps.Map(this.mapElement.nativeElement,mapOptions);
}
hide() {
}
}
Result
