CODEWITHSUNDEEP
gwtgoogle-maps-api-3
peter
peter

Reputation: 177

Using Google Maps v3 DrawingManager from GWT

I am working on a project that uses GWT 2.4 and gwt-maps.jar to create a MapWidget and place it in a panel with various controls. This all works fine.

I would like to give my users the ability to draw a polyline on the map and use the getLength method in Polyline to determine the length of the drawn polyline. I have done this before in ActionScript and it was a bit of a pain in the neck (the rubber-banding between the last clicked point and the mouse in particular) and I was hoping not to have to do that again.

The drawing manager looks like it might be a good fit (for the drawing part at least) but it is in v3 of the API and the gwt-maps.jar code only is at v2. So I thought I might write some JavaScript and call out from GWT using JSNI, something along the lines of (in wibble.html - my top-level HTML file):

var dM = new google.maps.drawing.DrawingManager( ...

function showDM(map) {
    dM.setMap(map);
    dM.setOptions({
        drawingControl: true
});

And then (in Wobble.java):

private MapWidget map = new MapWidget( ...

private native void showIt(final MapWidget map) /*-{
    $wnd.showDM(map);
}-*/;

I have tried passing the MapWidget and its peer but in both cases I get an invalid value error when calling setMap.

Has anybody tried (and succeeded) in doing this or am I barkig up the wrong tree?

Thanks,

SO

Upvotes: 1

Views: 954

Answers (1)

helios
helios

Reputation: 13841

First of all, I only have experience with GWT and GWT-JS communication. Not Google APIs.

Now:

Looks like you are passing a GWT object (compiled javscript object) to DrawingManager. The problem is the DrawingManager API receives "nice javascript objects" (not objects with obfuscated methods).

If you want to pass an HTML Element is ok (but then, you must pass widget.getElement() that really is a <div> object (by example).

Solution

Indeed GMaps API docs says you must pass a Map object from the GMap API. You create that map with an element that will be the canvas.

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

If you want to use your MapWidget as the map canvas then you can use its HTML Element.

In GWT:

private native void showIt(final MapWidget map) /*-{
    $wnd.showDM(map.getElement()); // use mapwidget's element as canvas
}-*/;

In javascript:

function showDM(canvasToUse) {
    // TODO: define myOptions :)
    var map = new google.maps.Map(canvasToUse, myOptions);
    dM.setMap(map);
    dM.setOptions({
        drawingControl: true
});

Disclaimer

It's only based on my experience with GWT and JSNI. I didn't try it nor have experience with GMaps or DrawingManager. You should check what I say and tell me if I had luck :)

Hope it helps!

Upvotes: 1

Related Questions