GWT Google Map Api V3 - broken when changing it

Question

It is working fine for me for the first time it is rendered. But, If I change anything over the map or recreate it, its broken.

Here is the screen shot for how it looks.

Here is a screen shot after I changed the results per page value.

This is my code.

@UiField DivElement mapPanel;

private GoogleMap googleMap;

public void loadAllMarkers(final List<LatLng> markers)
{
    if(!markers.isEmpty())
    {
        final MapOptions options = MapOptions.create();
        options.setMapTypeId(MapTypeId.ROADMAP);

        googleMap = GoogleMap.create(mapPanel, options);

        final LatLngBounds latLngBounds = LatLngBounds.create();

        for(LatLng latLng : markers)
        {
        final MarkerOptions markerOptions = MarkerOptions.create();

        markerOptions.setPosition(latLng);
        markerOptions.setMap(googleMap);

        final Marker marker = Marker.create(markerOptions);
        latLngBounds.extend(marker.getPosition());

        }

        googleMap.setCenter(latLngBounds.getCenter());
        googleMap.fitBounds(latLngBounds);

    }
}

I am calling the loadAllMarkers() method whenever new results needs to be loaded.

Can someone point out what I am doing wrong here.

Answer 1

This seems to come from the following (which I pulled from a Google+ Community - GWT Maps V3 API):

Brandon DonnelsonMar 5, 2013

I've had this happen and forgotten why it is, but mapwidget.triggerResize() will reset the tiles. This seems to happen when the onAttach occurs and animation exists meaning that the div started smaller and increases in side, but the map has already attached. At the end of the animation, the map doesn't auto resize. I'v been meaning to investigate auto resize but I haven't had time to attack it yet.

In your case, you would call googleMap.triggerResize() after you finish your changes. this solved my problem when I had the exact same issue. I know it's a little late, but I hope it helps!

Another answer there was to extend the Map widget with the following:

   @Override
protected void onAttach() {
    super.onAttach();
    Timer timer = new Timer() {

        @Override
        public void run() {
            resize();
        }
    };
    timer.schedule(5);
}

/*
 * This method is called to fix the Map loading issue when opening
 * multiple instances of maps in different tabs
 * Triggers a resize event to be consumed by google api in order to resize view
 * after attach.
 *
 */
public void resize() {
    LatLng center = this.getCenter();
    MapHandlerRegistration.trigger(this, MapEventType.RESIZE);        
    this.setCenter(center);
}