Closed mvysny closed 4 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.
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:
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.
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