feat(gmap-vue): emit update:position event on markers

We emit this event when dragend event if fired from Google Maps API Fix #14
diegoazh · Feb 15, 2022 · 6a34bb7 · 6a34bb7
1 parent e59e82e
commit 6a34bb7
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/packages/documentation/docs/.vuepress/components/eg-marker.vue b/packages/documentation/docs/.vuepress/components/eg-marker.vue
@@ -1,13 +1,18 @@
 <template>
   <div>
+    <ul>
+      <li v-for="(value, index) of markers" :key="index">{{ index + 1}} - {{ value.position }}</li>
+    </ul>
     <gmap-map :center="center" :zoom="7" style="width: 100%; height: 500px">
+      <!-- From v3.1.0 you have the update:position event on markers -->
       <gmap-marker
         v-for="(value, index) of markers"
         :key="index"
         :position="value.position"
         :clickable="true"
         :draggable="true"
         @click="center = value.position"
+        @update:position="getNewMarkerPosition($event, index)"
       ></gmap-marker>
     </gmap-map>
   </div>
@@ -38,7 +43,19 @@ export default {
       ],
     };
   },
-  methods: {},
+  methods: {
+    getNewMarkerPosition(event, index) {
+      console.info('udpate:position', event);
+
+      if (this.markers[index].position.lat !== event.lat) {
+        this.markers[index].position.lat = event.lat;
+      }
+
+      if (this.markers[index].position.lng !== event.lng) {
+        this.markers[index].position.lng = event.lng;
+      }
+    },
+  },
 };
 </script>
 

diff --git a/packages/documentation/docs/guide/marker.md b/packages/documentation/docs/guide/marker.md
@@ -69,6 +69,16 @@ export default {
         bindProps(this, this.$markerObject, markerMappedProps);
         bindEvents(this, this.$markerObject, events);
 
+        // From v3.1.0
+        this.$markerObject.addListener('dragend', () => {
+          const newPosition = this.$markerObject.getPosition();
+
+          this.$emit('update:position', {
+            lat: newPosition.lat(),
+            lng: newPosition.lng(),
+          });
+        });
+
         if (this.$clusterPromise) {
           this.$clusterPromise.then((clusterObject) => {
             clusterObject.addMarker(this.$markerObject);
@@ -262,6 +272,10 @@ const events = [
 ];
 ```
 
+### `update:position` event (from v3.1.0)
+
+From version 3.1.0 we emit the `update:position` when the Google Maps API fires the `dragend` event, it returns an object in the form `{ lat: 10, lng: 10 }`, in this way we start preparing the plugin to migrate to Vue v3 in a near future and can use **v-model** on the **position** prop.
+
 :::
 
 ## How to use it

diff --git a/packages/gmap-vue/src/components/marker-icon.vue b/packages/gmap-vue/src/components/marker-icon.vue
@@ -55,6 +55,18 @@ export default {
         bindProps(this, this.$markerObject, markerMappedProps);
         bindEvents(this, this.$markerObject, events);
 
+        this.$markerObject.addListener('dragend', () => {
+          const newPosition = this.$markerObject.getPosition();
+          /**
+           * An event to detect when a position changes
+           * @property {Object} position Object with lat and lng values, eg: { lat: 10.0, lng: 10.0 }
+           */
+          this.$emit('update:position', {
+            lat: newPosition.lat(),
+            lng: newPosition.lng(),
+          });
+        });
+
         if (this.$clusterPromise) {
           this.$clusterPromise.then((clusterObject) => {
             clusterObject.addMarker(this.$markerObject);