Display .gif Images marker in google maps V3

       Showing .gif images in maps V3 is simple, but in default it is disabled. The only thing you need to do is set markeroptions optimized to false. The coding example will help you to use MarkerOptions, MarkerImage, Anchor Positions and using Animated Images.

 

Sample Code for displaying .gif Image:

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);
  add(panel);
 
  MarkerOptions markerOptions = MarkerOptions.create();
  markerOptions.setDraggable(true);
  markerOptions.setOptimized(false);
  MarkerImage image = MarkerImage.create(Flower.gif);
  image.setAnchor(Point.create(23, 65));
  Marker marker = Marker.create(markerOptions);
  marker.setPosition(myLatLng);
  marker.setMap(mapWidget);

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;
   }

 

Marker GWT Maps V3 Single and Double ClickHandler

        GWT Maps V2 supports both single click and double click handler for a single marker in the same window. Whereas, in V3, both methods are available but only single click handler triggers if used for the same marker. In my scenario, I need single click handler for showing InfoWindow and double click handler to navigate to other page(another tab) within application. Normally if u want to implement both in maps V3, single click handler needs a delay or need some asynchronous calls. Here, I have used Geocoder in single click for getting address of particular marker(getting latlng) and showing in InfoWindow.

Sample Code for using both Handlers:

 VerticalPanel panel = new VerticalPanel();
  panel.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(panel.getElement(), myOptions);
  MarkerOptions newMarkerOpts = MarkerOptions.create();
  newMarkerOpts.setPosition(myLatLng);
  newMarkerOpts.setTitle("Hello World!");
  final Marker marker = Marker.create(newMarkerOpts);
  marker.setMap(mapWidget);
 marker.addClickListener(new ClickHandler() {
   @Override
   public void handle(MouseEvent event) {
    Geocoder geocoder = Geocoder.create();
    GeocoderRequest request = GeocoderRequest.create();
    request.setLocation(event.getLatLng());
    geocoder.geocode(request, new Callback() {
     @Override
     public void handle(JsArray<GeocoderResult> a,
       GeocoderStatus b) {
      if (b == GeocoderStatus.OK) {
       if (a.length() > 0) {
        GeocoderResult geocoderResult = a.get(0);
        StringBuffer sb = new StringBuffer();
        JsArray<GeocoderAddressComponent> addressComponents = geocoderResult
          .getAddressComponents();
        for (int i = 0; i < addressComponents.length(); i++) {
         if (i > 0) {
          sb.append(", ");
         }
         sb.append(addressComponents.get(i)
           .getLongName());
        }
        String location = sb.toString();
        InfoWindowOptions infoWindowOptions = InfoWindowOptions.create();
        infoWindowOptions.setContent(location);
        InfoWindow infoWindow = InfoWindow.create(infoWindowOptions);
        infoWindow.open(mapWidget, marker);
       }
      }
     }
    });
   }
  });
 
  marker.addDblClickListener(new DblClickHandler() {
   @Override
   public void handle(MouseEvent event) {
    Window.alert("Double Click Demo");
   }
  });
 

 

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);