javascriptgoogle-mapsgwtgoogle-maps-api-3jsni

How to add google maps object from GWT code?


I would like to use google maps in my GWT 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?


Solution

  • 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);
    }-*/;