¿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:
