Google Maps and imagemap widgets updated

I just committed new versions for both components that conform to the new 6.2 packaging system. While I was at it I wrote a simple demonstration application that I will use to demo client side stuff, instead of writing a separate app for each widget.

Demo app


EDIT: Packages removed from this post, they are now available at the
. (1.99 MB)
11148.jar (24.2 KB)
11149.jar (16.6 KB)


Your Google Map widget looks very interesting to me and I tried to play with it. I wrote a simple piece of code based on your demo application and when I try to open the map view browser shows message “Widgetset does not contain implementation for com.vaadin.contrib.googlemapwidget.GoogleMap. Check its @ClientWidget mapping, widgetsets GWT module descrioption file and re-compile your widgetset.”

I have GoogleMap.jar and gwt-maps.jar in the WEB-INF/lib as readme instructed.

What am I doing wrong here? I haven’t tried widgetsets before, so please bear with me…


When you dropped the JAR to WEB-INF/lib, did you get a message asking if you need to compile your widgetset? You need to answer yes to that question and let the plugin to compile a widgetset for your application. The compilation will take around a minute, and you can see its progress by enabling “Verbose compilation output” from the Project properties > Vaadin. You can also trigger the compilation yourself using the “Compile Vaadin widgets” toolbar button.

After the compilation has finished the widget should work.


Yes, the compilation happened after I copied the libraries to WEB-INF/lib. However, I understood that I had to update web.xml file with new widgetset init-param to the main servlet. As soon as I did that, Google Map feature was able to load.

Hi, thanks alot for the new google maps widget!

I have taken your source from the jar file so I can modify it if needed (didn’t modify it yet).
There is a strange add marker behaviour: when I add a marker once, in my applications init method, a new marker is added every time I click on the map.

This is my code in the init metod:

       Marker marker = new BasicMarker(Long.valueOf(1), new Point2D.Double(10, 10), "Title1");

For some reason a new marker is added to the map again (at the same position) every time I click the map? The same is true for your googlemaps demo above, try moving the marker, then clicking on the map will add a new marker.

How to fix it?

Also, when restarting tomcat it tries to serialize sessions, but fails with
Caused by: com.vaadin.contrib.googlemapwidget.overlay.BasicMarkerSource
Probably this needs to be fixed? My goal is to run Vaadin in google app engine, and I think everything in a session has to be serializable in that case?


Guys i am very new to vaadin but quite keen keen on using this google map widget for my application. Ii am looking for ways to just import and use it, ofcourse with some extra code to diplay my preferences.

Any howto guides will be hugely appreciated.

Thanks in advance,

P/s : i am running java 1.6 on a windows XP machine, and deploy my applications to tomcat 6.x

Figured it out guys, thanks a lot.


You have found a bug :slight_smile: I’ll fix it soon.

You are right, I’ll fix that too.


I am planning to use this widgetset for a production environment. So, i need to use a specific google maps key.
There is a way to put this key without recompile GoogleMap.jar ?

Probably i am asking for a new feature :slight_smile:
Something like a new constructor GoogleMap(application, googleMapsKey)

Thanks Henri for the great work!

Hello guys,

I am quite new to vaadin, so i hope you can bear with my ignorance.

I was trying to add a polygonOvelay etc to your google map widget whein i came across
this web page
that states that;
any GWT widget can be used in Vaadin just by adding one extra method.

I am not sure how correct this is, but if it is correct, how is it done, and more importantly why bother creating a google map widget for vaadin when it will be a lot easier to just use the one provided by GWT in

package ?

Thanks in advance.

This is actually exactly how my solution works.

What the quote means is that it is very easy to set up a channel to transfer the client side widget state to the server - just implement the updateFromUIDL() method to receive state from server, and send back changes using updateVariable(). However, you also need to expose the functionality as a server side API, and if the client side widget is complex (like the Maps widget certainly is), it may require a lot of work.

The Google Maps Vaadin component is actually just a wrapper for the Google-provided GWT component, but the important thing is that it can be used transparently in the server side code without having to worry about HTTP requests, Ajax etc.

Yeah, I’m afraid it’s not possible at the moment. It should be doable though, I’ll take a look at that when I get the time.

Both issues are now fixed, and the packages in the first message updated.

Thank you for the very prompt response.

I was interested in using the GWT map widget because there are a lot of examples around on how to do things like add polyOverlays etc with it.

