CODEWITHSUNDEEP
laravelgoogle-mapsvue.js
Zee
Zee

Reputation: 361

Getting Position of Marker After Dragging Laravel-VUE based component

I am using vue-google-maps

They working good so far, I want to achieve that when someone search and select their area a marker appears and then they can drag it to their required position.

I have so far managed to make the marker draggable by editing GoogleMap.vue file

<gmap-marker 
    :key="index"

    v-for="(m, index) in markers"
    :position="m.position"
    :draggable="true"
    @click="center=m.position"
    @drag="setCurrent(this)"

  ></gmap-marker>

Now I am able to drag the marker however the coordinates (lat:long) doesn't change.

I am using Laravel 1.4.1 Vue 3.0.0-beta.6

Please help

rest of the GoogleMap.vue look like this

<script>
   export default {
   name: "GoogleMap",
   data() {
    return {

      center: { lat: 24.9004057, lng: 67.1926178 },
      markers: [],
      places: [],
      currentPlace: null,

     };
    },

   mounted() {

 this.geolocate();

},

   methods: {

    // receives a place object via the autocomplete component
    setPlace(place) {
      this.currentPlace = place;
      this.addMarker();
    },

addMarker() {

  if (this.currentPlace) {
    const marker = {
      lat: this.currentPlace.geometry.location.lat(),
      lng: this.currentPlace.geometry.location.lng()
    };
    this.markers.push({ position: marker, draggable: true });
    this.places.push(this.currentPlace);
    this.center = marker;
    this.currentPlace = null;
  }
},

geolocate: function() {
  navigator.geolocation.getCurrentPosition(position => {
    this.center = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
  });
},

checkthis(position){

  console.log(navigator.position.getCurrentPosition());

 }

} 

};
</script>

Upvotes: 1

Views: 1900

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59318

To get marker position once it is dragged Marker.dragend is better suited then Marker.drag:

This event is fired when the user stops dragging the marker.

In case of vue-google-maps library marker position could be determined like this:

<gmap-marker
    :draggable="true"
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    @click="center=m.position"
    @dragend="showLocation"
  ></gmap-marker>


showLocation: function(evt){
     console.log( evt.latLng.toString());
}

where evt is a MouseEvent object and MouseEvent.latLng property contains the position of dragged marker

The same applies to @drag event.

Upvotes: 3

Related Questions