Open sdetweil opened 1 month ago
this is the way that does work , 'myMapRef' matches the ref= on the GMapMap tag
<GMapMap ref="myMapRef" :center="currentMapCenter" :zoom="zoomLevel" map-type-id="terrain" :options="mapOptions"
(I save the returned listener handle to an array (this.listeners) for cleanup on exit)
mounted(){
this.map = await this.$refs.myMapRef.$mapPromise;
this.listeners.push(this.map.addListener("center_changed", () => {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
console.log("new center ="+JSON.stringify(this.map.getCenter()))
}));
this.listeners.push(this.map.addListener("bounds_changed", () => {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
console.log("new bounds =" + JSON.stringify(this.map.getBounds()))
}));
this.listeners.push(this.map.addListener("zoom_changed", () => {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
console.log("new zoom =" + JSON.stringify(this.map.getZoom()))
}));
}
the example here on how to 'watch' the ref on the map object doesn't produce any events
https://vue-google-maps-community-fork.netlify.app/examples/how-to-access-google-maps-object.html#how-to-access-google-maps-object