Autocomplete two way binding

[AbdurRehman26]

Hi i think i have read this issue in the issues list but i am not sure. I have implemented the plugin and it works flawlessly but there is a small problem ( or maybe i am not able to do it correctly ). When i implemented the autocomplete functionality it works one way. I enter the address and the map points me to the selected place but when i drag the pointer it doesnt update the address in the search field. This is what i am doing

<template>
    <div>
        <label>
            AutoComplete
            <GmapAutocomplete :position.sync="markers[0].position" @keyup.enter="usePlace" @place_changed="setPlace">
            </GmapAutocomplete>
            <button @click="usePlace">Add</button>
        </label>
        <br/>

        <gmap-map
        :center="center"
        :zoom="7"
        map-type-id="terrain"
        style="width: 100%; height: 500px"
        >
        <gmap-marker
        @dragend="updateMaker" 
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
        ></gmap-marker>

    </gmap-map>

</div>
</template>

<script>

    export default {
        data() {
            return {
                center: {lat: 10.0, lng: 10.0},
                markers: [{
                    position: {lat: 11.0, lng: 11.0}
                }],
                place: null,
            }
        },
        description: 'Autocomplete Example (#164)',
        methods: {
            setPlace(place) {
                this.place = place
            },
            setDescription(description) {
                this.description = description;
            },
            usePlace(place) {
                if (this.place) {
                    var newPostion = {
                      lat: this.place.geometry.location.lat(),
                      lng: this.place.geometry.location.lng(),
                  };
                  this.center = newPostion;
                  this.markers[0].position =  newPostion;
                  this.place = null;
              }
          },
          updateMaker: function(event) {
              console.log('updateMaker, ', event.latLng.lat());
              this.markers[0].position = {
                lat: event.latLng.lat(),
                lng: event.latLng.lng(),
            }
        },
    }
}
</script>

[grishamjindal]

Not sure if you are still looking for the solution, but this is how I achieved it.

First, Add a reference to GMapAutocomplete component -

<GmapAutocomplete ref="autocomplete" :position.sync="markers[0].position" @keyup.enter="usePlace" @place_changed="setPlace"></GmapAutocomplete>

And then in your updateMarker method (on dragend), add this

updateMaker: function(event) {
   let geocoder = new google.maps.Geocoder()
   geocoder.geocode({ 'latLng': event.latLng }, (result, status) => {
       if (status ===google.maps.GeocoderStatus.OK) {
          // accessing autocomplete reference and populating the address
          this.$refs.autocomplete.$refs.input.value = result[0].formatted_address
       }
   })
}

[cuongdevjs]

how to import google in updateMarker event

[grishamjindal]

import { gmapApi } from 'vue2-google-maps'

computed: {
    ...mapState(...),

   google: gmapApi,

  // other methods
}

updateMaker: function(event) {
   let geocoder = new this.google.maps.Geocoder()
   ....
}