Get coordinate bounds.

[n-tdi]

Hey! Love the addon, super helpful for Vaadin 14 usage. I was wondering if it was possible to either listen for the bounds_changed event in google's maps api and then, using the getBounds() function, return the two coordinate bounds. I want to implement a functionality so I can see all the markers that are currently visible into my app. Is this possible to get added or is there some javascript events I can listen to?

I was doing some poking around inside of the source and was only able to listen to drag events, not much success.

[paodb]

Hello, thanks for the cool feedback! Regarding you question, currently there's no way to listen to the bounds-changed event as the web-component API does not include it. We'll take the request in consideration.

But, if you want to have all the markers visible you could usegooglemaps.getElement().setProperty("fitToMarkers", true);. The fitToMarkers property is defined in the web-component and it uses the fitBounds method from the GoogleMaps API . Setting this property in true makes the zoom to adjust so all markers are visibles in the view. There's no Java API yet to invoke this behavior so you need to rely on the element API to set the property.

[n-tdi]

Hey! Thanks for the response, when i meant all in view, i mean all the markers currently visible to the user based on their viewport, not having all the markers in view.

[n-tdi]

Another possibility:

• Get top-left longlat and the bottom right longlat,
• With these I could properly check if the targeted marker is in frame

[paodb]

@n-tdi I did some investigation and found that you could call getBounds and get the "bounds" coordinates doing something like this:

 googlemap.getElement().executeJs("return this.map.getBounds().toJSON()").then(JsonObject.class, result -> {

        // you could get the json string with the coordinates
        String jsonString = result.toJson();

        // or you could get each coordinate
        double south = result.get("south").asNumber();
        double north = result.get("north").asNumber();
        double west = result.get("west").asNumber();
        double east = result.get("east").asNumber();

        // and then you could add your logic
});

[n-tdi]

Thanks for the reply @paodb ! I ended up rewriting and implementing google maps into my project without the addon.