NathanAP / vue-google-maps-community-fork

The community fork for Vue Google Maps library
https://vue-google-maps-community-fork.netlify.app
MIT License
105 stars 32 forks source link

documented way to catch events doesn't work #100

Open sdetweil opened 1 month ago

sdetweil commented 1 month ago

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

sdetweil commented 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()))
        }));
}