Google Maps component available?

Vaadin 6 / 7 / 8 Framework UI
1

Hi All,

Is there a working google map component available for the toolkit?

I saw a mention that there is one in incubator - I checked out the sources but I was unable to compile/use it.

I would really like to use the toolkit, but my application really needs the maps.

Kind regards,
Andy

2

Here’s an article about it w/ instructions: http://dev.itmill.com/wiki/Articles/WidgetCreationHowto
There are attached sources and instructions.

3

There’s the Reserver demo application, which integrates with Google Maps.

Check out the demo:
http://toolkit.itmill.com/demo/Reservr
. It’s also included in the installation package, just run the start script to run the demo or install the package as an Eclipse project (see QuickStart section in Manual) if you want to experiment with the demo source code.

The sources are included in the installation package, under WebContent/WEB-INF/src/com/itmill/toolkit/demo/reservation/. The GoogleMap.java is the server-side component, while the custom widgetset and the client-side integration component are in the “gwt” subdirectory.

You can view the sources also at:
http://dev.itmill.com/browser/versions/5.3/src/com/itmill/toolkit/demo/reservation
.

4

Hi again and thank You for the answers.

I got the component working - map + moving + zooms + markers work nicely.

However - If I create a Marker like this:


  private void addMarker(Double location, int id, GoogleMap map, MarkerSource markerSource, String title) {

    VerticalLayout p = new VerticalLayout();
    p.setWidth("400px");
    p.setHeight("200px");
    p.addComponent(new Button("Select me!"));
    p.addComponent(new Label("This is info window content for: " + title));

    BasicMarker marker = new BasicMarker(new Long(id), location, title);
    marker.setInfoWindowContent(map, p);

    map.addMarker(marker);
  }

Only the Layout component will be visible: The resulting DOM/HTML looks like this:
(cut/paste with from Firebug)


<div class="i-verticallayout" style="overflow: hidden; height: 200px; width: 400px;">
  <div style="overflow: hidden; width: 0px; height: 0px;">
    <div style="overflow: hidden; height: 0px; width: 0px; padding-left: 0px; padding-top: 0px;">
      <div style="float: left; margin-left: 0px;">
        <button class="i-button" tabindex="0" type="button">
          <span>Select me!</span>
        </button>
      </div>
    </div>
    <div style="overflow: hidden; height: 0px; width: 0px; padding-left: 0pt; padding-top: 0px;">
      <div style="float: left; margin-left: 0px;">
        <div class="i-label" style="width: 0px;">This is info window content for: -1/TKY Housing Office</div>
      </div>
    </div>
    <div style="overflow: hidden; width: 0px; height: 0px; clear: both;"/>
    </div>
  </div>
</div>

Ie. the components inside the VerticalLayout will not be visible since the wrapping div is of size (0px, 0px)?

Any workarounds or fixes available?

I also tried a tabbed version of marker info window with same results - single elements work nicely but nested will not. (for example: Panel + labels)

With kind regards,
Andy

5

Sorry, forgot to mention that I’m using the latest incubator GoogleMap version.
(btw. Thanks to Henri - great work)

Andy

6

Hi,

Just to let you know that I updated the component to Vaadin 6.0, and fixed the bug you reported. More info
here
.