Now, just as an example of the difficulties that i have been facing, please have a look at the code snippet below and let me know why i can’t add a polyOverlay on the map

There is a map displayed when i comment out line 49, but when that line is uncommented, an empty screen is displayed.

public class MyvaadinApplication extends Application {
	private static final long serialVersionUID = 1L;
	PolyOverlay polygon;

	public void init() {
		final Window mainWindow = new Window("Myvaadinproject Application");
		Label label = new Label("Hello Vaadin user");
		mainWindow.addComponent(new Button("What time is it?",
				new Button.ClickListener() {
					public void buttonClick(ClickEvent event) {
						// mainWindow.showNotification(
						// "The time is " + new Date());


	@SuppressWarnings( { "null", "static-access" })
	public GoogleMap getMap() {

		GoogleMap googleMap = new GoogleMap(this, new Point2D.Double(2.65,
				56.77), 2);


		// Create a marker at the centre of the North Sea
		googleMap.addMarker(new BasicMarker(1L,
				new Point2D.Double(2.65, 56.77), "Test marker"));

		MapControl control = null;


                //An empty screen is displayed when this line is uncommented!

                //check to see if overlay is added but just not visible etc
			System.out.println("overlay was added");
			System.out.println("No overlay was added ");

		return googleMap;


	public PolyOverlay addOverLay() {

		long id = 3;
		boolean clickable = false;
		int weight = 4;
		double opacity = 2.9;

		Point2D.Double latLngCoords1 = new Point2D.Double(0.856, 58.83);
		Point2D.Double latLngCoords2 = new Point2D.Double(2.96, 51.316);
		Point2D.Double latLngCoords3 = new Point2D.Double(54.11, 8.63);

		Point2D.Double[] polygonPoints = { latLngCoords1, latLngCoords2, latLngCoords3};

		polygon = new PolyOverlay(id, polygonPoints, Color.GREEN.toString(), weight,
				opacity, clickable);

		return polygon;



Thanks in advance


It seems that the polyline API has changed slightly at some point, and the geodesic parameter is no longer optional. Omitting it will crash the javascript implementation with the results you got.

Fix was straightforward, and I updated the ZIP in the first message.

However, note that color parameter needs to be a RGB hex string in the form “#RRGGBB”. Color.GREEN.toString() produces the string "java.awt.Color[r=0,g=255,b=0]
" which will of course not work. If you fix that and update the component the above code will draw a big line straight through Europe.

Worked like magic, thank you.


This is probably one of my silly questions again, but i want to understand your map widget and vaadin in general because we will be using it for a potentially fairly large project. Everyone one of my Java colleagues that i have introduced Vaadin to has fallen in love with the framework almost straight away, but it is the map widget that we are all still grappling with.

Now my question is; could i use your google map widget as it is to build an application that does things like route display(with colouring), street view, geocoding and reverse geocoding, etc.? It probably is possible with a lot of work, but i was just wondering if i could use your map widget in it’s curent incarnation and get all of that functionality.

Many thanks,



I have just checked out your new version GoogleMapWidget. And I add some new lines based on the demo you wrote.

public void init() {
		setMainWindow(new Window("GoogleMapWidgetApp"));

		// Create a new map instance centered on the IT Mill offices
		GoogleMap googleMap = new GoogleMap(this, new Point2D.Double(22.3,
				60.4522), 8);


		// Create a marker at the IT Mill offices
		BasicMarker m = new BasicMarker(1L, new Point2D.Double(22.3,60.4522), "Test marker"); 
		m.setInfoWindowContent(null, new Label("a"));


But when I click the marker, the infowindow doesn’t come out.
I don’t know why, because the some code runs well in the pervious version.
And I’m not very sure about the parent component, so I always use null.
Could you give a dome about how to set the infowindow?

Thanks a lot!

Yes, I’m afraid the current implementation does not support the geocoding or street view stuff that’s in the maps API, but it should be pretty straightforward to implement.
This link
contains the relevant info, but it will require GWT coding.

The component is just a 10% project for me, and I don’t know when I’ll get around adding such functionality, but of course the code is open source so anyone is welcome to take a stab at it :slight_smile:

That was a regression introduced at the last update, sorry. I fixed it and updated the package in the first post, your code should work with it.

Hi, i created something to use with imageMap but it’s not working with IE, when i try with firefox is ok.

It’s something that i’m doing or it’s a limitation?