How to add google maps object from GWT code?

I would like to use google maps in my GW开发者_运维百科T application. The thing is that the gwt-maps API only supports Google Maps API version 2, and the regular maps api is version 3. So basically what I want to do is to use the standart js maps library from my GWT code, but this doesn't work:

public void onModuleLoad() {
        buildMap();
    }



    private final native void buildMap()/*-{



         <script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
            var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

        }-*/;

I suspect that the problem is that onModuleLoad is not equivalent to body.onload. What do you think?

You should check out gwt-google-maps-v3, the open source wrapper for version 3 of the Maps API. The project is technically deprecated because it's being merged with gwt-google-apis, but it'll at least get you on the right track.

I have a whole app to do this. Check out the project at https://github.com/dartmanx/mapmaker/tree/0.5.2

You may want to pay special attention to my utility class for Google Maps:

https://github.com/dartmanx/mapmaker/blob/0.5.2/src/main/java/org/jason/mapmaker/client/util/GoogleMapUtil.java

Hope it helps, I went through alot of pain with that JSNI.

Jason

Ok, I found a solution.

The first thing I did was to create a UIBinder to hold the div of the map:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</ui:UiBinder> 

And here is the rest of the code:

public void onModuleLoad() {
    mapCanvas canvas = new mapCanvas();
    Document.get().getBody().appendChild(canvas.getElement());
    buildMap();
}   


private final native void buildMap()/*-{
    var latlng = new $wnd.google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: $wnd.google.maps.MapTypeId.ROADMAP
    };
    var map = new $wnd.google.maps.Map($doc.getElementById("map_canvas"), myOptions);
}-*/;