Primeros Pasos con Google Maps Api para GWT

Hoy tratare de mostrar un poco del Api de Google Maps para GWT, en realidad los ejemplos que vienen con la Api son bastante explicativos, pero acá mostrare un pequeño vistazo. El ejemplo que muestro lo realice íntegramente con GWT nativo.

¿Cómo muestro un mapa con Google Maps Api para GWT?
 Para insertar un mapa de Google Maps tienes que solicitar un API Key (solo si la aplicación se encuentra en un servidor público); sin embargo, podrás usar la Google Maps Api  sin necesidad de la API Key, siempre que ejecutes localmente (localhost).

/**** Codigo fuente GoogleMapsExample.java *****/
public class GoogleMapsExample implements EntryPoint {

 public void onModuleLoad() {
  /*
   * En el primer parametro se debe de colocar
   * el Api Key en caso sea necesario  
  */
 Maps.loadMapsApi("", "2", false, new Runnable() {
  public void run() {
          buildUi();
        }
  });      
 }
 private void buildUi()
 {  
  final MapWidget map = new MapWidget();
 map.setWidth("500px");
  map.setHeight("500px");
 final LatLng coordenadas = LatLng.newInstance(-18.0376, -70.2506);
 //mostramos el mapa centrado con las coordenas (-18.0376, -70.2506)
 map.setCenter(coordenadas);
 //establecemos en nivel de zoom
 map.setZoomLevel(18);      
 RootPanel.get().add(map);    
 }
}   

¿Cómo añadir controles?
 Se pueden añadir muchos tipos de controles de zoom y navegación aquí la documentación.

private void buildUi()
 {
  final MapWidget map = new MapWidget();
  map.setWidth("500px");
  map.setHeight("500px");
  final LatLng coordenadas = LatLng.newInstance(-18.0376, -70.2506);
  //mostramos el mapa centrado con las coordenas (-18.0376, -70.2506)
  map.setCenter(coordenadas);
  //establecemos en nivel de zoom
  map.setZoomLevel(18);
  //añadimos control selector de tipo de mapa
  map.addControl(new MapTypeControl());
  //añadimos control de desplazmiento con zoom
  map.addControl(new LargeMapControl());
  //añadimos control escala de mapa
  map.addControl(new ScaleControl());
  RootPanel.get().add(map);        
 }

¿Cómo cambiar el tipo de mapa y añadir marcas?
 Podemos escoger el tipo de mapa que deseamos (satelital, hibrido, normal, etc.), además de poder añadir marcar a nuestro mapa.

private void buildUi()
 {
  final MapWidget map = new MapWidget();
  map.setWidth("500px");
  map.setHeight("500px");
  final LatLng coordenadas = LatLng.newInstance(-18.0376, -70.2506);
  //mostramos el mapa centrado con las coordenas (-18.0376, -70.2506)
  map.setCenter(coordenadas);
  //establecemos en nivel de zoom
  map.setZoomLevel(18);
  //añadimos control selector de tipo de mapa
  map.addControl(new MapTypeControl());
  //añadimos control de desplazamiento con zoom
  map.addControl(new LargeMapControl());
  //añadimos control escala de mapa
  map.addControl(new ScaleControl());
  //cambiamos a vista mapa satelital
  map.setCurrentMapType(MapType.getSatelliteMap());
  //creamos un marcador en la coordenadas (-18.0376, -70.2506)
  Marker mrk=new Marker(coordenadas);
  map.addOverlay(mrk);
  RootPanel.get().add(map);        
 }

¿Cómo lanzar una Ventana de Información (InfoWindow) al hacer un click sobre un Marcador?
 Al hacer un click sobre un Marcador se puede levantar una Ventana de Información que viene por defecto; sin embargo, esta Ventana de Información puede contener contenido html como Widgets.

private void buildUi()

 {

  final MapWidget map = new MapWidget();

  map.setWidth("500px");

  map.setHeight("500px");

  final LatLng coordenadas = LatLng.newInstance(-18.0376, -70.2506);

  //mostramos el mapa centrado con las coordenas (-18.0376, -70.2506)

  map.setCenter(coordenadas);

  //establecemos en nivel de zoom

  map.setZoomLevel(18);

  //añadimos control selector de tipo de mapa

  map.addControl(new MapTypeControl());

  //añadimos control de desplazamiento con zoom

  map.addControl(new LargeMapControl());

  //añadimos control escala de mapa

  map.addControl(new ScaleControl());

  //cambiamos a vista mapa satelital

  map.setCurrentMapType(MapType.getSatelliteMap());

  //creamos un marcador en la coordenadas (-18.0376, -70.2506)

  final Marker mrk=new Marker(coordenadas);

  map.addOverlay(mrk);  

  mrk.addMarkerClickHandler(new MarkerClickHandler(){

   @Override

   public void onClick(MarkerClickEvent event) {

    //Widget en InfoWindow Normal

    Image img=new Image();

    img.setUrl("http://lh6.ggpht.com/_oxEB1W000Zc/S5sCOsecjdI/AAAAAAAAAGg/_CDb-vUE7gs/s800/13%20DE%20SET.%20%20PLAZA%20ATMAT.JPG");

    img.setWidth("235px");

    img.setHeight("267px");

    //Widget en InfoWindow Maximizado

    HTML video= new HTML("<object width='180' height='160'><param name='movie' value='http://www.youtube.com/v/8qp_VSmV17I&hl=es_ES&fs=1&rel=0'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='http://www.youtube.com/v/8qp_VSmV17I&hl=es_ES&fs=1&rel=0' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='false' width='180' height='160'></embed></object>");

    HTML album= new HTML("<embed type='application/x-shockwave-flash' src='http://picasaweb.google.com/s/c/bin/slideshow.swf' width='180' height='160' flashvars='host=picasaweb.google.com&hl=es&feat=flashalbum&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2FVictorCabreraZolla%2Falbumid%2F5447950544182068785%3Falt%3Drss%26kind%3Dphoto%26hl%3Des' pluginspage='http://www.macromedia.com/go/getflashplayer'></embed>");    

    HorizontalPanel hp=new HorizontalPanel();

    hp.setSpacing(20);

    VerticalPanel vp=new VerticalPanel();

    vp.add(new HTML("video"));

    vp.add(video);

    vp.add(new HTML("diapositiva"));

    vp.add(album);

    hp.add(new HTML("<p style=\"text-align: justify;\">Este parque se construyo como un esfuerzo mancomunado del Sr. Alcalde  Jorge Jumanor  con los vecinos, haciendo realidad un sueño muchas veces  postergado por las anteriores autoridadede de Turno</p><p style=\"text-align: justify;\">La Obra se empezo  a contruir a inicios del año 2009 culminandose satisfactoriamente a  mediados del  2009 en el aniversario del Distrito Gregorio  Albarracion  Lanchipa</p>"));

    hp.add(vp);

    //creamos la Ventana de Informacion

    InfoWindowContent info=new InfoWindowContent(img);    

    info.setMaxTitle("Parque Perez Gamboa");

    info.setMaxContent(hp);

    map.getInfoWindow().open(mrk.getLatLng(),info);

   }

  }); 

  RootPanel.get().add(map);        

 } 

 En en siguiente video se muestra la ejecución del ejemplo: