Skip to content

Google Maps

A Vaadin Flow add-on that embeds Google Maps into a Vaadin application, with server-side Java APIs for markers, polygons, info windows, KML, clustering, geolocation, and map events.

The add-on wraps the Google Maps Web Component maintained by Flowing Code.

Overview

Use the Google Maps add-on when you need to render an interactive map inside a Vaadin Flow view and control it from server-side Java — pan and zoom programmatically, drop markers, draw shapes, react to clicks, or display KML layers, all without writing custom JavaScript.

Features

  • Programmatic server-side panning and zooming.
  • Add and remove markers, including draggable markers and marker clustering.
  • Add and remove polygons.
  • Info windows attached to markers.
  • Geolocation support.
  • Toggle and resize the built-in UI controls.
  • KML layer support.
  • Tilt and rotation support.
  • MapId support (for cloud-based map styling).
  • Obtain the current map bounds.

Supported versions

The current add-on (version 2.x) supports Vaadin 14–25.

Prerequisites

You need a Google Maps JavaScript API key. Without one, the map will render an error overlay from Google's side.

Installation

From the Vaadin Directory

Available in the Vaadin Directory.

Maven dependency

<dependency>
    <groupId>com.flowingcode.vaadin.addons</groupId>
    <artifactId>google-maps</artifactId>
    <version>X.Y.Z</version>
</dependency>

Replace X.Y.Z with the latest released version. Add the Vaadin add-ons repository to your pom.xml:

<repository>
    <id>vaadin-addons</id>
    <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

For snapshot builds, see maven.flowingcode.com/snapshots.

JavaDoc is published at javadoc.flowingcode.com.

Usage

Create a GoogleMap, set its size and starting position, then add the geometry you need:

GoogleMap gmaps = new GoogleMap(apiKey, null, null);
gmaps.setMapType(MapType.SATELLITE);
gmaps.setSizeFull();
gmaps.setCenter(new LatLon(0, 0));
gmaps.addMarker("Center", new LatLon(0, 0), true, "");

GoogleMapPolygon gmp = gmaps.addPolygon(Arrays.asList(
    new GoogleMapPoint(gmaps.getCenter()),
    new GoogleMapPoint(gmaps.getCenter().getLat(), gmaps.getCenter().getLon() + 1),
    new GoogleMapPoint(gmaps.getCenter().getLat() + 1, gmaps.getCenter().getLon())));

gmp.addClickListener(ev -> Notification.show("polygon clicked"));

The first GoogleMap constructor argument is the API key. The remaining two arguments accept an optional client ID and a language code; pass null to use the defaults.

Special configuration when using Spring

By default, Vaadin Flow only scans com/vaadin/flow/component for UI components and views. To pick up the add-on's components when running on Spring, allow-list the com.flowingcode package in src/main/resources/application.properties:

vaadin.whitelisted-packages = com.vaadin,org.vaadin,dev.hilla,com.flowingcode

See the Spring package-scanning documentation for more details.

API reference

Headline types exposed by the add-on:

  • GoogleMap — the map component itself.
  • GoogleMapMarker — a marker placed on the map.
  • GoogleMapPolygon — a polygon drawn on the map.
  • GoogleMapPoint — a single point used to build polygons.
  • LatLon — a coordinate value type.
  • MapType — enum of available map types (ROADMAP, SATELLITE, HYBRID, TERRAIN).

For the full API surface, browse the published JavaDoc.

Demo

A live demo is available at addonsv25.flowingcode.com/googlemaps. To run the demo locally:

git clone https://github.com/FlowingCode/GoogleMapsAddon.git
cd GoogleMapsAddon
mvn clean install jetty:run

Then open http://localhost:8080/.

Source code

GoogleMapsAddon on GitHub — distributed under Apache License 2.0.