Google Maps for Vaadin 7

Tapio1 · August 14, 2013, 11:43am

Google Maps Add-on @ Vaadin Directory

Demo @ Vaadin tapio.virtuallypreinstalled.com

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.

F1113 · August 14, 2013, 12:29pm

Great news!

Ivan76 · August 14, 2013, 7:30pm

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 ?

Regards,
ivan

Tapio1 · August 15, 2013, 7:07am

Hi!

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.

Tapio1 · August 16, 2013, 9:15am

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.

Ivan76 · August 17, 2013, 3:12pm

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.

Regards,
Ivan Frias

Tapio1 · August 17, 2013, 4:43pm

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

Veibert · August 20, 2013, 10:00am

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 …

Thx.

bruno5 · August 20, 2013, 10:24am

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 ?!

bruno5 · August 20, 2013, 10:46am

Veibert,

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.


        <init-param>
			<description>Application widgetset</description>
			<param-name>widgetset</param-name>
			<param-value>com.example.googlemaps7_1.widgetset.Googlemaps7_1Widgetset</param-value>
		</init-param>

Veibert · August 20, 2013, 1:49pm

Thanx Bruno,

CMIIW. I’m new in vaadin and java

This is the step i already did :

Put googlemaps-0.5.jar on WEB-INF/lib folder
Edit ivy.xml
Edit ivysettings.xml
Compile widgetset, which created folder com.grp.vaadin.mosaicdashboard.widgetset.MosaicdashboardWidgetset.gwt.xml
Create web.xml in folder WEB-INF
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

Tapio1 · August 21, 2013, 8:03am

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”?
13140.zip (9.18 KB)

Veibert · August 21, 2013, 10:46am

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

@SuppressWarnings(“serial”)
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){
	createLayout();
	loadData(sid, filteruserdata);
}

@Override
public void buttonClick(ClickEvent event) {
}

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

	VerticalLayout root = new VerticalLayout();
	root.setWidth("900px");
	root.setHeight("400px");
	setContent(root);

	googleMap = new GoogleMap(new LatLon(60.440963, 22.25122), 10.0, apiKey);
    googleMap.setSizeFull();
    
    root.addComponent(googleMap);
}


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);
    googleMap.setMinZoom(4.0);
    googleMap.setMaxZoom(16.0);
}

}

Veibert · August 21, 2013, 10:47am

FYI i’am using localhost

Tapio1 · August 21, 2013, 12:22pm

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

Cedric23 · August 21, 2013, 1:00pm

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

Cedric23 · August 21, 2013, 1:43pm

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 ?

Tapio1 · August 21, 2013, 10:47pm

Neither is currently supported.

Cedric23 · August 22, 2013, 8:52am

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.

Muhamad4 · August 22, 2013, 9:03am

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