inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
280 stars 57 forks source link

How to update the center of the map when she is already running ? #67

Closed Domi-4102 closed 2 years ago

Domi-4102 commented 2 years ago

Hi , i tried to edit the property center after initialization but it didn't work

It didn't update if you pass the same value but the view of the map is different.

HusamElbashir commented 2 years ago

The watcher won't trigger if the value is the same. You'll have to re-center manually I'm afraid.

khaledtag98 commented 2 years ago

You can use panTo as mentioned in google API to change the center:https://developers.google.com/maps/documentation/javascript/reference/map#Map.panTo

template :

<GoogleMap
    ref="mapRef"
    api-key="YOUR_GOOGLE_API_KEY"
    style="width: 100%; height: width: 100%"
    :center="center"
    :zoom="11"
  />

in your script:

if (mapRef.value?.ready) {
          mapRef.value.map.panTo({ lat: newLat, lng: newLng });
}