How can I get dragged marker's new position with Ionic 2?

Question

Friends; I've tried to get new position of dragged marker but i failed. could you please help me. I can not get the dragged marker's new location.

addMarker(){
   let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter(),
    draggable: true
  });
      marker.addEventListener(plugin.google.maps.event.MARKER_DRAG_END, function(marker) {
      marker.getPosition(function(latLng) {
      marker.setTitle(latLng.toUrlValue());
      marker.showInfoWindow();
      });
      });           
}

I also tried this code but it fails too:

addMarker(){
   let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter(),
    draggable: true
  });
     marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_END).subscribe(
                        data => {
                            marker.getPosition()
                            .then((LatLng) => {
                                alert('GoogleMapsEvent.MARKER_DRAG_END Lat ~ '+LatLng.lat() + ' And Long ~ '+LatLng.lng())                                
                            });
                        });   
}

Packages that have installed:

"dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "@types/google-maps": "^3.2.0",
    "angular2-google-maps": "^0.17.0",
    "ionic-angular": "2.0.0-rc.4",
    "ionic-native": "2.2.16",
    "ionicons": "3.0.0",
    "promise": "^7.1.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.47",
    "@types/google-maps": "3.2.0",
    "typescript": "2.0.9"
  },

Answer 1

compare your dependencies (package.json)

"dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "ionic-angular": "2.0.0-rc.5",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26",
    "sw-toolbox": "3.4.0"
  },

otherwise you can replace dependencies then go to root folder and type npm install. i hope its work for you.

Answer 2

try to use below code its work for me. home.js

import { Component,ElementRef, ViewChild } from '@angular/core';
import { NavController, NavParams, ViewController,Platform } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, CameraPosition, GoogleMapsMarkerOptions,GoogleMapsMarker } from 'ionic-native';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map1') mapElement: ElementRef;
  map1: any;
  constructor(public navCtrl: NavController,public platform : Platform, public navParams: NavParams,public viewCtrl: ViewController) {
    platform.ready().then(() => {
        this.loadMap();
    });
  }

  loadMap() {
       // create a new map by passing HTMLElement
       let element: HTMLElement = document.getElementById('map1');
       let map1 = new GoogleMap(element);

       // listen to MAP_READY event
       map1.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));
       map1.getMyLocation().then((location)=>{
         // create LatLng object
         let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(location.latLng.lat,location.latLng.lng);
         // create CameraPosition
         let position: CameraPosition = {
           target: ionic,
           zoom: 18,
           tilt: 30,
           bearing: 140,
         };

         // move the map's camera to position
         map1.moveCamera(position);
          map1.setDebuggable( false )

         let markerOptions: GoogleMapsMarkerOptions = {
           position: ionic,
          // title: 'Ionic',
           draggable: true,
           icon: './assets/icon/cusom-marker.png'
         };
         // add circle
         map1.addCircle({
          'center': ionic,
          'radius': 60,
          'strokeColor' : '#aec9f2',
          'strokeWidth': 0,
          'fillColor' : '#aec9f2' //becfea
        });
         map1.addMarker(markerOptions)
           .then((marker: GoogleMapsMarker) => {

              marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_START).subscribe(data =>{
                marker.setIcon({
                  'url': './assets/icon/move-marker.png',
                  'size': {
                    width: 50,
                    height: 50
                  }
                });
              })
              marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_END).subscribe(
                        data => {
                          marker.getPosition().then((LatLng) => {
                            // alert(JSON.stringify(LatLng))
                            marker.setIcon({
                            'url': './assets/icon/cusom-marker.png',
                            'size': {
                              width: 50,
                              height: 50
                            }
                          });
                   });
                });
            });

       })
  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
   <div #map1 id="map1">
   </div>
</ion-content>

Answer 3

Hello did you used ionic plugin add cordova-plugin-googlemaps plugin??

then try to add marker using following script

let element: HTMLElement = document.getElementById('map');
let map = new GoogleMap(element);

let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.07,-89.38);
let markerOptions: GoogleMapsMarkerOptions = {
         position: ionic,
         title: 'Ionic',
         draggable: true,
         icon: 'assets/icon/cusom-marker.png'
};
 map.addMarker(markerOptions)
       .then((marker: GoogleMapsMarker) => {

          marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_START).subscribe(data =>{

          })
          marker.addEventListener(GoogleMapsEvent.MARKER_DRAG_END).subscribe(
                    data => {
                      marker.getPosition().then((LatLng) => {
                        alert(JSON.stringify(LatLng))
                          //  alert('GoogleMapsEvent.MARKER_DRAG_END Lat ~ '+LatLng.lat() + ' And Long ~ '+LatLng.lng())

                       });
                    });
        });

Hope its work for you...