Otro Blog Geek

Estos días me he tenido que pelear bastante en serio con Google Maps y Google Local Search. Necesitaba un mapa que permitiese buscar una dirección y que pudiera, una vez encontrada la dirección, guardarla en una base de datos.

Por suerte Google Maps permite hacer cosas así con poco código aunque de todas maneras me tocó pelearme durante un par de días con su API hasta que conseguí encontrar lo que quería. Casi todo lo necesario se encuentra en la documentación de su API, el único problema es que necesitas saber exactamente lo que buscas antes de poder encontrar algo. En este enlace está la ayuda de Local Search, que aunque no es demasiado extensa tiene algunos ejemplos interesantes.

Mis requsitos exactos eran los siguientes:

• Un mapa con un cuadro de búsqueda
• Un sistema para poder moverse por los resultados de la búsqueda de forma sencilla para el usuario

En este caso particular solo necesitaba las coordenadas del centro del mapa una vez que el usuario ha encontrado lo que buscaba. Este dato se copiará en un campo oculto de un formulario para poder guardarlo en una base de datos. En el ejemplo se mostrarán las coordenadas en un DIV junto al mapa.

Una vez que sabemos lo que necesitamos nos ponemos manos a la obra. Vamos a repasar las herramientas que vamos a usar:

• Lo primero que necesitamos es una key para acceder al API. Para ello visitamos esta dirección. Lo único necesario para conseguirla es una cuenta en Google, sirve la que se usa para acceder a GMail.
• Como vamos a hacer un uso intensivo de Javascript es una buena idea buscarse un ayudante. En mi caso he echado mano a la librería mootools 1.11 por que es con la que mejor me llevo, pero imagino que sirven otras librerías del mismo estilo como jQuery o prototype. El motivo para usar este tipo de librerías es que permiten moverse libremente por el árbol DOM del documento HTML y capturar eventos que ocurren en él de forma sencilla. Dos tareas que vamos a necesitar para nuestro ejemplo.
• Por último no nos puede faltar nuestra navaja suiza para el desarrollo web: Firebug ya que nos permitirá depurar y testear nuestro Javascript de forma sencilla.

Aquí podéis encontrar el ejemplo terminado y aquí os lo podéis descargar. Tiene una licencia MIT, así que podéis hacer lo que queráis con él, aunque agradecería un aviso si lo usáis para cualquier cosa, simple curiosidad
Por último unas cuantas aclaraciones. He intentado comentar el código lo más claramente posible, si tenéis cualquier duda podéis preguntar en los comentarios e intentaré responder. Si tenéis que añadir el código al post, por favor, hacedlo aquí (aquí tenéis una ayuda por si no sabéis usarlo) y añadid un enlace en el post.

He comentado el codigo linea por linea para los que, como yo, no tengan ni idea de Javascript, mootools o Google Maps. Espero que a ellos les pueda servir como ejemplo de lo que se puede hacer con estas 3 tecnologías juntas.