Friday, February 15, 2013

Maps V3(gwt-maps-3.8.0) using GWT - 2.4.0


Google Maps V3 API allows you to add Map functionality to your application. To get started, download gwt-maps-3.8.0 here. One of the common issue faced by the developers in displaying maps V3 is its "Size". Previously, Maps V2 provided Map as a widget, which can be added to other widgets directly. Also, Size of the Maps can be varied by just using 'setSize(width,height)' method.

       Unlike Maps V2, V3 Maps doesn't have setSize(width,height) method. Instead, Map Size depends on panel size in which map is added.

Sample Code for Displaying Maps V3 in Application:

public class MapTest extends HorizontalPanel {
    GoogleMap map;
    VerticalPanel mapVp = new VerticalPanel();

    public MapTest(){
        mapVp.setSize("1200", "800");
        LatLng myLatLng = LatLng.create(30.440099, 36.843498);
        MapOptions myOptions = MapOptions.create();
        myOptions.setZoom(5);
        myOptions.setCenter(myLatLng);
        myOptions.setMapTypeId(MapTypeId.TERRAIN);
        myOptions.setMapTypeControl(true);
        map = GoogleMap.create(mapVp.getElement(), myOptions);
        add(mapVp)
    }
}

Basically, if you try to display map in multiple windows using the same piece of code(In two or three different tabs), the map will not be fully loaded. Instead, half of the map will be grayed out. May be map canvas did not get fully rendered before google map was accessing it. So, I solved this by adding a short delay using gwt-Timer.

LatLng myLatLng = LatLng.create(24.440099, 46.843498);
final MapOptions myOptions = MapOptions.create();
myOptions.setZoom(5);
myOptions.setCenter(myLatLng);
myOptions.setMapTypeId(MapTypeId.TERRAIN);
myOptions.setMapTypeControl(true);
Timer load = new Timer() {

@Override
public void run() {
map = GoogleMap.create(mapVp.getElement(), myOptions);
}
};
load.schedule(1000);