Directory

GoogleMaps Add-on

Google Maps add-on for Vaadin 7 and 8, based on JS API v3

View larger

Close

Use Google maps in Vaadin apps. For Street View support, check out my Street View Extension.

DEVELOPMENT NOTICE

If you don't use dependency management (i.e. Maven or Ivy) you'll have to manually add GWT-Maps-V3-Api and GWT-AjaxLoader jars to your project. Without them you'll get errors like

[ERROR] Unable to find 'com/google/gwt/maps/Maps.gwt.xml' on your classpath;` 

while trying to compile the widgetset.

USAGE NOTICE

In order to use Google Maps API, you'll need to get an API key from Google Developers Console. The key is not normally needed when developing in localhost.

Altenatively you can use a client ID from Google Maps API for Work is supported.

Supported Features

• Setting center & zoom.
• Limiting of center, bounding box and zoom.
• Setting visible map controls.
• Markers with custom captions and icons, togglable dragging, drop animation and optimized rendering.
• Info windows with Vaadin components, HTML content, marker anchoring and z-index.
• Polygon and polyline overlays.
• KML layers from external URLs.
• Forcing the localization of the map.
• Toggling dragging of the map with mouse, keyboard shortcuts and scroll wheel zoom.
• Traffic layers.
• Chinese API

Supported Events

• Map move
• Map click
• Marker drag
• Marker click
• Info window close

--
This add-on contains features sponsored by the following companies: Gas Natural Fenosa, SNAP Consulting and Track4C.

Sample code

VerticalLayout layout = new VerticalLayout();
GoogleMap googleMap = new GoogleMap("apiKey", null, "english");
googleMap.setSizeFull();
googleMap.addMarker("DRAGGABLE: Paavo Nurmi Stadion", new LatLon(
        60.442423, 22.26044), true, "VAADIN/1377279006_stadium.png");
kakolaMarker = googleMap.addMarker("DRAGGABLE: Kakolan vankila",
        new LatLon(60.44291, 22.242415), true, null);
googleMap.addMarker("NOT DRAGGABLE: Iso-Heikkilä", new LatLon(
        60.450403, 22.230399), false, null);
googleMap.setMinZoom(4);
googleMap.setMaxZoom(16);

ArrayList<LatLon> points = new ArrayList<LatLon>();
points.add(new LatLon(60.484715, 21.923706));
points.add(new LatLon(60.446636, 21.941387));
points.add(new LatLon(60.422496, 21.99546));
points.add(new LatLon(60.427326, 22.06464));
points.add(new LatLon(60.446467, 22.064297));

GoogleMapPolygon overlay = new GoogleMapPolygon(points,
        "#ae1f1f", 0.8, "#194915", 0.5, 3);
map.addPolygonOverlay(overlay);

ArrayList<LatLon> points = new ArrayList<LatLon>();
points.add(new LatLon(60.448118, 22.253738));
points.add(new LatLon(60.455144, 22.24198));
points.add(new LatLon(60.460222, 22.211939));
points.add(new LatLon(60.488224, 22.174602));
points.add(new LatLon(60.486025, 22.169195));

GoogleMapPolyline overlay = new GoogleMapPolyline(
        points, "#d31717", 0.8, 10);
googleMap.addPolyline(overlay);

//due nature of server-client communication of Vaadin and architecture of this add-on, adding of Vaadin components can't be a part of the actual //GoogleMapInfoWindow class. Instead server-side widget of GoogleMap takes care of that
GoogleMapInfoWindow window = new GoogleMapInfoWindow();
googleMap.setInfoWindowContents(window, new Button("A Vaadin button!"));
googleMap.openInfoWindow(window);

Links

• Examples of Most Features
• Example Eclipse/Ivy Project
• Online Demo
• Source Code
• Discussion Forum
• Issue Tracker

Compatibility