Wednesday, 15 May 2019

Ionic set marker on location or based on longitude and latitude

I'm following some tutorial i want to set the marker on current location. I'm taking longitude and latitude values of user, and I need to show a marker on current location or possible by longitude and latitude values. And one more question can i show the address of that location on map? In some answers i check there are only option of set marker on center is there any option to set marker on current location?

 constructor(public navCtrl: NavController, public navParams: NavParams, public geolocation: Geolocation, private locationAccuracy: LocationAccuracy) {

   this.catdata = this.navParams.get('for1');
   this.areadata = this.navParams.get('for2');
   console.log(this.catdata);
   console.log(this.areadata);

  this.locationAccuracy.canRequest().then((canRequest: boolean) => {
    if(canRequest) {
     // the accuracy option will be ignored by iOS
     this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
       () => {
         this.isGpsOn = true;
       },
       error => console.log('Error requesting location permissions', error)
     );
   }

  });

 this.addMarker();

  }

 ionViewDidLoad() {
   this.loadMap();
   }

 next(){
   this.navCtrl.push(Order4Page, {catdata:this.catdata,
                             areadata:this.areadata});
 }

  loadMap(){
   this.geolocation.getCurrentPosition().then((position) => {

    let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
     console.log(position.coords.latitude);
        console.log(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,
          draggable: true,
           animation: google.maps.Animation.DROP,
                 //icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png',
        position: this.map.getCenter()
  });

  let content = "<h4>This is your current location?</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);
  });

   google.maps.event.addListener(marker, 'dragend', function()
         {
             this.markerlatlong = marker.getPosition();

             console.log("latlong   "+this.markerlatlong);
             console.log("lat    "+marker.getPosition().lat());
             console.log("long   "+marker.getPosition().lng());
         });
 }
}  

And one more thing also need to show the address of that longitude and latitude value.



from Ionic set marker on location or based on longitude and latitude

No comments:

Post a Comment