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


#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 : https://github.com/Aadencoder/Ionic-3-Angular-Google-Maps-API-
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());
             });
}