Get Location (latitude and Longitude) After Drag Marker in Geo Location using Ionic 3?

Ionic Framework ionic-v3
1

Hello everyone, I am working with Geo-location plugin in Ionic 3. Everything works fine but I need to add a drag-gable marker and get the location of that marker. I am newbie to ionic. I google for this and found few links but no luck implementing them

Links :

Git hub Link : GitHub - Aadencoder/Ionic-3-Angular-Google-Maps-API-: - general project with basic Ionic Features
Home.ts


    import { Component } from '@angular/core';
    import { NavController, Platform } from 'ionic-angular';
    import { Geolocation } from '@ionic-native/geolocation';
    
    declare var google: any;
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      map: any;
      markers: any;
    
      establishments = [{
        name: 'Biratnagar',
        lat: 26.4525,
        lng: 87.2718
      }, {
        name: 'Biratnagar',
          lat: 26.7944,
          lng: 87.2718
      }]
      constructor(public navCtrl: NavController, public geolocation: Geolocation, private platform: Platform) {
    
      }
    
      ionViewWillEnter(){
        this.platform.ready().then(() => {
          this.initPage();
          
        })
      }
    
      initPage(){
        this.geolocation.getCurrentPosition().then(result => {
          this.loadMap(result.coords.latitude, result.coords.longitude);
          console.log(result.coords.latitude);
          console.log(result.coords.longitude);
        })
      }
      
      loadMap(lat, lng){
        let latLng = new google.maps.LatLng(lat, lng);
    
        let mapOption = {
          center: latLng,
          zoom: 14,
          mapTypeId:'roadmap',
          disableDefaultUI: true
        }
    
        let element = document.getElementById('map');
    
        this.map = new google.maps.Map(element, mapOption);
    
        let marker = new google.maps.Marker({
          position: latLng,
          title: 'Biratnagar, Janpath-15',
          icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
        })
        
        let content = `
          <div id="myId" class="item item-thumbnail-left item-text-wrap">
            <ion-item>
              <ion-row>
                <h6> `+marker.title+`</h6>
                <h6> `+ marker.position +`</h6>
              </ion-row>
            </ion-item>
          </div>
        `
        this.addInfoWindow(marker, content);
        marker.setMap(this.map);
    
        // this.loadPoints();
      }
      
      loadPoints(){
        this.markers = [];
         for (const key of Object.keys(this.establishments)){
           let latLng = new google.maps.LatLng(this.establishments[key].lat, this.establishments[key].lng);
           let marker = new google.maps.Marker({
             position: latLng,
             title: this.establishments[key].name
           })
           let content = `
          <div id="myId" class="item item-thumbnail-left item-text-wrap">
            <ion-item>
              <ion-row>
                <h6> `+ this.establishments[key].name + `</h6>
              </ion-row>
            </ion-item>
          </div>
        `
           this.addInfoWindow(marker, content);
           marker.setMap(this.map);
         }
      }
      
      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);
        })
    
      }
    
    }

home.html

 <ion-header>
      <ion-navbar>
        <ion-title>
          Map
        </ion-title>
          <ion-buttons end>
          <button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>
        </ion-buttons> 
      </ion-navbar>
    </ion-header>
    
    <ion-content padding>
      Welcome to Google Maps API testing
      <div id="map"></div>
    
      
      <ion-input type="file" name="picture"></ion-input>
    </ion-content>

package.json

  "@angular/common": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/geolocation": "^4.6.0",
    "@ionic-native/google-maps": "^4.6.0",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "^2.2.8",
    "ionic-angular": "3.9.2",
2

Hello @metalhead101

Copy below code and replace addMarker() and addInfoWindow():-

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>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);
	  	});

	     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());
             });
}
4 Likes
3

thanks for the answer it worked perfectly fine just one question i have is
how can we assign this lat & lng to a variable so that we can generate formatted address!

4

Hello @harshm90,

      this.latitude = marker.getPosition().lat(); 
      this.longitude = marker.getPosition().lng();        

 let options: NativeGeocoderOptions = 
	        {
	            useLocale: true,
	            maxResults: 5
	        };

	        this.nativeGeocoder.reverseGeocode(this.latitude, this.longitude, options)
	        .then((result: NativeGeocoderReverseResult[]) => 
	        {
	            console.log(JSON.stringify(result));//result address array
                    console.log(JSON.stringify(result[0]));//one address out of result address array
	        }).catch((error: any) => 
	        {
	            console.log('Error getting location', error);
	        });
5

Hello @harshm90,

Sorry for delay from my side.

Below is the solution of your query


var myLatlng = new google.maps.LatLng(this.vehicle_latitude, this.vehicle_longitude);
            var myOptions = 
            {
                zoom: 15,
                center: myLatlng
            }
            var map = new google.maps.Map(document.getElementById("map"), myOptions);
            var geocoder = new google.maps.Geocoder();
            google.maps.event.addListener(map, 'click', function(event) 
            {
                geocoder.geocode(
                {
                    'latLng': myLatlng
                }, function(results, status) 
                {
                    if (status == google.maps.GeocoderStatus.OK) 
                    {
                        if (results[0]) 
                        {
                            this.current_vehicle_address = results[0].formatted_address;
                        }
                    }
                });
            });