Geek & Roll - Blog Archive » Google Maps, Google Web Toolkit, y yo

Google Maps, Google Web Toolkit, y yo

Cesar March 22nd, 2007 programacion 23 comentarios

Inspirado por un post de mi buen amigo Adrian Chavira, me dispuse a crear un demo de como utilizar la API de Google Maps utilizando Google Web Toolkit porque no me gusta salir de la comodidad que es Java.

Podríamos utilizar JavaScript desde Java pero eso le quita el encanto a todo, así que mejor utilizamos una extensión a GWT que nos empaqueta la funcionalidad de la API de mapas de Google para así seguir utilizando Java con los mapas.

¿Suena fácil? es porque lo es… Continúen leyendo en una exclusiva más de Geek&Roll.

Antes que nada necesitan tener una cuenta de Google, sacar una llave para la API, y descargar la extensión de la cual les hablo. Al momento de obtener la llave para la API, asegúrense de hacerlo para el dominio http://localhost:8888/ o substituyan el puerto 8888 por el que utilicen con el shell de desarrollo de GWT (hosted mode). Esto es porque de no ser así, la API no les permitirá utilizar su llave argumentando que se obtuvo esa llave para un dominio distinto. Cuando vayan a poner su super revolucionaria aplicación de mapas en su propio dominio fuera de su computadora pueden sacar otra llave para su nuevo dominio y listo.

Bien, empezamos. Si no saben ni por donde entrarle a GWT les recomiendo leer los capítulos 1, 2 y 3 sobre GWT creados por un servidor. Creamos un proyecto nuevo de la manera usual, el mio tiene un nombre muy original: MapsDemo. En la página HTML del módulo de inicio tenemos que agregar dos cosas: la llave para la API de Google Maps y un DIV que funcionará como contenedor del mapa.




























Como vemos es prácticamente el html que genera applicationCreator, más aquel detalle de la llave y el DIV. ¿Todo clarito? sigamos. Se tiene que agregar el jar a las librerías de las que dispone GWT al lanzar hosted mode. Para esto editamos el archivo de módulo (MapsDemo.gwt.xml) y hacemos que se vea de la siguiente manera:






Solo estamos agregando un inherits con el nombre completamente calificado de la clase que descargamos anteriormente para usar los mapas. Está de más decir que se tiene que importar el jar en el proyecto. Si se está utilizando Eclipse en las propiedades del proyecto se importa como Standalone jar. Si no saben de lo que estoy hablando pueden revisar el capítulo 3 de Programando con GWT.

La clase MapsDemo.java es extremadamente sencilla, y es ahí cuando apreciamos realmente a GWT. Veamos:


package com.divinesoft.demos.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;
import com.mapitz.gwt.googleMaps.client.GLatLng;
import com.mapitz.gwt.googleMaps.client.GMap2;

public class MapsDemo implements EntryPoint {

public void onModuleLoad() {
// TODO Auto-generated method stub
RootPanel.get("map").setSize("500px", "500px");
Element e = RootPanel.get("map").getElement();
GMap2 map = new GMap2(e);
GLatLng pos = new GLatLng(27, -109);
map.openInfoWindowHtml(pos, "Ciudad Obregón");
map.setCenter(pos);
map.setZoom(5);
}
}

Mapa

Primero al DIV del mapa le hacemos un resize, esto se pudo haber hecho con CSS en el HTML pero como soy programador… bueno esa es otra historia. Después obtenemos precisamente ese DIV, instanciamos un nuevo objeto GMap2 y le pasamos como argumento el DIV. Creamos una posición nueva indicándole la latitud y longitud deseada y centramos al mapa a esa posición. Para finalizar fijamos el nivel de zoom a 5. Todo lo de arriba queda más o menos como en la imagen.

Más fácil no se puede señores.

23 Comentarios

Cesar Olea Punto Com » Desde Obregón

April 1st, 2007

[...] bueno que me metí a eso del GWT. [...]

Alex

December 20th, 2007

Hola,

he estado intentando correr la aplicación utilizando Eclipse y un Tomcat 5.5, pero cuando intento acceder a la URL la página carga bien pero sale en blanco. ¿Puedes darme alguna idea de por qué no funciona?

Cesar

December 21st, 2007

Si no te sale ningún error al cargar la página lo más seguro es que nunca se ejecute el código que pone el mapa en la página, esto es, el EntryPoint.

Lo que te recomiendo es que verifiques que tengas configurada correctamente la aplicación para utilizar el módulo de mapas, el archivo *.gwt.xml, fíjate que tengas la línea que dice inherits name=‘com.mapitz.gwt.googleMaps.GoogleMaps’

También, una vez en el EntryPoint la aplicación toma el elemento identificado por “map” y ahí inserta el mapa, por lo que si dicho elemento no se encuentra en tu HTML, el mapa nunca saldrá en la pantalla. Asegúrate de tener el div con id=”map” en el archivo HTML del módulo.

