Friday, February 22, 2013

Overlay panel to Maps V3

    Overlays are objects on the map that are tied to latitude/longitude coordinates. Normally, in V2 overlays are added by using map's addOverlay() method. In V3 you may add an overlay to the map directly by using the overlay's setMap() method. Unlike markers, other widgets or panels cannot be added in the same way in both versions. You will probably need some code changes and need to style the panel using CSS.

Sample code for V2:
  ContentPanel panel = new ContentPanel();
     FlexTable fTable = new FlexTable();
     fTable.setWidget(0, 1, new HTML("TEST1"));
     fTable.setWidget(1, 1, new HTML("TEST2"));
     panel.add(fTable);
     panel.setStyleName("cssstyle");
     MapWidget map = new MapWidget();
     map.addControlWidget(panel);
 
     In Maps V3 we dont have addControlWidget() method. Instead, you can create your own controls to handle interaction with the user. Controls are stationary widgets which float on top of a map at absolute positions. Custom controls are positioned on the map by placing them at appropriate positions within the Map object's controls property. (Here is the List of Control Positioning).

Sample code for V3:
  VerticalPanel vp = new VerticalPanel();
  vp.setSize("1200", "800");
  LatLng myLatLng = LatLng.create(13.029603, 80.271800);
  MapOptions myOptions = MapOptions.create();
  myOptions.setZoom(8.0);
  myOptions.setCenter(myLatLng);
  myOptions.setScaleControl(true);
  myOptions.setMapTypeId(MapTypeId.ROADMAP);
  GoogleMap mapWidget = GoogleMap.create(vp.getElement(), myOptions);

  ContentPanel panel = new ContentPanel();
     FlexTable fTable = new FlexTable();
     fTable.setWidget(0, 1, new HTML("TEST1"));
     fTable.setWidget(1, 1, new HTML("TEST2"));
     panel.add(fTable);
     panel.setStyleName("cssstyle");
  mapWidget.getControls()
    .get(new Double(ControlPosition.TOP_RIGHT.getValue())
      .intValue()).push(panel.getElement());
  add(panel);
 
CSS (for V2 & V3):
 .cssstyle {
         z-index: 1;
         float: right;
         position: absolute;
   }