Bookmarklets y Google Maps

Hace unos dias ya comente brevemente que eran los bookmarklets y para que podian ser utilizados. Por lo general se trata de funciones y métodos de javascript que son utilizados desde la barra del navegador pero también podemos hacer uso de funciones definidas en la propia página que visitamos.

Por ejemplo, ¿quien no ha sentido curiosidad por conocer las coordenadas de su casa cuando visita Google Maps? una forma "sencilla" de saber las coordenadas de un punto en los mapas de google es pulsar sobre el enlace que muestra el texto "enlazar", al pulsar en dicho enlace se muestra una pequeña ventana que nos da información sobre la url que debemos teclear en nuestro navegador si queremos ir directamente a la localización que tenemos en pantalla (o si queremos guardarla en nuestros favoritos). También nos muestra el código que deberiamos utilizar si quisieramos poner el mapa en nuestra página web.

Ambos códigos deben saber la localización exacta (latitud y longitud) del punto que estamos visualizando ya que de no ser así no podrian volver a mostrarlo. Uno de los parámetros que se muestran es el parámetro llamado ll, es decir, latitud y longitud


http://maps.google.es/?ie=UTF8&ll=40.513799,-3.383789&spn=14.755672,31.464844&t=h&z=5

En el caso concreto del punto que estamos visualizando obtenemos que la latitud es 40.513799 y la longitud -3.383789 pero como ya comentaba al principio de este post, con un bookmarklet se puede automatizar este proceso. ¿Como obtener el código javascript que nos de esta información? para ello hay que documentarse un poco sobre como funciona GMaps, concretamente, su API

La API (application programming interface) no es ni más ni menos que un conjunto de funciones (en este caso javascript) que facilitan al usuario la tarea de "comunicarse" con la aplicación, en este caso, con el mapa.

En nuestro bookmarklet vamos a hacer uso de dos funciones de la API de Google Maps, gApplication.getMap y GEvent.addListener.

gApplication.getMap obtiene un apuntador al mapa que estamos visualizando mientras que GEvent.addListener permite definir un evento sobre el mapa. En este caso vamos a hacer que cada vez que hacemos click sobre el mapa nos muestra la latitud y longitud en el cuadro de búsqueda, de esta forma, conforme nos vamos moviendo por el mapa podremos ir viendo las distintas latitudes y longitudes donde nos vamos posicionando.

El bookmarklet seria algo así:

javascript: mapa = gApplication.getMap(); GEvent.addListener(mapa, "click", function(marcador, punto) { document.forms(0)("q").value=punto.toString(); }); alert("Al hacer click en el mapa se mostrarán las coordenadas en el cuadro de busqueda");

Lo primero que hace nuestro bookmarklet es definir una variable llamada mapa que hará referencia al mapa que tenemos en pantalla (se inicializa con gApplication.getMap) y después se le indica que cuando se haga click sobre el mapa ejecute una función. El evento "click" del mapa tiene dos parámetors, uno es el marcador donde se hace click (en caso de existir) y el otro el punto donde se ha hecho click, es decir, las coordenadas.

La función que se ejecutará cada vez que se haga click es document.forms(0)("q").value = punto.toString() lo que equivale a decir queremos que el valor de uno de los campos del formulario muestre el valor que tiene actualmente la variable punto y como ya hemos comentado, punto, son las coordenadas que nos interesan. "q" es el cuadro de búsqueda de Google Maps (donde generalmente escribimos que queremos buscar) así que una vez ejecutado nuestro bookmarlet podremos ver algo así

Pienso que esto es bastante más cómodo que tener que estar pulsando sobre el botón "enlazar" y buscando el parámetro ll además, si tenemos este código guardado en nuestros favoritos será muy facil añadir esta funcionalidad siempre que visitemos la página de Google Maps.