Need help on: Change map center or marker position reactivity

[darkons]

What you try to do

Want to change the map center and marker position after geocode an address.

What is the problem

The only way I was found to do that looks like very tricky for me. I think there is a better way.

Steps to reproduce

This is my actual code. Is using panTo and markerPromise the only way?

<script setup>
import { useForm } from '@inertiajs/vue3'
import { onMounted, ref } from 'vue'
import useGoogleMapsUtils from '@/Composables/useGoogleMapsUtils'
import { useMapPromise } from '@gmap-vue/v3/composables'

const props = defineProps({
  address: Object,
})

const { geocodeByLatLng } = useGoogleMapsUtils()

const mapRef = ref(null)
const markerRef = ref(null)
const mapReady = ref(false)

const form = useForm({
  location: props.address.location,
})

onMounted(async () => {
  await useMapPromise('map')
  mapReady.value = true
})

const setAddress = async (event) => {
  const address = await geocodeByLatLng(event)

  form.location = [address.location.lng, address.location.lat]

  mapRef.value.panTo({
    lat: address.location.lat,
    lng: address.location.lng,
  })

  markerRef.value.markerPromise.then((marker) => {
    marker.position = {
      lat: address.location.lat,
      lng: address.location.lng,
    }
  })
}

const submit = () => {
  form.patch(route('address.update'))
}
</script>

<template>
    <div
        <GmvAutocomplete @place_changed="setAddress" />
    </div>

    <div>
        <div v-if="mapReady === false">
            Loading map...
        </div>

        <GmvMap
            ref="mapRef"
            map-key="map"
            :class="'h-96"
            :center="{ lat: form.location[1], lng: form.location[0] }"
            :zoom="14"
        >
            <GmvMarker
                ref="markerRef"
                map-key="map"
                :position="{ lat: form.location[1], lng: form.location[0] }"
                :gmp-draggable="true"
                @update:position="setAddress"
            />
        </GmvMap>
    </div>
</template>

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Plugin version

• version: 2.1.5

[diegoazh]

Hi @darkons, your approach looks good. How do you think/want this should be improved?
Or what is the issue that you see on the above implementation?

[darkons]

Thanks for replying @diegoazh

Apparently the way I did it is the only possible way.
I just thought that the center of GmvMap and the position property of GmvMarker would be updated automatically when changing the value of form.location.

Correct me if I am wrong.

Kind regards!