bounds_changed event called with no parameter passed

[sinisarudan]

Here are excerpts from the code:

<GoogleMap @click="mapClicked" @bounds_changed="boundsChanged" @idle="mapIdle" ref="mapRef" maptype="hybrid" api-key="..." style="width: 100%; height: 400px" :center="mapCenter" :zoom="15">
            <Marker v-for="place in PlacesListFiltered" .... @click="markerClicked(place._id as string)" />
</GoogleMap>

<script setup lang="ts">
import { GoogleMap, Marker } from "vue3-google-map";

// ....
const mapCenter = ref({ lat: 44.81645887786941, lng: 20.460121035575867 });

const boundsChanged = (e) => {
        //ISSUE: e is undefined!
    console.log(`[boundsChanged] e: ${e}; getBounds: ${(mapRef.value as any).api.getBounds()}`);
};

const mapClicked = (e) => {
    console.log("mapClicked", e, e.latLng.lat(), e.latLng.lng());
};

</script>

Just to mention that other event, like `mapClicked` are working fine and I get their events and info from them.
Yet also for `idle` event no parameters

# Expectations
I was expecting to get parameters of lat/lng visible window, as with using `getBounds`, through this event.

In addition, I also have an issue with accessing `getBounds()` that should be accessible through the `api`
yet this is `undefined`:
`mapRef.value as any).api.getBounds()}`
the `mapRef.value as any).api` is defined and is exposing different parameters, methods, yet no `getBounds`
I've tried also with  `mapRef.value as any).map.getBounds()`, but no success neither

[HusamElbashir]

Hi @sinisarudan

It doesn't look like the bounds_changed listener callback can receive any arguments: https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events

As for getBounds it should be available as mapRef.value.map.getBounds

[sinisarudan]

Thanks @HusamIbrahim for the quick reply. You're right, after checking official docs, I do see that bounds_changed does not receive any argument. Regarding mapRef.value.map.getBounds: maybe I've mistreated this event to cause me seeing getBounds not working. After cleaning the code, eliminating the event part, etc, this DOES work:

const mapRef = ref(null);
let gMap: google.maps.Map;
let bounds: google.maps.LatLngBounds | undefined;

const boundsChanged = () => {
    if(!gMap) {
        gMap = (mapRef.value as any).map;
        console.log("[boundsChanged] gMap", gMap);
    }
    bounds = gMap.getBounds();
    console.log(`[boundsChanged] bounds : ${bounds}`);
};

So, I'm closing the issue. Thanks again and sorry for bothering!