How to catch Google Map Event with listener in vue.js

Question

How to catch Google Map Event with listener

I want to be able to use bounds_changes event with listner. However, in Vue.js, I cannot get it working; even though the event happens, it is not able to catch the event. So, I want to add custom event listner using addListener , but I do not know where to start.

Any advice or suggestion would be appreciated. Thank you in advance.

Below is my code :

const mapElement = document.getElementById('map');
const mapOptions  = {
    center: {
        lat: 37.5005794,
        lng: 126.9837758
    },
    zoomControl : false,
    zoom: 10,
    disableDefaultUI: true
};

const map = google.maps.Map(mapElement, mapOptions);

google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    var bounds = map.getBounds(),
        northEast = {
            'lat' : bounds.getNorthEast().lat(),
            'lng' : bounds.getNorthEast().lng()
        },
        southWest = {
            'lat' : bounds.getSouthWest().lat(),
            'lng' : bounds.getSouthWest().lng()
        };

    console.log(northEast)
});

Answer 1

You may use a global event bus in scenario like this

const EventBus = new Vue();

google.maps.event.addListenerOnce(map, "bounds_changed", function() {
  //   ...
  EventBus.$emit("bounds_changed", {
    bounds,
    northEast,
    southWest
  });
});

new Vue({
  el: "#app",
  created() {
    EventBus.$on("bounds_changed", ({ bounds, northEast, southWest }) => {
      // put your operation in vue here
    });
  }
});