Where to register google maps API events listener?

[prasetyaputraa]

Where should I register maps API event listeners? I tried to add a listener to click event in mounted hooks but the component's map` property is evaluated to null at this point in a component's lifecycle. Thank you.

[prasetyaputraa]

The way I do it, is to assign the reference to the map to a watch composition API, adding listener to it after the referenced map is ready.

[prasetyaputraa]

The way I do it, is to assign the reference to the map to a watch composition API, adding listener to it after the referenced map is ready.

Reopening the issue because somehow this solution does not always work.

[yulafezmesi]

Any update on this?

edit: how about this kind of usage. Is that good practice to handle all events and bindings? (lookups etc..)

   const bounds = new window.google.maps.LatLngBounds();

[prasetyaputraa]

@yulafezmesi Sorry I forgot to follow this up, I ended up using timeout to check whether the map is ready or not. Basically, I watch the map component's reference with a recursive callback. Like so.

const addListenerToMap = () => {
  if (mapRef.value?.ready) {
    mapRef.value.map.addListener("click", (mapsMouseEvent) => {
       markerPosition.value = mapsMouseEvent.latLng;
    });
   } else {
     setTimeout(addListenerToMap, 2000);
   }
};

watch(mapRef, addListenerToMap);

I don't know if there is any APIs provided to assign a listener.

[HusamElbashir]

Hey @prasetyaputraa sorry about the late response. There's a ready ref which you can use. @JoseGoncalves shared an example of how he's using it to register event listeners a while back: https://github.com/inocan-group/vue3-google-map/issues/1#issuecomment-718229226 If this method doesn't work for you or if you have any feedback on ways to improve the API please let me know.

[JoseGoncalves]

Hi @prasetyaputraa, you can also check the following usage demo: vue-google-maps

[prasetyaputraa]

@HusamIbrahim @JoseGoncalves Sorry, I wonder why did I miss it while browsing the issues. Thank you so much!

[web-programmer-here]

@yulafezmesi did you ever implemented const bounds = new window.google.maps.LatLngBounds();? I want to use the same method but having issue, it would be really awesome if you can share your findings if you implemented this method, thanks