Google Maps for Vaadin 7

Google Maps Add-on @ Vaadin Directory

Demo @ Vaadin

Sources @ GitHub

Google Maps finally available for Vaadin 7! This add-on is based on Google Maps JavaScript API v3. Some ideas area loaned from the original
GoogleMapWidget add-on
but the code is (mostly) new.

The add-on includes an ability to limit both the bounds of the center of the map and the visible area. While the logic for the limiting of the center bounds is quite straightforward, it is not so clear how the limiting of the visible area should be implemented. I came to the conclusion that the add-on should not automatically try to adjust the zoom if the user zooms too far away; it only locks the view to the center of the wanted area. Therefore it is left to the actual application to set the minimum zoom level.

Another interesting feature is probably the ability to draw polygons and polylines to the map. The add-on does not currently support dragging or clicking of them but otherwise all the features from the API should be there.

Most bugs will probably be in the bound limits since other features mostly use the JS API directly. If you find any, please report them to me.

Great news!

Hi Tapio! Thank you very much for this contribution. I’ve imported the add-on on a regular vaadin 7 application and right now I am showing the map with a marker but I have two questions, perhaps you can help me. When I deploy the application to the AS, vaadin warns me that my vaadin version is different from the widgetset version ( Vaadin is 7.1.1 and widgetset is 7.0.4 ). I’ve recompiled the widgetset but the message remains telling me that some strange problems may appear. Also, I’ve a problem rendering the map when in a different tab ( assuming that the map is inside a VerticalLayout which is inside a tab ). I noticed that when I first see the map everything is ok, but as soon as I click on another tab and go back to the map tab, just a portion on the top left corner appears … The rest is grey …

Do i report a bug or do you think I should report to google directly ?



This sounds like a problem in the project configuration since the add-on does not affect Vaadin/widgetset version in any way.

This is definitely a bug in the add-on, I haven’t tried to use it with tabs. I’ll check this out.

I’ve just released a new version that fixes the size issue when the map is used in TabSheet. Now it should work without any problems.

Thanks Tapio ! I’ll give it a look.
By the way, have you implemented a method for centering the map according with the markers ? I’ve run into this requirement and I am trying to implement it . If you want I could share the solution in order to include in the add-on.

Ivan Frias

Please, share. I’ll take a look on it and maybe include the feature to the add-on in one way or other.

Hi Tapio,

I’ve just add your component to my apps, but i found this message :

Widgetset does not contain implementation for com.vaadin.tapio.googlemaps.GoogleMap. Check its component connector’s @Connect mapping, widgetsets GWT module description file and re-compile your widgetset.

For your info, your add-on run perfectly when i put on UI class but failed when i put on class extend from Window. Could you help me to resolve these problem …


Hey Tapio,

I’m happy to hear for this new add-on about google-maps. I am trying to do a test within a project using vaadin 7.1.2, but it shows no thing and no exception or error. I am using the sample code that is provided. i am not using Maven, so i added gwt-maps to the project. I tried to add the google js url, using the @JavaScript annotation, but no changes.

Am i missing anything ?!


You need to compile the widgetset of your app and then configure the widgetset file in the web.xml to get rid off this msg.

Something like this.

			<description>Application widgetset</description>

Thanx Bruno,

CMIIW. I’m new in vaadin and java

This is the step i already did :

  1. Put googlemaps-0.5.jar on WEB-INF/lib folder

  2. Edit ivy.xml

  3. Edit ivysettings.xml

  4. Compile widgetset, which created folder com.grp.vaadin.mosaicdashboard.widgetset.MosaicdashboardWidgetset.gwt.xml

  5. Create web.xml in folder WEB-INF

  6. Put these :

    MosaicDashboard com.vaadin.server.VaadinServlet UI com.grp.vaadin.mosaicdashboard.MosaicDashboardUI widgetset com.grp.vaadin.mosaicdashboard.widgetset.MosaicdashboardWidgetSet

on web.xml
7. Running apps… but the same message was show

Your issues really sound like project configuration problems. If you are not developing in localhost, have you got your API key from Google?

Anyway, if you’re using Ivy, you can just add following line to your ivy.xml:

<dependency org="com.vaadin.tapio" name="googlemaps" rev="0.5" />

If it’s of any help, I’ve attached an example Eclipse project that uses the add-on. Hopefully you can compare it to your project and find out where the errors are.

What do you mean by “extend from Window”? (9.18 KB)

TQ Tapio

I’already add

on ivy

What i mean by “extend from Window is”,

I try to put your add-on on Class that extend from Window

just like this

public class MapDataWindow extends Window implements Button.ClickListener {
private int _sid;

Button _btnOK;
Button _btnCancel;

private GoogleMap googleMap;
private final String apiKey = "";

public MapDataWindow(int sid, int filteruserdata){
	loadData(sid, filteruserdata);

public void buttonClick(ClickEvent event) {

private void createLayout() {
	this.setCaption("Add User Task");

	VerticalLayout root = new VerticalLayout();

	googleMap = new GoogleMap(new LatLon(60.440963, 22.25122), 10.0, apiKey);

private void loadData(int sid, int filteruserid){
    googleMap.addMarker("DRAGGABLE: Paavo Nurmi Stadion", new LatLon(
            60.442423, 22.26044), true);
    googleMap.addMarker("DRAGGABLE: Kakolan vankila", new LatLon(60.44291,
            22.242415), true);
    googleMap.addMarker("NOT DRAGGABLE: Iso-Heikkilä", new LatLon(
            60.450403, 22.230399), false);


FYI i’am using localhost

Works like charm even when using a class extending Window. See attached example project. (8.55 KB)

From the sample code provided, you need to set a size to the layout, either with setSizeFull() or with specific width and height.

It’s nice to have polygons and polylines, but I can’t see how to set an icon to a marker or how to add an info window to a marker. Am I missing something ?

Neither is currently supported.

I think I have found a small bug (in version 0.5): when you drag a marker and then ask for its position in a MarkerDragListener.markerDragged(), the position returned is always the original one. It should be the new position.

I can’t see how to set an icon to a marker