Could we have a feature to set the zoom and center of a Google map automatically once the markers are all set?
It turns out this is already in Wappler! Can’t believe no-one has mentioned this.
I spotted some attributes in available actions so have just tried using them and have produced exactly what I wanted.
I selected the Google Maps component in App Connect and added a Dynamic Event of ‘Bounds Changed’. In that, I selected the action ‘Fit Bounds To Markers’ from within the Google Maps action and it now zooms the map to fit all the markers in.
Perfect.
Hope this is helpful to others.
1 Like
Hmm. It’s not quite working right. While it’s showing the map correctly, zoomed to fit all the markers, every time I pan or click on anything, it jumps back to the position of being zoomed to everything again. I’ve tried all the different modifiers to try and get it to only do it the once and allow zooming and panning without reseting the view but without success.
Any idea what could fix this?
Hi @sitestreet
You can use the fit bounds to markers dynamic action with the Maps > Ready event. On bounds changed isn’t suitable in your case, as bounds changed gets triggered every time the zoom changes.
I thought that would be the way to do it but it didn’t work. I have my Google Map component and also a Marker component beneath that. I also have Dynamic Markers set in the Google Map component. It zooms to the marker set with the Marker component but ignores the dynamic markers.
Ok what if you try to add the dynamic action on the server action (on load event)?
I’ve tried just about everything! Load and Ready events for the main App, all the events for the maps component, etc.
Not the main app.
Use the events of the server action used to the dynamic markers.
I was. I’ve created an action in the ‘Ready’ action of the Google Map component but it doesn’t work. It seems to run before all the dynamic markers have been processed so it zooms to the marker which is set by the Marker component.
I’m trying to get this working with the Google Maps component rather than Leaflet and can’t get the map to center on the map. The Ready action seems to load before the map (I added an alert to the Ready action and the alert appeared before the map).
Can someone have a look at this? Or if someone has dynamic markers loading and then the bounds auto centering could you please advise how it was done? I’ve tried fitting bounds on the server connect success but that doesn’t work on the initial page load. It does work when later running the server connect.
To me it seems like this should actually be the default action but others might disagree?
Thanks.