Как задать локацию маркера в импут поиска

Здравствуйте как мне когда я перемещаюсь по карте отображать актуальный адрес в строке поиска адреса? Функция mapRender вызывается в хуке mounted

 async mapRender(gmap) {
            let google = await gmapsInit()
            var lat = gmap.lat,
                lng = gmap.lng;

            var image = {
                url: require('@/assets/icons/app/Location Pointer.svg'),
                size: new google.maps.Size(60, 60),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(40, 40),
                scaledSize: new google.maps.Size(60, 60)
            };
            var geocoder = new google.maps.Geocoder;
            geocoder.geocode({
                'location': gmap
            }, function (results, status) {
                if (status === 'OK') {
                    if (results[0]) {
                        this.formattedAddress = results[0].formatted_address
                    }
                }
            })
            setTimeout(function () {
                let mapElmId = 'map'
                let center = new google.maps.LatLng(lat, lng);
                let map = new google.maps.Map(document.getElementById(mapElmId), {
                    zoom: 18,
                    center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: true,
                    draggable: true,
                    scrollwheel: true,
                    zoomControl: true
                });
                let myMarker = new google.maps.Marker({
                    position: center,
                    map: map,
                    icon: image
                });
                myMarker.setPosition(map.getCenter());
                let input = document.getElementById('pac-input');
                const searchBox = new google.maps.places.SearchBox(input);
                map.addListener('bounds_changed', () => {
                    searchBox.setBounds(map.getBounds());
                });
                let markers = [];

                searchBox.addListener("places_changed", () => {
                    const places = searchBox.getPlaces();

                    if (places.length == 0) {
                        return;
                    }
                    // Clear out the old markers.
                    markers.forEach((marker) => {
                        marker.setMap(null);
                    });
                    markers = [];
                    // For each place, get the icon, name and location.
                    const bounds = new google.maps.LatLngBounds();
                    places.forEach((place) => {
                        console.log(place)
                        if (!place.geometry) {
                            console.log("Returned place contains no geometry");
                            return;
                        }
                        const icon = {
                            url:  require('@/assets/icons/app/Location Pointer.svg'),
                            size: new google.maps.Size(60, 60),
                            origin: new google.maps.Point(0, 0),
                            anchor: new google.maps.Point(40, 40),
                            scaledSize: new google.maps.Size(60, 60)
                        };
                        // Create a marker for each place.
                        markers.push(
                            new google.maps.Marker({
                                map,
                                icon,
                                title: place.name,
                                position: place.geometry.location,
                            })
                        );

                        if (place.geometry.viewport) {
                            console.log(place.formatted_address)
                            // Only geocodes have viewport.
                            bounds.union(place.geometry.viewport);
                        } else {
                            bounds.extend(place.geometry.location);
                        }
                    });
                    searchBox.set('map', null);
                    map.fitBounds(bounds);
                });

                google.maps.event.addListener(myMarker, 'dragend', function () {
                    markers.forEach((marker) => {
                        marker.setMap(null);
                    });
                    markers = [];
                    console.log('position', this.getPosition())
                    map.setCenter(this.getPosition()); // Set map center to marker position
                    updatePosition(this.getPosition().lat(), this.getPosition().lng()); // update position display
                });

                google.maps.event.addListener(map, 'drag', function () {
                    markers.forEach((marker) => {
                        marker.setMap(null);
                    });
                    markers = [];
                    myMarker.setPosition(this.getCenter()); // set marker position to map center
                    updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
                });


                // google.maps.event.addListener(map, 'dragend', function () {
                //   myMarker.setPosition(this.getCenter()); // set marker position to map center
                //   updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
                // });
                function updatePosition(lat, lng) {
                    getLatLongDetail({lat, lng})
                }
                function getLatLongDetail(myLatlng) {
                    geocoder.geocode({ 'latLng': myLatlng },  function (results, status) {
                        if (status === google.maps.GeocoderStatus.OK) {
                            if (results[0] && results[0].formatted_address) {
                                this.location = results[0].formatted_address
                            }
                        }
                    })
                }
            }.bind(this), 200);
        }
<v-col cols="12">
      <div class="d-flex search py-2">
        <div class="search-input pa-1 pl-0 rounded-lg d-flex">
          <v-text-field
              label="Address"
              prepend-inner-icon="search"
              class="pa-1"
              placeholder=""
              id="pac-input"
              value="location"
              flat
              solo
              small
              dense
              outlined
              clearable
              name="name"
              type="text"
              />

          <v-btn
              text
              class="font-weight-bold"
              color="secondary"
          >
            CONFIRM
          </v-btn>
        </div>
      </div>
    </v-col>

    <v-col cols="12">
      <div id="map" class="w-100"></div>
    </v-col>


Ответы (0 шт):