Google Maps watching the bounds change

Hi Everyone,

I had an issue where I wanted to monitor changes to the google map bounds as the user drags around the map or zooms in and out. Sounds like others want the same thing. I’m new to all this, but this worked for me so wanted to save others lots of time figuring it out.

This was done with a custom component - Note to use the development editor I needed to build a new component fresh on my computer, then copy in the ww code and files to the new component instead of using a github source.

Here is some code to help. Feel free to note and fix any issues you see and help everyone leapfrog this feature request.

A new method
boundaryChanging() {
this.map.addListener(“bounds_changed”, () => {
let boundsData = this.map.getBounds();
boundsData = {“NorthEast”:boundsData.getNorthEast(),“SouthWest”:boundsData.getSouthWest()};
// emit values from bounds changing
this.$emit(‘trigger-event’, {
name: ‘bounds:change’,
event: { position: boundsData },
});
});
},

Call when doing the initmap:
this.boundaryChanging();

ww-config.js, new trigger event:
{
name: ‘bounds:change’,
label: { en: ‘On map bounds change’ },
event: {
position: {
NorthEast: {},
SouthWest: {},
},
domEvent: {},
},
},

3 Likes

Hi, @Matto yes it’s a good solution, :slight_smile: the plugin lacks that feature, congrats!