Question

I am trying to use JSNI to display a Google Map within an Application. I have defined the script in my index.html page.

Here is the uibinder definition (snipped down to the essentials):

<g:HTMLPanel ui:field="mapboxV3ContentPanel">
    <!-- div for display of the actual map -->
    <div id="map"><!-- --></div>
</g:HTMLPanel>

Here is the initializeMap() native function:

private native void initializeMap() /*-{

    var latLng = new $wnd.google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 8,
        center: latLng,
        mapTypeId: $wnd.google.maps.MapTypeId.ROADMAP
    };
    var mapDiv = $doc.getElementById('map');
    if (mapDiv==null) {
        alert("MapDiv is null!");
    }
    var map = new $wnd.google.maps.Map(mapDiv, mapOptions);
}-*/;

Unfortunately, mapDiv is null. Any help out there?

I am aware of the gwt-maps and gwt-maps-v3 projects. The first only supports v2 of the API, and gwt-maps-v3 will not work for me, hence the JSNI approach.

Answer 1

In principle, your code should work, and I’ve quickly tested it (by the way, it shouldn’t be related to the Google Maps API at all).

The only important thing is, that you add your <div id="map"> to the document before you call initializeMap().

Please try the following:

@Override
public void onModuleLoad() {

  RootPanel.get().add(new MyUiBinderWidget()); // your widget with the map div
  initializeMap();
}

Note especially, that you can’t call initializeMap() from inside the constructor of MyUiBinderWidget, because at that point, the widget isn’t attached to the document yet.