FlowingCode / GoogleMapsAddon

Vaadin Addon based on Google Maps Web Component
https://www.flowingcode.com/en/open-source/
Apache License 2.0
19 stars 7 forks source link

Add support for controls API #115

Closed mvysny closed 4 months ago

mvysny commented 5 months ago

The example at https://developers.google.com/maps/documentation/javascript/geolocation allows you to add custom buttons to the map easily, via map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);. It would be excellent to expose this API in Java, so that I could add my own "center" Vaadin button easily. Relates to #114

mvysny commented 5 months ago

This code seems to work:

map.getElement().executeJs("this.map.controls[google.maps.ControlPosition.TOP_CENTER].push($0);", button);

but it's extremely limited: the map must be visible and initialized (otherwise the JS code will throw an exception that this.map is null); also the button needs to be added in the layout somewhere in the current UI. Investigating further.

mvysny commented 5 months ago

Okay, this works well-ish:

            map.getElement().addEventListener("google-map-ready", e -> {
                final Button button = new Button(VaadinIcon.CROSSHAIRS.create());
                button.addThemeVariants(ButtonVariant.LUMO_TERTIARY, ButtonVariant.LUMO_ICON);
                button.getStyle().set("background", "white");
                button.getStyle().setMargin("10px");
                button.setWidth("40px");
                button.setHeight("40px");
                button.getStyle().setBorderRadius("40px");
                UI.getCurrent().add(button.getElement());
             map.getElement().executeJs("this.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push($0);", button);
                button.addClickListener(event -> map.goToCurrentLocation());
            });

Couldn't find the docs for ControlPosition, here are couple of links I found:

  1. https://developers.google.com/maps/documentation/javascript/examples/control-positioning
  2. https://stackoverflow.com/questions/27769309/google-maps-javascript-positioning-control-maps

Looks like there are the following available constants: TOP_CENTER, BOTTOM_RIGHT, MIDDLE_LEFT and their combinations (TOP_LEFT) etc. Looks like swapped names work as well, e.g. RIGHT_BOTTOM.

The button jumps around (first attached to UI, then moved to the map element). You can place the button in an invisible div or similar, to avoid this kind of glitch.