Todo el mundo conoce la maravillosa aplicación web Google Maps. Lo que no todos conocen es la API de Google Maps, una magnífica herramienta para integrar Google Maps en nuestros sitios web. Las aplicaciones de esta API son infinitas. Yo la he usado para crear un mapa que muestre los lugares más frecuentes de mi fotografía, o sea, un FotoMapa. La verdad es que no ha sido difícil. En un rato (errores tontos incluidos) se puede tener listo algo medio decente gracias al impecable diseño de esta API. Pero aun así, me he encontrado con algunos problemillas. Teniendo en cuenta, además, que el código resultante no es feo, he decidido compartir mis averiguaciones con vosotros. (Veréis, los programadores somos algo tímidos, y enseñar un código mal construido es como andar por ahí en pelotas.) En realidad, mi código está integrado en scripts PHP que no vienen a cuento aquí, así que lo he simplificado para que resulte práctico y os sirva a todos, uséis o no PHP. La idea es que, sin demasiadas complicaciones, sin entrar en el significado de cada función, os montéis un mapa similar al mío y, entre todos, extendamos esta idea tan simpática (a mí, al menos, me lo parece). Por cierto, un par de convenciones antes de proseguir: para abreviar, llamaremos GMaps a Google Maps y JS a JavaScript. Y ahora, poneos el cinturón y vamos allá: Etiqueta <head></head> En la cabecera HTML tenemos que insertar un par de referencias a ficheros de scripts: una al script remoto de GMaps, y otra al nuestro, que veremos más adelante: <script language="JavaScript" type="text/javascript"Donde pone CLAVE_GOOGLE_MAPS hay que sustituir por nuestra clave, que podemos conseguir aquí. Aceptamos el acuerdo de licencia (si nos parece justo, claro está) y especificamos la URL en la que vamos a usar la API de GMaps. Pulsando el botón Generate API Key, obtendremos nuestra una clave personalizada. Etiqueta <body></body> Aquí tenemos que añadir un evento JS para que se ejecute un destructor de Maps cuando se descargue nuestra página. O sea: <body onunload="GUnload()"> Contenedor del mapa Es necesario crear un objeto que contenga el mapa, por ejemplo un <div>. La verdad es que no sé si podríamos usar un <span>, no lo he probado. El contenedor debe tener un identificador (atributo id) donde pondremos, para ser originales, mapa. El resto es posicionarlo y darle tamaño. El resultado, en mi caso, es éste: <center><div id="mapa" style="width: 600px; height: 400px"></div></center> Fichero fotomapa.js // Declaración de objetosComo vemos, hay tres funciones cuyo propósito, creo, es bastante evidente. No obstante, comentaré brevemente lo que hace cada una:
Fichero ejemplo.htm <script type="text/javascript">Aquí tenemos las invocaciones, una para la inicialización del mapa y el resto para crear los marcadores de cada localidad. En este caso, he centrado el mapa en Andalucía y he añadido marcadores para Sevilla, Córdoba, Granada y Arroyofrío (Sierra de Cazorla). Sobra decir (pero lo digo, en plan machaca) que, en la función add_enlace(), debéis sustituir los enlaces y el texto correspondientes a cada localidad por lo que os interese.Un truco: para no marearos con las coordenadas, os posicionáis, en Google Maps, en el punto que os interesa y hacéis clic en Enlazar con esta página. Esto muestra, en la barra de direcciones del navegador, una URL algo compleja. Lo que nos interesa es el parámetro ll (algo parecido a esto: ll=37.395801,-5.997849). Para que os sirva en la función marcador, debéis darle la vuelta a los valores. Conclusión Espero que haya quedado claro, pero en caso contrario, para eso están los comentarios. Teóricamente, diez o quince minutos después de haber leído este tutorial, deberíais poder tener algo como esto. Para facilitaros las cosas, aquí tenéis un Licencia Parecía que ya me iba, ¿verdad? Pero todavía faltaba un detalle. Este código es una chorrada, y lógicamente no voy a adjuntar una licencia formal ni nada parecido. Pero sí me gustaría que, si os sirve, me hagáis una reseña indicando el autor y el tutorial. Si a vosotros os sirve, ¿por qué no ayudar a los demás? Me basta con algo parecido a lo que viene en el fichero ejemplo.htm. Y si, de paso, dejáis un comentario indicando dónde lo estáis usando, os quedo muy agradecido. Y ahora sí, esto es todo por hoy. NOTA. Confirmado, menos de 10 minutos en hacer esto. La mayor parte del tiempo la he pasado buscando las coordenadas de las localidades. ACTUALIZACIÓN. He descubierto un fallo en Internet Explorer. Al parecer, provoca el siguiente fallo: "Internet Explorer no puede abrir la página URL_PÁGINA. Operación anulada." La solución sólo está en inglés, vía Ryan Grant, al que agradezco su aportación. Hay dos posibilidades: a) desplazar todo el código JS al final de la página, fuera de la etiqueta <body></body>, o b) encapsular todo el script en una función que se invoca en el evento load de la etiqueta <body></body>. Yo he optado por la primera opción, dado que el código JS se mezcla con instrucciones PHP y no era fácil encapsularlo todo en una función. Ya está colgado el ejemplo con la opción b.Eduardo Martos Gómez, 21/JUN/2006 (en Tutoriales) Corregido por Eduardo Martos Gómez. Última revisión a las 11:20 del 19/JUL/2006        |