Javier

February 11th, 2008

Este blog me ha hecho reir y llorar… Reir por la gracia de la redacción y llorar, porque, con la sencillez de la explicación, hoy, lunes, ya tengo hecho el trabajo que me había puesto para dos días… Joe chic@s, me habeis alegrado el lunes!! Solo un comment, el googlipse del que hablais en otra pagina del blog ahora se llama cypal studio for GWT.
GRACIAS!!

Cesar

February 11th, 2008

;)

Martin

March 1st, 2008

La verdad cesar que muy bueno este post, por lo fácil que lo has expuesto…

solo una palabra Grosso!!

Saludos

Josico

April 12th, 2008

Buenas, tengo un problemilla, resulta de que me he descargado el jar, lo he renombrado a GoogleMaps como se intuye que dice el post, pero no se donde ponerlo, ¿creo un directorio mapitz/gwt/googleMaps/ y dentro pego el googleMaps?
Cuando lo hago y incluyo la linea en el xml me dice al compilar que no se encuentra GoogleMaps.gwt.xml.

Espero que me puedan ayudar.

Cesar

April 15th, 2008

Lo que pasa es que al lanzar hosted mode este no encuentra tu JAR. Según recuerdo, GWT incluye un archivo donde puedes agregar paquetes al path. Si nunca has programado en Java puede parecerte algo raro esto, pero básicamente es decirle a GWT donde encontrar tu nuevo JAR.

No recuerdo exactamente cual es el archivo, pero es el que lanza el HostedMode. Debe estar dentro de la carpeta donde instalaste GWT y contiene una lista de JARs. Agrega tu JAR ahi, guarda y listo.

Ikarus

April 16th, 2008

¡Hola!
He de decir que me ha servido de ayuda tu blog en lo referente a gwt.

Solo una preguntilla. ¿Te funciona tu compilación que no hosted mode?

En mi aplicación en hosted mode me funciona todo ok. Incluso la compilación me da succesfull. Pero cuando accedo a través del internet explorer o del firefox… aparece el recuadro de 400px * 400px con los controles que le he añadido al mapa pero con el fondo gris. Y encima, la aplicación se rompe por todos los sitios.

Yo estoy flipando. He probado a poner el código del mapa en MiAplicacion.java que es quien tiene el método onModuleLoad() (Me creé una clase con nombre MapaGoogle que se dedica a manipular el mapa) pero nada.

Tenía instalado el tomcat 5.0.28, por si acaso instale el tomcat 6 (última versión a día de hoy 17-04-2008) y sigue igual. Tengo en el xml la line del inherits.

Estoy flipando, cualquier ayuda es bienvenida.

Ikarus

April 16th, 2008

¡Hola otra vez!

Que conste que por si acaso he utilizado tu ejemplo de como utilizar el mapa de google, pero nada. Compilar compila, pero el fondo es gris.

Tengo las keys, que sólo es una puesto que tanto en el tomcat como en el google web toolkit la url del dominio es http://localhost:8888/
Así pues, me parece que ya es hora para que los señores de google saquen una documentación decente de como integrar el uso de google maps en gwt y sobre todo, que compile y se pueda utilizar la aplicación.

Saludos!

Cesar

April 16th, 2008

Tienes razón con respecto a que el propio Google debería dar soporte para sus aplicaciones dentro de GWT, y no depender de librerías de terceros. Vamos, con que lo hicieran más sencillo me conformaría!

Con respecto a tu compilación, si te aparecen los controles del mapa quiere decir que el código de la librería de mapas se está ejecutando bien.

Puedes probar haciendo una aplicación demo en javascript que use la api de mapas y con la key que tu tienes? es para probar que tu key esta funcionando correctamente. La otra es que estes poniendo la key en un lugar incorrecto, debe ir dentro del HTML.

Por último, estas seguro que hay mapas para el lugar que estas tratando de ver en el mapa, y al nivel de zoom que le especificaste?

Ikarus

April 16th, 2008

¡Hola!

Vaya, ya son las 2:28 de la mañana. Bufff! y mañana.. digo hoy hay clase :-D

Resulta que se donde esta el problema… en el maldito Resul o en el GGeocoderClient. El GGeocoderClient lo utilizo para obtener la latitud y longitud de una dirección o descripción de un lugar. El Resul funciona como un callback, almacenando el resultado de la traducción de dirección a posición geográfica.

El problema está en que para la aplicación necesito hacer dicha traducción en tiempo de ejecución porque a priori desconozco dicha latitud y longitud.

También se me ha ocurrido mostrar un mapa y según vas pinchando que se muestre la longitud y la latitud si necesidad de estar buscando dichos datos por internet, ya que resultaría muy engorroso para la aplicación.

