Update zoom property

[kaboume]

Hi,

I've a map like this :

<GoogleMap ref="mapRef" :api-key="GoogleMapsAPIKey" style="width: 100%; height: 500px" :center="center" :zoom="zoom">
      <Marker v-for="marker in markers" :options="marker" @click="highlightStage(marker.stageId)" />
      <InfoWindow v-if="markerHighlighted" :options="markerHighlighted">
        <v-card color="primary ma-2 pa-3">
          <div style="font-size: 13px;font-weight: 700;text-transform: uppercase;">
            {{ markerHighlighted.ville }}
          </div>
          <div class="mt-2" style="font-size: 12px;">
            {{ markerHighlighted.dateDebut }} {{ markerHighlighted.dateFin ? ` au ${markerHighlighted.dateFin}` : '' }}
          </div>
          <v-card-actions class="justify-space-between">
            <v-btn size="small" icon="mdi-loupe" />
            <v-btn size="small" icon="mdi-eye" @click="highlightStageAndZoom(markerHighlighted)" />
          </v-card-actions>
        </v-card>
      </InfoWindow>
    </GoogleMap>

whith this method :

const highlightStageAndZoom = async (stage) => {
  if (mapRef.value?.ready)
    mapRef.value.map.panTo(stage.position)

  zoom.value = 12
}

The first time click on the button which call the highlightStageAndZoom, the zoom of my map changes. But if I click another time (and changed therefore the zoom of the map with the mouse) the same button, the map doesn't zoom...

I think that the zoom props hasn't changed between the first and the second click ?

[HusamElbashir]

Hi

Can you provide a minimal reproduction? You can use vite.new/vue