Pero queda totalmente descartado el tema de la key, sino, en el modo hosted tampoco funcionaría. Por cierto, si pongo directamente la latitud y la longitud si me compila.

Ikarus

April 16th, 2008

Donde he puesto GGeocoderClient es GClientGeocoder. Y que antes poniendo longitud y latitud directamente y que no compilase era fallo mio.

Saludos!

Ikarus

April 16th, 2008

¡¡YA ESTÁ!!

Os pongo el código en el cual hay una linea que hací a que no funcionase:

private void inicializarMapa(){
//RootPanel.get(”mapa”).setVisible(true);
RootPanel.get(”mapa”).setSize(”400px”, “400px”);
e = RootPanel.get(”mapa”).getElement();
mapa = new GMap2(e);
mapa.enableScrollWheelZoom();
mapa.addControl(GControl.GLargeMapControl());
mapa.addControl(GControl.GMapTypeControl());
mapa.setMapType(GMapType.G_HYBRID_MAP());
cliente= new GClientGeocoder();
cliente.getLatLng(direccion, resul);
}

Pues la linea siguiente es la que he tenido que comentar para que funcione el mapa:
mapa.setMapType(GMapType.G_HYBRID_MAP());

Una vez comentada ya va. Por cierto, que tampoco se pueden utilizar los try{}catch(){}
En fin, espero que para siguientes versiones de gwt y del google maps saquen una mejor documentación, así como, una mejor documentación. Me entendeis ¿no?
Y también, una mejor compatibilidad entres sus propios productos.

Y la imagen que demuestra que funciona la aplicación.

Saludos!

Ikarus

April 16th, 2008

No se si aparece la url de la imagen, aquí esta:

http://img182.imageshack.us/my.php?image=joderporfinestaputamiervk2.jpg

Saludos!

PD: Gracias por responder, se agradece.

Cesar

April 16th, 2008

Gracias por compartir tu solución con nosotros :)

Pedro

April 17th, 2008

Buenas tengo un problemilla, cuando compilo con GWT lo hace correctamente pero al iniciar con el shell.cmd en hosted mode me da el siguiente error. He importado las librerias en
eclipse y no me da error de codigo en él.

Gracias de antemano, saludos figuras!!

[ERROR] Unable to load module entry point class com.google.gwt.sample.hello.client.Hello (see associated exception for details)
com.google.gwt.core.client.JavaScriptException: JavaScript TypeError exception: $wnd.GMap2 is not a constructor
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:481)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeHandle(ModuleSpace.java:225)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeHandle(JavaScriptHost.java:89)
at com.mapitz.gwt.googleMaps.client.GMap2Impl.create(GMap2Impl.java:8)
at com.mapitz.gwt.googleMaps.client.GMap2.(GMap2.java:26)
at com.google.gwt.sample.hello.client.Hello.onModuleLoad(Hello.java:39)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:342)
at com.google.gwt.dev.shell.BrowserWidget.attachModuleSpace(BrowserWidget.java:326)
at com.google.gwt.dev.shell.moz.BrowserWidgetMoz.access$000(BrowserWidgetMoz.java:35)
at com.google.gwt.dev.shell.moz.BrowserWidgetMoz$ExternalObjectImpl.gwtOnLoad(BrowserWidgetMoz.java:55)

Pedro

April 18th, 2008

Problema solucionado,

de nuevo, saludos figuras!!

Jarto

May 13th, 2008

Hola!!

Tengo exáctamente el mismo problema que tu Pedro, ¿cómo puedo solucionarlo?

Gracias de antemano.

josue

June 17th, 2008

Oye estoy empezando con GWT-EXT, eclipse y cypal
pero no logro nada aun alguien podria decirme donde encotrar información sobre esto, bueno encontre un link pero el ejemplo no me funciona.

http://www.gwt-ext.com/wiki/index.php/Using_Eclipse

Miguel

September 16th, 2008

Hola,

Estoy viendo las posibilidades del API de google maps para GWT.

No encuentro ninguna clase que cubra el objeto GDirections del API de gmaps. Mi idea es calcular rutas, obtener la polilinea con la ruta y tratarla.
No se si podeis darme alguna idea o comentarme si esto es posible.

Gracias.

Berta

December 18th, 2008

Tengo un problema. Si el mapa lo quisiera poner dentro de cualquier contenedor como por ejemplo “Vertical Panel”. ¿Como lo tendria que hacer? ¿Es posible?

Gracias de antemano

cristian

December 28th, 2008

hola como estas? muy buen post. los enlaces de los capitulos 1, 2 y 3 estan muertos.
desde ya muchas gracias

Haz un comentario:

Es necesario que dejes tu nombre y correo electrónico (no se publicarán).

Si dejas un comentario anónimo, con insultos o ajeno al tema, iremos hasta tu casa y le diremos a tu mamá la cantidad de porno que hay en tu computadora. Si, lo sabemos.