1. No category

Manual del API de Google Maps Incluir un Mapa de Google en tu web en 5 minutos Hemos publicado un Manual del API de Google Maps. Este manual trata sobre el desarrollo de aplicaciones utilizando los mapas de Google, enfocado para programadores que quieran aprovechar la potencia de Google Maps en sus desarrollos. Pero en este artículo voy a explicar una manera mucho más sencilla de incluir un mapa de Google en una página web, apta para todo tipo de personas, programadores o no, y que te llevará sólo unos minutos para integrar un mapa personalizado en cualquier web. Quería aclarar antes que con el API de Google Maps podemos hacer todo tipo de aplicaciones para mostrar mapas de cualquier parte del mundo. Por ejemplo, imaginar que estamos haciendo una página de una inmobiliaria y queremos localizar cada una de las casas en venta, además de mostrar fotos y cualquier otro contenido de los inmuebles en el propio mapa. Para esto necesitaremos forzosamente trabajar con el API, que hemos explicado ya en DesarrolloWeb.com y combinar la base de datos de propiedades de la inmobiliaria, con la interfaz de mapas de Google Maps. Pero imaginar un caso mucho más sencillo. Tenéis un cliente al que le estáis creando el sitio web y quiere que tenga un mapa de Google con la localización de sus oficinas y la forma de llegar a ellas. Para hacer este único mapa no es necesario utilizar el API de Google Maps, sino sería suficiente crear un único mapa estático e incrustarlo en la página del cliente. Esto se puede hacer fácilmente desde la propia página http://maps.google.com/ y no necesita ningún conocimiento de programación. Voy a dar una receta por pasos: 1) Entrar en http://maps.google.com/ 2) Pulsar sobre el enlace “Mis Mapas” 3) Ahora pulsar sobre “Crear Mapa nuevo” 4) Nos pedirá que nos autentiquemos con nuestra cuenta Google. Una cuenta vale para todos los servicios de Google, incluido el de mapas. 5) Entonces podemos empezar a crear nuestro mapa. Tendremos que darle el nombre y descripción del mapa. Además, a la derecha tenéis el mapa que se va a crear. En este momento están disponibles las opciones para edición del mapa y creación de marcas, líneas, etc. Podréis ver en la esquina superior derecha del mapa una serie de iconos con los que podréis colocar los distintos elementos sobre el mapa. Experimentar con cada tipo de dibujo que se puede colocar. Además, luego podemos personalizar cualquier cosa, como cambiar el color a las líneas o formas, o poner varios tipos de marcas sobre el mapa. Al crear cualquier elemento o señal sobre el mapa, nos abre una pequeña ventana para colocar las propiedades de este elemento. En la anterior imagen hemos marcado con flechas varios elementos: los datos de la marca, que tenemos que rellenar en la ventana de propiedades. Un icono que se puede pulsar para acceder a otras propiedades de la marca, como la forma, el color, etc. Cuando tengamos todo, podemos pulsar el botón de Aceptar. 6) Cuando esté el mapa creado, podemos dar al botón de Guardar y luego al botón marcado como “Listo”, que aparecen a la izquierda. 7) Obtener el código para incluir el mapa en cualquier web. Este paso tiene varias maneras de hacerse, todas a través del enlace que pone “Enlazar”, situado a la derecha. La opción más versátil es incluir el mapa con un IFRAME, pero debemos personalizar el mapa antes, para que el IFRAME sea exactamente como nosotros queremos. Primero, como decía, pulsamos sobre “Enlazar” y luego pulsamos sobre “Personalizar y obtener vista previa del mapa que se va a insertar”. Entonces se abrirá una ventana aparte donde dar las propiedades del mapa que vamos a crear para nuestra página web. En esta página tenemos que indicar: 1) El tamaño del mapa, 2) centrar el mapa donde lo queremos y ponerle el zoom deseado y 3) copiar el código que nos dan. 8) Pegar el código del mapa en nuestra página web Pues ya está! Una vez pegado el mapa de Google aparecerá tal cual lo hemos personalizado en la página web que deseemos. Yo he pegado a continuación este mapa de Google de prueba, para que se pueda ver en este artículo de DesarrolloWeb.com. Eso es todo. Podemos haber tardado un poco más para aprender a crear el mapa, pero una vez sepamos, nos llevará menos de 5 minutos incorporar un mapa de Google en una página web. Ver mapa más grande Crear mapas de Google con el asistente de Google Maps Vamos a ver uno de los modos de creación de mapas de Google para personas que no tienen conocimientos sobre Javascript y el API de Google Maps, o bien que no desean gastar su tiempo en aprender a crear mapas personalizados. Se trata de un asistente muy sencillo que permite escribir varios datos en un formulario sobre nuestro mapa y nos ofrece luego el código que debemos copiar y pegar en nuestra página web en el lugar donde queremos que aparezca. En realidad el asistente que vamos comentar en este artículo es para realizar un mapa con el Ajax Search API para búsqueda local. El resultado que obtendremos consiste en un mapa, con un punto señalado en él y además un sistema de búsqueda de direcciones y rutas para llegar a ese punto. Así que será un mapa con alguna utilidad extra para la localización de un nuestro negocio o local. Sobra decir que este sistema, aunque es muy sencillo y útil para hacer mapas sencillos, no va a permitir todas las posibilidades que ofrece el API de Google Maps que relatamos en el manual de creación de mapas de Google. No obstante para quien quiera hacer un mapa sencillo para señalar un punto geográfico y ponerlo en su web, sin complicarse la vida, es una herramienta ideal. El asistente para la creación de un mapa de Google está en la URL: http://www.google.com/uds/solutions/wizards/mapsearch.html Como veremos, tiene un formulario para introducir varias informaciones. Primero nos pide varios datos sobre el mapa que queremos realizar, como anchura y altura del mapa y el nivel de zoom. Luego nos pide información sobre el elemento que queremos marcar con una flecha dentro del mapa. En el mapa, al pulsar la flecha aparecerá una ventana con informaciones sobre el punto geográfico localizado, que también debemos indicar nosotros en el formulario, por medio de los siguientes datos: el nombre del lugar que queremos localizar (por ejemplo "Cine Big"), la URL con la que queremos enlazar (si alguien pulsa sobre el link que aparecerá en la ventana de información), y la dirección completa de lo que queremos enlazar. Nota: la dirección completa, para que la entienda Google Maps y la pueda localizar en el mapa, hay que ponerla desde lo más particular a lo más general, separado por comas. Por ejemplo. Gran Vía 45, Madrid, España. Como segundo paso tenemos que introducir la URL del sitio web donde se va a colocar este mapa, para conocimiento de Google. Este sistema no requiere que nos registremos para obtener una clave para trabajar con el API, lo que simplifica algo las cosas, pero debemos indicar la web donde lo vamos a utilizar y el mapa que creemos sólo se verá en el sitio web donde hayamos indicado (podemos poner sólo la URL principal del dominio como http://www.desarrolloweb.com). Luego podemos pasar al tercer paso, donde simplemente tenemos que generar el código fuente que colocar en la página web. Lo copiamos y sólo tenemos que pegarlo en el lugar de la página donde deseemos que aparezca el mapa de Google. Referencia: Por si nos interesa, existe otra manera de crear fácilmente un mapa de Google en una página web, que ya relatamos en otro artículo de DesarrolloWeb.com: Crear un Mapa de Google sin saber programación. Para acabar, dejamos aquí una muestra de un mapa de Google que hemos preparado para probar este asistente. Lo básico para empezar a desarrollar con Google Maps I Uno de los últimos servicios del gigante Google que más ha dado que hablar es Google Maps. En un navegador, y a golpe de clic el usuario puede darse una vuelta virtual por el mundo, disfrutando de fotos aéreas de gran calidad en algunas zonas, y del mapeado vectorial completo de otras. Pero lo interesante del servicio es que Google ofrece una API (Application Programming Interface) para todos aquellos interesados en usar este servicio e integrarlo en su propia página, de forma simple y gratuita. A lo largo de este artículo veremos los fundamentos para integrar Google Maps en nuestro website y a través de un ejemplo crearemos un primer mapa usando las funcionalidades más básicas de la API. La característica que sin duda más llama la atención del funcionamiento de Google Maps es su interactividad. Podemos pinchar una y otra vez en el mapa para movernos por el mundo, hacer zoom y elegir el tipo del mapa sin necesidad de recargar la página, todo ello de forma fácil e intuitiva. Este tipo de aplicación web se encuadra dentro de la tecnología que Adaptive Path ha dado por denominar AJAX (Asynchronous Javascript + XML). No vamos a profundizar en este artículo en el planteamiento AJAX, sin embargo es conveniente hacer una breve reseña para conocer a grandes rasgos su funcionamiento. AJAX no es una nueva tecnología, sino una combinación de tecnologías ya existentes para ofrecer una nueva visión a la hora de crear aplicaciones web. Siguiendo un planteamiento AJAX, usaremos CSS y DHTML para la presentación de los datos, el DOM (Document Object Model) para tratar dinámicamente la presentación de estos datos, XML y XSLT para el correcto intercambio y manipulación de la información, XMLHttpRequest para obtener la información de manera asíncrona (cuando nos lo pida el usuario) y Javascript para coordinar a todos estos agentes a nuestro gusto dependiendo de nuestras necesidades. De este modo, tenemos un "motor" javascript entre la presentación y el servidor, que nos hará peticiones de información de forma asíncrona para incorporarla inmediatamente a la presentación de nuestra página, sin necesidad de recargarla y hacer una nueva petición de página completa al servidor. A grandes rasgos esta es la filosofía de funcionamiento de AJAX, un planteamiento que sin duda ofrece grandes posibilidades, como las que podemos ver en práctica con Google Maps. Podemos ver otros ejemplos de aplicaciones AJAX en Google Suggest y Gmail. Como vimos anteriormente en la introducción de este artículo, Google nos permite usar Google Maps en nuestra página web de forma gratuita. A continuación veremos cómo hemos de proceder para realizar nuestro primer mapa, viendo los fundamentos de la API que Google nos ofrece. Los requisitos para empezar a trabajar son realmente escasos. Con un simple editor de html y un servidor público podemos empezar a crear mapas en nuestro dominio. Es importante reseñar que el servidor donde alojemos nuestros scripts para Google Maps ha de ser público, entre otras razones porque Google monitorizará el uso que hagamos del mapa, de acuerdo con sus términos y condiciones de uso. El primer paso para empezar a usar Google Maps es obtener una clave (key) que se nos concede cuando nos damos de alta en el servicio. Esta clave es única para cada usuario de Google Maps y es restrictiva en lo que se refiere a su uso, ya que sólo nos permite usar los scripts en uno de los directorios de nuestro servidor. Una vez que tenemos nuestra clave ya estamos en condiciones de crear nuestro primer mapa: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas‐microsoft‐com:vml"> <head> <meta http‐equiv="content‐type" content="text/html; charset=UTF‐8"/> <title>Introducción a Google Maps ‐Desarrolloweb</title> <script src="http://maps.google.com/maps?file=api&v=1&key=AÑADE_TU_CLAVE_AQUÍ" type="text/javascript"></script> </head> <body> <div id="map" style="width: 400px; height: 300px"></div> <script type="text/javascript"> var map = new GMap(document.getElementById("map")); map.setMapType(G_SATELLITE_TYP
E); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint (‐3.688788414001465, 40.41996541363825), 3); </script> </body> </html> Ejecutando este código en un servidor público obtenemos como resultado el siguiente mapa, que nos muestra una vista aérea de Madrid centrada en la Puerta de Alcalá: Como se puede ver en el código, hemos creado una única capa con id="map" destinada a contener nuestro Google Map. El script que viene a continuación de la declaración de esta capa es el que genera el mapa. Veamos sentencia a sentencia qué hace el código: • var map = new GMap(document.getElementById("map")); Esta sentencia genera el mapa especificando como destino el id="map" que hemos asignado previamente para nuestra capa contenedora. Nótese que el mapa se adaptará al tamaño que hayamos especificado para esta capa. • map.setMapType(G_SATELLITE_TYPE); setMapType nos permite especificar el tipo de mapa que queremos visualizar. Como puede verse en los selectores situados arriba a la derecha en el mapa, podemos elegir entre las vistas "Map" (mapa vectorial), "Satellite" (fotografía de satélite) y "Hybrid" (combina ambas vistas). En nuestro caso, ya que Google todavía no dispone de mapas vectoriales para España, hemos elegido la vista de satelite que nos muestra la fotografía aérea de la zona. • map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); addControl nos permite incorporar elementos de control al mapa, tal y como son el control de zoom que vemos a la izquierda y el selector de tipo de mapa. Dependiendo de nuestras necesidades podemos incorporar estos controles, o incluso versiones de menor tamaño (GSmallMapControl) para mapas en tamaño reducido. Por defecto el mapa se muestra sin controles. • map.centerAndZoom(new GPoint (‐3.688788414001465, 40.41996541363825), 3); Con esta sentencia indicamos a nuestro GMap qué lugar queremos que muestre, mediante el método centerAndZoom. Los parámetros son un GPoint (que generamos a continuación a partir de su latitud y longitud) y el nivel de zoom que queremos mostrar, de 1 a 16, siendo el nivel 1 el más cercano y el 16 el más alejado. Google Maps ubica los puntos en los mapas a partir de su latitud y longitud. Esta información debemos suministrarla nosotros, y para ello lo más adecuado es usar alguno de los servicios de geocoding disponibles en la red. Uno de ellos es por ejemplo el de InfoSports, en el que con simplemente pulsar en cualquier punto del mapa obtendremos la latitud y longitud deseadas para ese punto. Existen otros servicios de geocoding disponibles de forma gratuita en la red que no exigen buscar el punto físico en el mapa, tales como Geocoder.us y geonames.org, en los que podemos realizar búsquedas a partir del nombre de la ubicación que buscamos. Lo básico para empezar a desarrollar con Google Maps II Como se puede ver en el artículo anterior sobre la creación de mapas de Google, crear un mapa y centrarlo en un punto es realmente simple. Sofistiquemos un poco nuestro mapa añadiéndole unos marcadores, de tal forma que podamos ubicar determinados puntos de interés en el mapa. El mapa con nuestros puntos de interés añadidos nos quedará de la siguiente manera: Lo primero que necesitamos son las coordenadas de los nuevos puntos, en este caso la Plaza de Cibeles y la Plaza de Neptuno. A continuación asociaremos un marcador a cada uno de los puntos y lo mostraremos en el mapa. El código que muestra este segundo mapa es el siguiente: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas‐microsoft‐com:vml"> <head> <meta http‐equiv="content‐type" content="text/html; charset=UTF‐8"/> <title>Introducción a Google Maps ‐Desarrolloweb</title> <script src="http://maps.google.com/maps?file=api&v=1&key= AÑADE_TU_CLAVE_AQUÍ" type="text/javascript"></script> </head> <body> <div id="map" style="width: 400px; height: 300px"></div> <script type="text/javascript"> var map = new GMap(document.getElementById("map"))
; map.setMapType(G_SATELLITE_TYPE); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); //Puerta de Alcalá var point = new GPoint (‐3.688788414001465, 40.41996541363825); var marker = new GMarker(point); map.addOverlay(marker); //Plaza de Neptuno var point = new GPoint (‐3.6941099166870117, 40.4154238545226); var marker = new GMarker(point); map.addOverlay(marker); //Plaza de Cibeles var point = new GPoint (‐3.693079948425293, 40.41940998761056); var marker = new GMarker(point); map.addOverlay(marker); map.centerAndZoom(point, 3); </script> </body> </html> Como puede verse, declaramos una variable point a partir de la cual creamos el marcador para posteriormente mostrarlo en el mapa con addOverlay. En esta ocasión hemos centrado el mapa en el último punto declarado, el correspondiente a la Plaza de Cibeles. Estupendo, ya tenemos un mapa creado con una serie de puntos señalados sobre él, pero no aportan ninguna información al visitante. Lo apropiado sería satisfacer la curiosidad del usuario proporcionándole algo de información asociada a ese punto. Añadamos pues algo más de información a nuestros marcadores mostrando unas ventanas informativas que nos indiquen el nombre de la ubicación física sobre la que nos encontramos: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas‐microsoft‐com:vml"> <head> <meta http‐equiv="content‐type" content="text/html; charset=UTF‐8"/> <title>Introducción a Google Maps ‐Desarrolloweb</title> <script src="http://maps.google.com/maps?file=api&v=1&key= AÑADE_TU_CLAVE_AQUÍ" type="text/javascript"></script> </head> <body> <div id="map" style="width: 400px; height: 300px"></div> <script type="text/javascript"> var map = new GMap(document.getElementById("map")); map.setMapType(G_SATELLITE_TYPE); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); function createMarker(point, nombre) { var marker = new GMarker(point); GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(nombre); }); return marker; } //Puerta de Alcalá var point = new GPoint (‐3.688788414001465, 40.41996541363825); var nombre = "Puerta de Alcalá"; var marker = createMarker (point, nombre); map.addOverlay(marker); //Plaza de Neptuno var point = new GPoint (‐3.6941099166870117, 40.4154238545226); var nombre = "Plaza de Neptuno" var marker = createMarker (point, nombre); map.addOverlay(marker); //Plaza de Cibeles var point = new GPoint (‐3.693079948425293, 40.41940998761056); var nombre = "Plaza de Cibeles" var marker = createMarker (point, nombre); map.addOverlay(marker); map.centerAndZoom(point, 3); </script> </body> </html> Este código nos genera el siguiente mapa, en el que al pulsar sobre el punto de la Plaza de Cibeles… Efectivamente se muestra la ventana informativa con los datos asociados a ese punto. En este ejemplo hemos creado una función que nos crea los markers y sus correspondientes infoWindows para ahorrar algo de código. Esta pequeña función recibe como parámetros el GPoint donde queremos ubicar el marker, y un parámetro "nombre" que contiene la información que queremos mostrar en la ventana informativa asociada. Hay que reseñar que para asociar la aparición de la ventana con el clic del usuario sobre nuestro punto tenemos que asociarle tal evento, que es lo que se hace en la sentencia: GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(no
mbre); }); De esta manera cada vez que se hace un clic sobre el marker se muestra en la infoWindow la información especificada en el parámetro "nombre". Nótese que hemos usado openInfoWindowHtml, que toma su parámetro como código html, de modo que podríamos incluir una maquetación al contenido de nuestra nueva infoWindow. A lo largo de este artículo hemos visto las funciones más básicas de Google Maps, que proporcionan las herramientas más rudimentarias para manejar el servicio. Pese a no haber profundizado sobre la verdadera potencialidad del servicio, residente en el uso de XML, con lo aquí aprendido tenemos ya el bagaje necesario para empezar a profundizar en la API de Google Maps y empezar a crear scripts más avanzados. Mapas de Google API 2 Seguramente ya conozcamos los Mapas de Google, un sistema que permite acceder a fotos de satélite de todo el mundo que ha tenido bastante éxito entre los Internautas. Si estamos leyendo este artículo hasta podremos saber que los Mapas de Google tienen un API a través de la cual podemos integrarlos como servicio en una página web. Esto permite que en una página web desarrollada por nosotros podamos colocar mapas y vistas satélite de distintos puntos del planeta, todo de manera gratuita. Pero estos dos artículos utilizaban una API que Google ha actualizado, por lo que se hacía necesaria una revisión para mostrar códigos de integración de Google Maps que sean compatibles con el API que se utiliza ahora. Sin embargo, los artículos anteriores siguen siendo muy interesantes para leer, porque explican algunas cosas básicas como obtener una llave (Key) de Google, registrándonos en el sitio de Google Maps, para poder utilizar los mapas en nuestro sitio. Ahora vamos a ver un código para crear un mapa conforme a las especificaciones del Google Maps API 2. <html> <head> <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;charset=ISO‐8859‐1"> <title>Ejemplo de Google Maps API</title> <script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ //función para cargar un mapa de Google. //Esta función se llama cuando la página se ha terminado de cargar. Evento onload function load() { //comprobamos si el navegador es compatible con los mapas de google if (GBrowserIsCompatible()) { //instanciamos un mapa con GMap, pasándole una referencia a la capa o <div> donde queremos mostrar el mapa var map = new GMap2(document.getElementById("map")); //centramos el mapa en una latitud y longitud deseadas map.setCenter(new GLatLng(40.407,‐3.68), 5); //añadimos controles al mapa, para interacción con el usuario map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GOverviewMapControl()); ; } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px; height: 400px"></div> </body> </html> El código está comentado para una mejor comprensión. Ahora a dar unas explicaciones adicionales: Primero, aunque esté más tarde en el código, vamos a ver lo que hay en el body de la página. Hay que ver que hemos definido un evento onload="load()", que sirve para llamar a la función que genera el mapa, una vez se ha terminado de cargar la página. Dentro del cuerpo de la página nos fijamos en la etiqueta div donde se mostrará el mapa: <div id="map" style="width: 615px; height: 400px"></div> El tamaño definido con estilos a esta capa es importante, porque será el tamaño de visualización del mapa. El API de Google Maps reconocerá la anchura y altura del contenedor para mostrar un mapa justamente ocupando ese espacio. Ahora nos fijamos en el código Javascript. Primero se incluye la librería donde está el API Javascript para los mapas de Google. <script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#" type="text/javascript"></script> Si nos fijamos, este código necesita que indiquemos nuestra propia Key del API de Google Maps, que hemos conseguido al registrarnos. La tendremos que poner sustituyendo el texto =#TU LLAVE GOOGLE MAPS#. Luego podemos pasar a la función que genera el mapa, que se carga cuando se termina de mostrar la página (la llamamos por el evento onload). Esa función está bastante comentada y además quiero dejar para artículos posteriores distintos pormenores de la generación de mapas, pero es muy importante llamar la atención sobre un punto crítico, que me dio un quebradero de cabeza cuando estaba probando los mapas, hasta que conseguí dar con el error. Se trata del método de la clase GMap2 setCenter(): setCenter() se tiene que invocar justo después de instanciar el mapa!!! Si intentamos instanciar el mapa y hacer cosas antes de centrarlo no funcionará. Esto es algo que está muy claro en la documentación del API, pero que como es un poco larga de leer, es fácil que no nos percatemos. En mis pruebas me falló porque intentaba ponerle un tipo de mapa (vista satélite) y luego lo centraba. El problema es que no sale ningún error específico y es difícil hallar el problema. Tipos de mapa en Google Maps Al desarrollar con Google Maps podemos escoger el tipo de mapa que verán los usuarios, entre las distintas vistas predefinidas como son la vista satélite, vista de calles o vista híbrida (satélite y calles en modo semi‐transparente. Para definir el tipo de mapa en un mapa de Google tenemos el método setMapType() de la clase GMap2. El método setMapType() recibe el tipo de mapa que se desea ver. En principio existen los siguientes tipos de mapa: G_NORMAL_MAP Es para un mapa normal, que es el mapa político, con los nombres de localizaciones. Este mapa es el definido por defecto. En principio aparecen los distintos países, pero si ampliamos veremos las ciudades importantes, carreteras, etc y si hacemos más zoom sobre una población veremos los nombres de las calles, plazas, barrios, etc. G_SATELLITE_MAP Este mapa permite ver el mundo con imágenes tomadas desde satélite. G_HYBRID_MAP Este mapa combina la vista satélite y la vista normal. Sobre las fotos satélite se pintan encima las distintas localizaciones, calles, etc. Veamos un mapa de Google en el que definimos el tipo de mapa. Mostramos una vista satélite en este caso. <html> <head> <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;charset=ISO‐8859‐1"> <title>Ejemplo de Google Maps API</title> <script src="http://maps.google.com/maps?file=api&v=2&key=AQUI‐TU‐CLAVE" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ //función para cargar un mapa de Google. //La llamamos cuando la página se ha terminado de cargar. Evento onload function load() { //comprobamos si el navegador es compatible con los mapas de google if (GBrowserIsCompatible()) { //instanciamos un mapa con GMap, pasándole una referencia a la capa o <div> donde queremos mostrar el mapa var map = new GMap2(document.getElementById("map")); //centramos el mapa en una latitud y longitud deseadas map.setCenter(new GLatLng(41.375987390149106, 2.1778035163879395), 17); map.setMapType(G_SATELLITE_MAP); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px; height: 400px"></div> </body> </html> Con este código tendremos una vista satélite de Barcelona centrada en la plaza donde está la estatua de Colón señalando con el dedo. Un par de cosas que hay que ver: •
En la línea que carga el API de Google Maps tenemos que sustituir "AQUI‐TU‐CLAVE" por la clave de usuario del API proporcionada en Google al registrarnos para usar sus mapas en nuestro sitio web. http://maps.google.com/maps?file=api&v=2&key=AQUITU‐CLAVE •
La línea map.setMapType(G_SATELLITE_MAP); es donde cargamos el tipo de vista. Nota: Existen otros artículos anteriores donde hemos explicado temas adicionales de los mapas de Google que deberías conocer para entender este código.: Google Maps API 2 Ahora, si deseamos un mapa híbrido, sólo tendremos que cambiar la línea: map.setMapType(G_SATELLITE_MAP); Por esta otra línea, donde especificamos otro tipo de mapa: map.setMapType(G_HYBRID_MAP); También podemos probar a quitar esa línea donde especificamos el tipo de mapa. Veremos como sale entonces el mapa de calles. Es lo mismo que si especificásemos el tipo de mapa normal. map.setMapType(G_NORMAL_MAP); Control para cambiar el tipo de mapa de Google Se pueden incluir varios controles interactivos en los mapas de Google, por ejemplo para hacer zoom sobre el mapa o para alternar entre distintos tipos de mapa. Veremos ahora como hacer un mapa poniendo un control con tres botones, pinchando los cuales el usuario puede seleccionar el tipo de vista que desea. Esto se hace con el método addControl de la clase GMap2, pasando por parámetro una instancia del tipo de control que se desea incluir. Habría que poner esta línea en el código, después de centrar el mapa en la posición deseada. map.addControl(new GMapTypeControl()); Veamos el código completo de un mapa que tiene el control para cambiar el tipo de vista. El mapa estará centrado en Peñíscola, provincia de Castellón, donde tenía la sede el Papa Luna. <html> <head> <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;charset=ISO‐8859‐1"> <title>Ejemplo de Google Maps API</title> <script src="http://maps.google.com/maps?file=api&v=2&key=AQUI‐TU‐CLAVE" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 16); map.addControl(new GMapTypeControl()); map.setMapType(G_SATELLITE_MAP); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px; height: 400px"></div> </body> </html> Incluir un mapa de tipo físico En este artículo vamos a mostrar cómo trabajar con un tipo de mapa de Google especial, presentado hace poco en el sistema de Google Maps. Se trata del mapa físico, que muestra la tierra con un dibujo de su superficie que representa las montañas, ríos y otros accidentes geográficos. El mapa físico ha sido presentado hace relativamente poco tiempo. Al menos cuando iniciamos este manual del API de Google Maps no existía. Por tanto, en los artículos publicados anteriormente no habíamos hablado de la posibilidad de integrar un mapa físico. Lo veremos ahora. En el control de selección de tipo de mapa no aparece por defecto el tipo de mapa físico, con lo que no se puede seleccionar por el usuario, a no ser que nosotros hagamos algo para habilitarlo. Los tipos de mapas disponibles para el usuario por defecto a la hora de trabajar con Google Maps son los que habíamos visto con anterioridad: •
G_NORMAL_MAP: es un mapa político, de países, ciudades con sus calles, etc. •
G_SATELLITE_MAP: mapa de imágenes de satélite. •
G_HYBRID_MAP: Un mapa que superpone la vista de calles encima de la vista satélite. Por eso cuando colocamos el control para cambiar el tipo de mapa, nos aparecen tres botones, para cambiar entre cualquiera de estos tipos de mapas. Ahora bien, nosotros podemos aumentar la disponibilidad de tipos de mapas de Google, para incluir nuevos mapas, como el mapa físico (G_PHYSICAL_MAP), otros mapas existentes, cualquiera que puedan sacar en el futuro, o incluso mapas creados por nosotros mismos. Para indicar el tipo de mapa que deseamos que se muestre se hace de esta manera: map.setMapType(G_PHYSICAL_MAP); Definir los tipos de mapa del control de selección de tipos de mapa Ahora, para incluir otros tipos de mapas en el control de selección de tipo de mapa, debemos utilizar el método addMapType() de la clase GMap2, indicando como parámetro el nombre del tipo de mapa que queremos incluir. Por ejemplo: map.addMapType(G_PHYSICAL_MAP); Esto parece que no es un paso obligatorio para poder mostrar un tipo de mapa, sino para que aparezca en el control y el usuario lo pueda seleccionar. Es decir, para hacer un mapa de Google físico con map.setMapType(G_PHYSICAL_MAP) no es necesario que lo haya incluido previamente con map.addMapType(G_PHYSICAL_MAP); Ahora, para quitar un tipo de mapa del control, lo hacemos a través del método removeMapType() de la clase GMap2, indicando un parámetro con el nombre del tipo de mapa que queremos deshabilitar del control. Por ejemplo: map.removeMapType(G_HYBRID_MAP); Ejemplo de mapa de Google con dibujo tipo físico Para acabar voy a mostrar cómo crear un mapa de Google físico, que además tenga un control que permita cambiar entre los tipos de mapa político, satélite y físico. function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40.201022,‐3.8736677),6); map.addMapType(G_PHYSICAL_MAP); map.removeMapType(G_HYBRID_MAP); map.addControl(new GMapTypeControl()); map.setMapType(G_PHYSICAL_MAP); } } El código que podemos ver incluye llamadas a los métodos: addMapType(G_PHYSICAL_MAP), para indicar que en el control de selección de tipo de mapa se debe incluir el mapa físico. map.removeMapType(G_HYBRID_MAP), para eliminar del control de selección de tipos de mapas el mapa híbrido. El método addControl(new GmapTypeControl()) para incluir en la interfaz el control de usuario para cambiar el tipo de mapa. Y por último setMapType(G_PHYSICAL_MAP), para definir que el mapa que debe mostrarse desde el principio debe ser el mapa físico. Podemos ver el ejemplo en marcha en una página aparte. Puedes ver el código fuente de la página para ver el código del ejemplo completo. Artículo por Miguel Angel Alvarez Controles en mapas de Google Como ya debemos de saber, los mapas de Google se pueden integrar en la página de cualquier persona que desee, a través de un API en Javascript. En este caso vamos a ver cómo incluir controles de usuario dentro de un mapa de Google, como funciona el API en este sentido y qué tipos de controles hay disponibles. Antes que nada decir que este artículo viene a ampliar la información del manual Desarrollo con el API de Google Maps, por lo que muchas de las explicaciones para trabajar con los mapas de Google la tenemos que consultar en otros capítulos del mencionado manual. Tipos de controles de usuario Los controles de usuario de los mapas de Google (controls en inglés) son interfaces desde donde el usuario puede interaccionar con el mapa, para efectuar acciones como serían hacer zoom, seleccionar entre tipos de mapa (satélite, mapa, híbrido), o moverse por un mapa pequeño más general. Todos estos controles están ya creados y existen instrucciones y clases para incluirlos fácilmente en un mapa de Google. Aunque cualquier desarrollador podría crear sus propios controles, existen varios tipos de controles de usuario en los mapas de Google ya creados de antemano: •
GLargeMapControl: Muestra una interfaz para hacer zoom y moverse por el mapa, con una especie de regla donde se pueden escoger de las distintas aproximaciones de la vista. Este control aparece en la parte superior izquierda. •
GSmallMapControl: Es otro control de usuario para hacer zoom y moverse por el mapa, pero más pequeño, que también aparece en la esquina superior izquierda. •
GSmallZoomControl: Un control de usuario muy pequeñito, que aparece en la esquina superior izquierda que simplemente tiene un botón para ampliar el zoom y otro botón para reducirlo. Pero no tiene botones para moverse por el mapa. •
GScaleControl: Este es un control que simplemente informa sobre la escala actual del mapa. Con este control no se puede interaccionar, es meramente informativo. •
GMapTypeControl: Este control incluye tres botones para cambiar entre distintos tipos de mapa (mapa politico de calles y carreteras, mapa satélite y mapa híbrido ‐calles y carreteras sobre el fondo de satélite) •
GOverviewMapControl: Con este control aparece un pequeño mapita en la esquina inferior derecha donde aparece una vista general con menos zoom del mapa actual, a través del cual también podemos movernos. Añadir controles a un mapa de Google Los controles de usuario para los mapas de Google que hemos visto se incluyen con una sencilla instrucción Javascript a la hora de crear el mapa. Como los controles ya están predefinidos en el API de Google Maps, simplemente tenemos que asociarlos al mapa que estamos creando. Para ello se utiliza un método de la clase GMap2 llamado addControl(). La clase GMap2 es la que se utiliza para instanciar un mapa de google. Con ella creamos el objeto mapa y luego a este objeto con addControl() le asociamos los controles deseados. El método addControl() recibe una instancia del control de usuario que se desea crear. Por ejemplo, si tenemos el mapa en un objeto llamado "map", ejecutaremos el método addControl() de esta manera: map.addControl(new GMapTypeControl()); Podemos incluir todos los controles que deseemos haciendo varias llamadas al método addControl(), pasando como parámetro distintas instancias de los controls que queremos incluir. Veamos un ejemplo completo de un mapa de Google que tiene una serie de controles de usuario: <html> <head> <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;charset=ISO‐8859‐1"> <title>Ejemplo de Google Maps API</title> <script src="http://maps.google.com/maps?file=api&v=2&keyAQUI‐TU‐CLAVE‐DEL‐API" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 12); map.addControl(new GMapTypeControl()); map.addControl(new GSmallZoomControl()); map.addControl(new GScaleControl()); map.addControl(new GOverviewMapControl()); map.setMapType(G_SATELLITE_MAP); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px; height: 400px"></div> </body> </html> Como habíamos dicho, el desarrollador puede crear sus propios controles para incluirlos en sus mapas. Este es un tema que trataremos más adelante, pero por ahora podemos referiros a la documentación del API Google Maps para obtener más información: http://www.google.com/apis/maps/documentation/controls.html Insertar una marca en un mapa de Google Veamos rápidamente cómo insertar una marca en un mapa de Google, que nos sirve para señalar un punto preciso en un mapa. Es un paso muy sencillo pero importante en el manejo del API de Google Maps. Este artículo está englobado dentro del manual de manejo del API de los mapas de Google, por lo que muchas explicaciones nos las vamos a saltar porque ya las hemos presentado en artículos anteriores. Para insertar marcas tenemos un método, también de la clase GMap2, que sirve para insertar un elemento sobre el mapa. El método en concreto se llama addOverlay() y recibe como parámetro la marca que se quiere insetar. map.addOverlay(marker); En el código anterior el objeto map sería una instancia de la clase GMap2. La variable marker contendrá la marca que se quiere insertar en el mapa. Ahora veamos como crear la marca. Lo explicaremos en dos pasos. 1) Creamos un punto La marca debe situarse en un punto concreto del mapa, que se define por una longitud y una latitud (coordenadas x, y en el plano terrestre). Para crear un punto se tiene que utilizar la clase GPoint, que recibe en el constructor la longitud y latitud de ese punto. var point = new GPoint (‐3.7034815549850464, 40.41689826118782); 2) Creamos la marca Para crear la marca simplemente utilizamos la clase GMarker, que en su constructor debe recibir varios valores. Por ahora colocaremos sólo el único valor que es obligado indicar, que es el punto sobre el que colocar la marca, creado en el paso anterior. var marker = new GMarker(point); Ejemplo completo Eso es todo lo que necesitamos saber por ahora. Aunque luego veremos otros detalles de interés que se pueden personalizar en las marcas. Veamos el código completo de un mapa de Google con una marca en la plaza "Puerta del Sol" de Madrid. <html> <head> <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;charset=ISO‐8859‐1"> <title>Ejemplo de Google Maps API</title> <script src="http://maps.google.com/maps?file=api&v=2&key=AQUI‐TU‐CLAVE‐GOOGLE‐MAPS" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40.41689826118782,‐3.7034815549850464), 17); map.addControl(new GLargeMapControl()); map.setMapType(G_SATELLITE_MAP); var point = new GPoint (‐3.7034815549850464, 40.41689826118782); var marker = new GMarker(point); map.addOverlay(marker); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px; height: 400px"></div> </body> </html> Cambiar el icono a una marca La marca se crea con un icono por defecto, como una especie de chincheta roja, pero podemos cambiarlo para personalizar el estilo de nuestros mapas. Vamos a ver aquí como asociar un icono a una marca, cuando la instanciamos a partir de su constructor. El constructor de la marca recibe dos parámetros, el primero obligado es el punto geográfico y el otro es el icono, que es opcional. En caso que no se especifique un icono se utiliza el G_DEFAULT_ICON, que es una constante del API que contiene el icono por defecto. var marker = new GMarker(point, miIcono); la variable miIcono en este caso es un objeto de la clase GIcon, que puede crear así: var miIcono = new GIcon(G_DEFAULT_ICON); miIcono.image = "http://www.midominio.org/mapas‐google/arrow_down.png"; En este caso, con la primera sentencia se crea un nuevo icono, a partir de G_DEFAULT_ICON. Es decir, un icono nuevo pero con todas las carácterísticas cargadas del G_DEFAULT_ICON. En la siguiente línea se modifica la imagen del icono, asignando un nuevo valor a su atributo image. Habría que hablar más sobre la creación y modificación de iconos, porque es un tema que requiere mayor detenimiento para dominarlo, pero lo dejaremos para más adelante. Artículo por Miguel Angel Alvarez Personalizar iconos en los mapas de google Crear y definir iconos para mapas de Google es algo que nos puede llevar un tiempo, porque puede resultar minucioso ajustar los distintos parámetros para conseguir un icono con el formato deseado. No obstante, vamos a dar aquí un pequeño ejemplo de cómo crear un icono que podrá servir para los interesados en cambiar la imagen por defecto del icono. Este artículo está englobado dentro del manual de Trabajo con el API de Google Maps. Además, hay que decir que en este artículo vamos a realizar trabajos como crear marcas en los mapas, que ya explicamos anteriormente y que conviene conocer. Lo que tenemos que saber a la hora de crear un icono son las diferentes propiedades de la clase GIcon, que son unas cuantas, porque los iconos se pueden personalizar en muchos parámetros distintos. Las referencias completas de esta clase conviene leerlas en la propia documentación del API de Google Maps. Pero nosotros vamos a explicar esos parámetros, al menos los necesarios para crear iconos con la imagen personalizada. Lo primero que tenemos que hacer es definir el icono personalizado. Luego podremos crear marcas utilizando este icono. Crear un icono desde cero es complicado, porque requiere ajustar muchos parámetros, pero el API nos permite crear iconos copiando las características de otros iconos. Entonces, por simplificar la tarea, vamos a crear un icono que es copia del icono que aparece por defecto: var iconoMarca = new GIcon(G_DEFAULT_ICON); Esto crea una variable iconoMarca que es una instancia de la clase GIcon, donde hemos utilizado G_DEFAULT_ICON como icono a copiar. G_DEFAULT_ICON es una constante del API de Google Maps, que contiene el icono por defecto. Luego vamos a definir la imagen del icono, alterando el atributo image de la instancia del icono que había hecho antes. (Hablaré sobre formatos de las imágenes de los iconos más tarde en este artículo) iconoMarca.image = "/images/bandera‐roja.png"; A continuación, a través del atributo iconSize, debemos de definir el tamaño de la imagen de este icono. Los tamaños en el API se define con un objeto de la clase GSize. var tamanoIcono = new GSize(17,17); iconoMarca.iconSize = tamanoIcono; Primero hemos creado el tamaño del icono y luego lo hemos asociado al atributo iconSize. Del mismo modo, tendremos que definir la imagen que utilizaremos para la sombra y el tamaño de la imagen utilizada. iconoMarca.shadow = "/images/sombra‐bandera2.png"; var tamanoSombra = new GSize(22,18); iconoMarca.shadowSize = tamanoSombra; Para acabar, sólo nos queda por editar el atributo iconAnchor. Este sirve para reposicionar el lugar donde se colocan los iconos. Como se pueden hacer iconos con imágenes de distintos tamaños, hay que ajustar bien donde queremos que queden, para que la imagen que pongamos apunte al lugar correcto. Dicho de otra manera, como hemos cambiado el tamaño de la imagen del icono por defecto (que habíamos copiado para crear el icono personalizado), ahora hay que editar el atributo iconAnchor para que apunte al lugar correcto. iconoMarca.iconAnchor = new GPoint(11, 16); Al iconAnchor se les pasa un punto, que está formado por las coordenadas relativas a la esquina superior izquierda de la imagen donde debe estar enlazado el icono. Es el punto de la imagen que debe aparecer en el punto geográfico donde se coloca la imagen. En nuestro caso el punto (11, 16), que es donde está la puntita de la bandera. (Ver imagen del ejemplo). Ahora podemos hacer una marca con este icono que hemos creado así. var marker = new GMarker(point, iconoMarca); En el constructor de la clase GMarker indicamos el punto donde se debe colocar la marca y el icono que que se desea. Para acabar habría que señalar: 1) URLs de las imágenes que hemos utilizado en el ejemplo: http://www.guiarte.com/images/bandera‐roja.png http://www.guiarte.com/images/sombra‐bandera2.png Los formatos de las imágenes los hemos creado como PNG de 24 bits con transparencia. Hemos elegido ese formato porque permite una transparencia para las imágenes. Es una transparencia avanzada con respecto a la que hemos utilizado otras veces con el formato GIF, porque no hace halos blancos alrededor del dibujo. Este formato va a ser muy necesario sobretodo para hacer la sombra de la marca, que tiene que ser forzosamente medio transparente para que quede bien. Podemos utilizar un formato PNG 24 bits con transparencia en los más habituales programas de edición gráfica, como Photoshop. De hecho, nosotros hemos utilizado Photoshop para hacer o retocar las imágenes utilizadas. 2) El enlace para ver el ejemplo: http://www.guiarte.com/mapas‐google/desarrolloweb/ej_icono.php 3) El código completo del ejemplo: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas‐microsoft‐com:vml"> <head> <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;charset=ISO‐8859‐1"> <title>Mapa de Google</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAUnJY3ChJhF0YgyTSDJuVfBTqu‐
zEVMasluaqfAe9FKyfKhfBExSs1s93Q7GOuBeSnaddg05sRmEGTs" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(33,0),3); map.addControl(new GLargeMapControl()); //map.addControl(new GMapTypeControl()); //map.addControl(new GOverviewMapControl()); ; map.setMapType(G_NORMAL_MAP); //map.setMapType(G_SATELLITE_MAP); //DEFINO EL ICONO var iconoMarca = new GIcon(G_DEFAULT_ICON); iconoMarca.image = "/images/bandera‐roja.png"; var tamanoIcono = new GSize(17,17); iconoMarca.iconSize = tamanoIcono; iconoMarca.shadow = "/images/sombra‐bandera2.png"; var tamanoSombra = new GSize(22,18); iconoMarca.shadowSize = tamanoSombra; iconoMarca.iconAnchor = new GPoint(11, 16); function createMarker(point,nombre,continente,pais) { //CREO LA MARCA EN EL PUNTO Y CON EL ICONO DESEADO var marker = new GMarker(point, iconoMarca); GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml("<span style='font‐size: 8pt; font‐family: verdana'>" + nombre + "<br><a target='_parent' href='/destinos/" + continente + "/" + pais + ".html'>Ir al destino " + nombre + "</a></span>"); }); return marker; } var point = new GPoint (‐4.0,40); var nombre = "España"; var continente = "europa"; var pais = "espana"; var marker = createMarker (point,nombre,continente,pais); map.addOverlay(marker); var point = new GPoint (2,46); var nombre = "Francia"; var continente = "europa"; var pais = "francia"; var marker = createMarker (point,nombre,continente,pais); map.addOverlay(marker); var point = new GPoint (‐5.0,32); var nombre = "Marruecos"; var continente = "africa"; var pais = "marruecos"; var marker = createMarker (point,nombre,continente,pais); map.addOverlay(marker); var point = new GPoint (10.5,51.5); var nombre = "Alemania"; var continente = "europa"; var pais = "alemania"; var marker = createMarker (point,nombre,continente,pais); map.addOverlay(marker); } } window.onload=load //]]> </script> <style type="text/css"> body{ margin:0px; } </style> </head> <body> <div id="map" style="width: 765px; height: 388px"></div> </body> </html> Artículo por Miguel Angel Alvarez Eventos en mapas de Google Para continuar el manual de desarrollo de mapas de Google, vamos a conocer el tratamiento de eventos. El API de Google Maps tiene capacidad para tratar eventos. Esto no es nada nuevo, porque Javascript también es un lenguaje de programación orientado a eventos y el API de los mapas de Google está basado en Javascript. Pero hay que señalar que el API de Google Maps incorpora unos cuantos eventos que son propios de los mapas de Google y que no forman parte de los eventos básicos de Javascript. Además, así como las peculiaridades de cada navegador pueden hacer el tratamiento de eventos distinto entre distintas plataformas, el API de los mapas de Google es único y funciona en cualquier navegador de la misma manera, es decir, es lo que llamamos cross‐browser. Los eventos en el API se manejan usando funciones que se llaman escuchadores de eventos, que se tienen que registrar dentro de espacio de nombres de GEvent. Cada objeto del API de los mapas de google dispone de una serie de eventos ya definidos, que además se ejecutan dentro de un contexto y pasan distintos parámetros para identificar tal contexto. Por ejemplo, un mapa de Google tiene el evento click (la clase GMap2 tiene multitud de eventos distintos), que se desata cuando el usuario hace clic sobre el mapa. Dicho evento pasa los argumentos overlay y point, el primero para pasar una marca (si es que el usuario hizo clic en una marca) y el segundo para pasar el punto geográfico donde se hizo clic, si pulsó sobre cualquier área vacía del mapa. Todos los eventos que soporta el API de Google Maps, para cada clase, están perfectamente documentados en la referencia que ofrece Google. Sacar el punto donde ha hecho clic el usuario Vamos a mostrar un primer ejemplo de tratamiento de eventos, muy sencillo, para extraer el punto donde el usuario ha hecho clic en el mapa. Primero tendríamos que crear el mapa, tal como lo hemos hecho en anteriores ocasiones, y añadirle a GEvent un escuchador de eventos (Event listener) para cuando se hace clic sobre el mapa. var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(33,0),3); map.addControl(new GLargeMapControl()); map.setMapType(G_NORMAL_MAP); GEvent.addListener(map, "click", tratamiento_clic); La línea que tenemos que ver ahora es la última, donde se añade el escuchador de eventos. GEvent es la clase a la que añadimos el event listener. Al añadir un evento para ser escuchado tenemos que proveer de tres parámetros: 1. El objeto del API sobre el que se tiene que escuchar el evento 2. El nombre del evento que queremos detectar y hacer acciones cuando se haya captado 3. El nombre de la función que se encargará de tratar el evento. En este caso se ha añadido un escuchador de evento, para realizar acciones cuando se hace "clic" sobre el objeto map, que es el propio mapa de google. Las acciones son simplemente ejecutar la función tratamiento_clic (fíjate que sólo ponemos el nombre de la función, sin los paréntesis). Ahora tenemos que codificar el comportamiento de nuestro mapa cuando se hace clic en él, es decir, codificar la función tratamiento_clic(). function tratamiento_clic(overlay,point){ alert ("Hola amigo! Veo que estás ahí porque has hecho clic!"); alert ("El punto donde has hecho clic es: " + point.toString()); } Como vemos, la función recibe un par de parámetros, que son el contexto en el que se ha detectado el evento. Estos dos parámetros son: • overlay: No lo vamos a utilizar ahora. Tiene que ver cuando el usuario hace clic en una marca de un mapa. • point: que es el punto o coordenadas geográficas donde el usuario ha hecho clic. El código de la función es simplemente un par de alert, para mostrar mensajes al usuario. El primer alert simplemente está para dar un saludo al visitante y el segundo muestra las coordenadas (x e y ‐latitud, longitud) donde se ha hecho clic. Dichas coordenadas se extraen del parámetro point que hemos recibido como contexto del evento, al que hemos pasado el método toString() para que extraer su codificación en cadena de caracteres. El ejemplo puede verse en marcha en una página aparte. Manejar un evento en un mapa de Google para reposicionar una marca En el anterior capítulo del manual de desarrollo con el API de mapas de Google vimos los primeros detalles sobre el tratamiento de eventos. Ahora vamos a seguir con otro ejemplo de desarrollo en el que vamos a hacer un mapa que tiene una marca. Pulsando en cualquier parte del mapa reposicionaremos la marca a la posición donde se ha hecho clic. El evento que vamos a ver es el click en el objeto map, de la clase GMap2. En este caso, recuperaremos el punto donde se ha hecho click para colocar la marca en ese punto. Primero veamos el código para crear el mapa con una marca: var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40,‐4),3); map.addControl(new GLargeMapControl()); map.setMapType(G_NORMAL_MAP); var point = new GPoint (‐4,40); var marker = new GMarker(point); map.addOverlay(marker); Este mapa, centrado en España, tiene una marca también en España. Ahora veamos el sencillo código para detectar un evento de tipo click sobre el mapa: GEvent.addListener(map, "click", function (overlay,point){ if (point){ marker.setPoint(point); } }); Se crea el escuchador de eventos, para el objeto map y el tipo de evento click, ejecutando una función que recibe dos parámetros (overlay,point). Recordamos que overlay es la marca sobre la que se ha pulsado, si es que se pulsó sobre una marca, y point es el punto donde se ha hecho clic del mapa, si es que se pulsó sobre un área vacía del mapa. En la función empezamos con un if(point) que sirve para saber si hemos recibido un punto (Sólo recibimos el punto si se ha pulsado sobre un área vacía del mapa), porque sólo entonces queremos recolocar la marca. Entonces llamamos al método de la marca setPoint(point) para reposicionar la marca al punto recibido por parámetro. Es bien simple ¿no? Podemos ver el ejemplo en marcha en este enlace. Para acabar, os dejo el código completo de este ejercico: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas‐microsoft‐com:vml"> <head> <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;charset=ISO‐8859‐1"> <title>Mapa de Google</title> <script src="http://maps.google.com/maps?file=api&v=2&key=llave" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40,‐4),3); map.addControl(new GLargeMapControl()); map.setMapType(G_NORMAL_MAP); var point = new GPoint (‐4,40); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(map, "click", function (overlay,point){ if (point){ marker.setPoint(point); } }); } } window.onload=load //]]> </script> </head> <body> <div id="map" style="width: 765px; height: 388px"></div> </body> </html> Crear una marca y mostrar una ventana de información con sus coordenadas En este artículo vamos a ver como insertar una marca en un mapa de Google al hacer clic sobre el mapa, y a su vez, que se muestre una ventana de información con las coordenadas donde se ha situado la marca. Es un ejemplo sencillo en el que veremos cómo tratar un evento clic sobre el mapa, la colocación de una marca y posteriormente la presentación de una ventana de información. También trataremos con la clase GLatLng para extraer las coordenadas de un punto. Puedes hacerte una idea exacta de lo que se va a explicar en este artículo accediendo a una página con ejemplo en funcionamiento. Esta nueva guía para el trabajo con los mapas de Google se engloba dentro del Manual del Api de Google Maps que estamos publicando en DesarrolloWeb.com. En un artículo anterior aprendimos a colocar una marca en un mapa de Google como respuesta al clic de un usuario, por lo que esta parte la daremos por conocida. Primero podemos crear una marca, aunque todavía no la mostremos en el mapa de Google, puesto que sólo querremos que aparezca en el momento que el usuario haga clic en el mapa. Para crear una marca necesitamos un punto (objeto de la clase GLatLng), así que de momento vamos a obtener un punto a partir del centro configurado en el mapa de Google. Cuando se haga clic, antes de mostrar la marca, reposicionaremos ese punto para colocar la marca en el lugar donde se ha hecho clic. Por tanto, de momento el punto donde creemos esta marca da un poco igual. var point; point=map.getCenter
(); Luego creamos la marca en el punto que habíamos guardado antes. var marker = new Gmarker(point); Después hay que añadir un evento al mapa para que, cuando se pulse, se reposicione la marca, se muestre en el mapa y aparezca un bocadillo o ventana de información con las coordenadas donde se ha colocado la marca. GEvent.addListener(map, "click", function (overlay,point){ marker.setPoint(point); map.addOverlay(marker); marker.openInfoWindowHtml("<div style='font‐size: 8pt; font‐family: verdana'>Mi marca situada en<br>Latitud: " + point.lat() + "<br>Longitud: " + point.lng() + "</div>"); }); Comento algunas líneas de este código: marker.setPoint(point); Con esto cambiamos la posición de la marca. map.addOverlay(marker); Con esa otra línea hacemos que la marca se muestre en el mapa (puesto que hasta ahora se había creado la marca pero no se mostraba en ningún sitio) Por último se incluye la siguiente linea dentro de la función del evento: marker.openInfoWindowHtml("<div style='font‐size: 8pt; font‐family: verdana'>Mi marca situada en<br>Latitud: " + point.lat() + "<br>Longitud: " + point.lng() + "</div>"); Esto es para que, a la vez que se muestra una marca, también aparezca una ventana de información, con las coordenadas de la misma. Al construir el bocadillo con la información utilizamos los métodos del punto donde hizo clic el usuario point.lat() y point.lng() para conseguir las coordenadas del mapa, es decir, la latitud y longitud. Para terminar, vamos a mostrar el código completo para crear una marca en el mapa al hacer clic. <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas‐microsoft‐com:vml"> <head> <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;charset=ISO‐8859‐1"> <title>Mapa de Google</title> <script src="http://maps.google.com/maps?file=api&v=2&key=AQUI‐TU‐CLAVE‐GOOGLE‐MAPS " type="text/javascript"></script> <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(40.41689826118782,‐3.7034815549850464), 5); var point; point=map.getCenter(); var marker = new GMarker(point); GEvent.addListener(map, "click", function (overlay,point){ marker.setPoint(point); map.addOverlay(marker); marker.openInfoWindowHtml("<div style='font‐size: 8pt; font‐family: verdana'>Mi marca situada en<br>Latitud: " + point.lat() + "<br>Longitud: " + point.lng() + "</div>"); }); } } window.onload=load //]]> </script> <style type="text/css"> html,body{ margin:0px; height:100%; } </style> </head> <body> <div id="map" style="height: 300px; width:500px"></div> </div> </body> </html> Puede verse el ejemplo en marcha en una página aparte. Mostrar la posición de una marca de Google Maps en un formulario Ahora vamos a complicar un poco el ejemplo anterior de recolocar una marca en un mapa de Google, para poner en un formulario en la propia página los valores de latitud y longitud. Esto nos puede servir para saber el punto exacto donde se hace clic, para poder obtener la latitud y longitud de cualquier punto geográfico. En el ejemplo vamos a tener el mapa de Google y un formulario. El mapa de google, así como el tratamiento del evento con el API de Google Maps ya lo vimos en el anterior capítulo, por lo que no los voy a explicar. Veremos entonces los nuevos elementos en este ejercicio. Primero el formulario: <form action="#" id="posicion" name="posicion"> X: <input type="text" name="x" value="" /> <br /> Y: <input type="text" name="y" value="" /> </form> Vemos el formulario, que es como cualquiera que hayamos utilizado en HTML, al que le hemos puesto un name="posición", para podernos referir a él desde Javascript. Luego vemos los campos X e Y, que son campos de texto normales, con sus respectivos name, para poder actualizar sus valores desde el script. Ahora el único cambio que hemos incorporado en el código de creación del mapa de Google, es el manejo del evento click sobre el mapa. GEvent.addListener(map, "click", function (overlay,point){ if (point){ marker.setPoint(point); document.posicion.x.value=point.x document.posicion.y.value=point.y } }); Simplemente hemos incluido un par de líneas adicionales para acceder al formulario y actualizar los valores de los campos <input> de las coordenadas. Eso es todo. Podemos ver el ejemplo en marcha en este enlace El código completo del ejercicio es este: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas‐microsoft‐com:vml"> <head> <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;charset=ISO‐8859‐1"> <title>Mapa de Google</title> <script src="http://maps.google.com/maps?file=api&v=2&key=TU‐GOOGLE‐MAPS‐KEY" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40,‐4),3); map.addControl(new GLargeMapControl()); map.setMapType(G_NORMAL_MAP); var point = new GPoint (‐4,40); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(map, "click", function (overlay,point){ if (point){ marker.setPoint(point); document.posicion.x.value=point.x document.posicion.y.value=point.y } }); } } window.onload=load //]]> </script> </head> <body> <div id="map" style="width: 765px; height: 278px"></div> <div id="formulario" style="margin: 10px"> <form action="#" id="posicion" name="posicion"> X: <input type="text" name="x" value="" /> <br /> Y: <input type="text" name="y" value="" /> </form> </div> <br /> <br /> Por <a href="http://www.guiarte.com">guiarte.com</a> </body> </html> Averiguar el zoom en un mapa de Google Maps Cuando generamos un mapa de Google, utilizando el API de los Google Maps, definimos el zoom con el que tiene que comenzar el mapa. Esta es una tarea que hemos repetido numerosas veces a lo largo del Manual de API de Google Maps. Pero el mapa es interactivo y el usuario utilizándolo puede haber cambiado el zoom, para ampliar o reducir la definició. En este artículo vamos a aprender a obtener el zoom actual de un mapa cuando se produzca un evento, es decir, como respuesta a una acción de un usuario. Los eventos en mapas de Google ya los hemos tratado anteriormente en este manual, de hecho, este artículo va a ampliar otro que ya habíamos realizado: Mostrar la posición de una marca de Google Maps en un formulario. En este caso mostraremos el zoom actual del mapa de google al hacer el usuario clic en el mapa y lo escribiremos en un formulario en la propia página. En realidad saber el zoom en un mapa es simple, sólo tenemos que utilizar el método getZoom() de la clase GMap2. getZoom() devuelve un número entero, que es el zoom actual del mapa. Pongamos que tenemos el objeto mapa en una variable llamada "map". Pues entonces el método lo ejecutaremos con esto: zoom_actual = map.getZoom(); Así habríamos guardado en una variable zoom_actual el valor entero del zoom del mapa. Si queremos mostrar en un formulario en la página el zoom actual, como respuesta al evento clic, haremos algo como esto: GEvent.addListener(map, "click", function (overlay,point){ if (point){ marker.setPoint(point); document.posicion.x.value=point.x document.posicion.y.value=point.y zoom_actual = map.getZoom(); document.posicion.zoom.value=zoom_actual } }); Recordar que para entender bien este código tendremos que leer el artículo anterior, así como posiblemente los precedentes de este manual que tratan sobre eventos. Bueno, además tendremos que colocar en el formulario un campo nuevo para escribir el zoom del mapa: zoom actual: <input type="text" name="zoom" value="" /> Esto es todo. Podemos ver el ejercicio en marcha en este enlace. Para ver el código completo del ejercicio simplemente muestra el código fuente de la página del ejemplo. Evento zoom en un mapa de Google Estamos en el manual de creación de Google Maps, tratando los eventos sobre mapas de Google. En este caso vamos a ver un evento que se ejecuta en el momento en el que el usuario cambia el zoom del mapa. Es el evento “zoomend”, que se desata en el momento que el mapa cambia el zoom. El tratamiento de eventos en mapas de Google ya lo explicamos en el artículo Eventos en mapas de Google, en este caso vamos a ver otro ejemplo de trabajo con eventos, que servirá para ilustrar mejor el tema. Como se dijo, para crear un tratamiento de un evento producido por el usuario, se tiene que añadir un escuchador de evento con el método addListener de la clase GEvent. Este método tiene que recibir el objeto sobre el que se escuchará el evento, el tipo de evento y la función que se ejecutará como respuesta al evento (el manejador de eventos). Para obtener más explicaciones de este paso consultar el artículo donde se tratan los eventos de mapas de google en general. El manejador de evento zoomend, es decir, la función que se ejecuta cuando se produce el evento, recibe dos variables. Una es el antiguo zoom que tenía el mapa y otra el nuevo zoom que se ha colocado. Suponemos que tenemos creado un mapa de google y que está declarado en el objeto map de la clase GMap2. Entonces, si quisiéramos crear un evento para que nos mostrase en una caja de alerta las dos variables con el antiguo zoom y el nuevo, haríamos algo como esto: GEvent.addListener(map, "zoomend", function (antiguoZoom, nuevoZoom){ alert("Has cambiado el zoom del mapa.\nAntiguo Zoom: " + antiguoZoom + "\nNuevo Zoom: " + nuevoZoom); }); Este simple ejercicio se puede ver en marcha aquí. Volcamos el zoom en un formulario, cuando se produce el evento Ahora, por complicarlo algo más, mostramos el zoom en un formulario, que se actualiza cuando el usuario cambia el zoom en el mapa. Parte de este ejercicio lo hemos tratado previamente en otro artículo: Averiguar el zoom en un mapa de Google Maps. Anteriormente ya hacíamos un volcado del zoom en un formulario, pero si el zoom se cambiaba no se actualizaba el valor hasta que no se cambiaba la marca pulsando el cualquier parte del mapa. Podemos ver lo que estoy diciendo en esta página. Como se puede ver, hay un formulario en la parte de abajo, que se actualiza cada vez que se resitúa la marca. Ahora vamos a actualizarlo también cuando el usuario cambia el zoom. Para ello tenemos que definir un escuchador del evento zoomend en el mapa. Realmente, sólo hemos añadido estas líneas para que se produzca el comportamiento deseado cuando se hace zoom en el mapa. GEvent.addListener(map, "zoomend", function (antiguoZoom, nuevoZoom){ document.posicion.zoom.value=nuev
oZoom }); Podemos ver el ejemplo en marcha. Viendo su código fuente podemos hacernos una idea del ejercicio completo. Pero recordamos que para entenderlo tenemos que seguir el artículo Averiguar el zoom en un mapa de Google Maps. Maquetar una página con un mapa de Google, usando CSS La maquetación con mapas de Google, que creamos con el API de Google Maps, es muy sencilla, ya que el mapa ocupa el espacio disponible en la capa donde esté contenido. Así pues, al incorporar un mapa a una página web, no tenemos que especificar el tamaño del mapa por Javascript ni nada parecido, simplemente el mapa de Google tomará el los atributos de ancho y alto de la capa (el <div> ) donde está contenido. Esto es dinámico, es decir, si cambia el espacio disponible de la capa donde está el mapa ‐ya sea porque el usuario ha cambiado el tamaño de la ventana o porque se han alterando los atributos width y height de la capa con Javascript o por cualquier modo‐cambiará automáticamente el tamaño del mapa para ajustarse dinámicamente al espacio disponible. Dicho esto, puede resultar poco revelador este artículo, porque no vamos a ver nada de Javascript ni de creación de mapas de Google, sino que vamos a mostrar como maquetar con CSS, teniendo en cuenta que en una de las capas hay un mapa de Google. No obstante, seguro que algunas de las informaciones proporcionadas aquí no van a ser triviales para los lectores. En DesarrolloWeb.com ofrecemos un manual en el que puedes aprender a trabajar con el API de Google Maps. También recomiendo la lectura del material que ofrecemos en DesarrolloWeb.com sobre la maquetación CSS, pues voy a dar por sabidos los aspectos sobre maquetación con hojas de estilos y por tanto, no los voy a explicar. Los atributos de altura y anchura de un mapa son la capa que lo contiene El ejemplo más sencillo que podemos encontrarnos para maquetar un mapa de google es que tenga dimensiones en ancho y alto fijas. Es como hemos colocado los mapas en el manual hasta este momento: <div id="map" style="width: 765px; height: 388px"></div> En este ejemplo el mapa ocupa 765 píxel de ancho y 388 de alto. Esto no tiene ningún secreto. ¿Pero qué pasa si queremos que un mapa de Google Maps tenga el ancho de toda la ventana del navegador? Porque sabemos que el navegador puede tener distintos tamaños, dependiendo de la definición de pantalla del visitante y si la ventana está maximizada o dimensionada de cualquier otra forma. Entonces es muy sencillo, podemos colocar width:100% en la declaración de estilos css de la capa donde está el mapa. <div id="map" style="width: 100%; height: 388px"></div> Este mapa ocuparía todo el área disponible de la ventana del navegador, o bien de la capa donde estuviera contenido. El ejemplo se complica si queremos que el mapa de Google ocupe además todo el alto disponible en el navegador, que también, sabemos, puede ser variable dependiendo de las características de pantalla o del estado de la ventana del browser. Lo normal es que probásemos algo como esto: <div id="map" style="height: 100%; width:100%;"></div> Pero esto tal cual, sin hacer ninguna otra cosa, tiene un problema y es que misteriosamente el mapa aparece vacío o con height = 0. Esto es porque los navegadores tienen problemas al maquetar con height=100%. La idea para solucionarlo es colocar a todas las capas que contengan al mapa height:100%, así como a las etiquetas <BODY> y <HTML> que también deberían tener el height de 100%. Entonces nos debería funcionar y el mapa ocuparía todo el alto y ancho de la ventana. Ahora veamos el ejemplo de un mapa de Google Maps que ocupa todo el ancho y alto del espacio en una página aparte. Maquetar un mapa de Google con width y height 100%, pero mezclado con otros elementos Para acabar veamos un ejemplo de maquetación de un Google Maps que ocupa el 100% del espacio, pero que tiene una cabecera y una barra lateral. La cabecera y el lateral ocupan unos espacios fijos y el mapa de google ocupará todo el sitio que dejan libre otros elementos de la maquetación. Para explicarlo lo más sencillo es ver directamente el ejemplo en una página aparte. El ejercicio es simple, pero necesitaremos conocimientos de CSS sobre maquetación y posicionamiento. El código es el siguiente: <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas‐microsoft‐com:vml"> <head> <META HTTP‐EQUIV="Content‐Type" CONTENT="text/html;charset=ISO‐8859‐1"> <title>Mapa de Google</title> <script src="http://maps.google.com/maps?file=api&v=2&key=coloca‐tu‐llave" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(33,0),3); map.addControl(new GLargeMapControl()); map.setMapType(G_NORMAL_MAP); } } window.onload=load //]]> </script> <style type="text/css"> html,body{ margin:0px; height:100%; } </style> </head> <body> <div id="contenedor" style="width:100%; height:100%;"> <div id="cabecera" style="background‐color: #ffcc99; font‐weight:bold; font‐size: 110%; height: 23px; padding: 3px; margin‐bottom:10px;">Esto es la cabecera!!</div> <div id="lateral" style="float:right; width:200px; height:100%; background‐color:#eeff99;"> <div id="contenidolateral" style="padding: 30px 10px 0 10px;"> Por <a href="http://www.guiarte.com">guiarte.com</a> <br /> <br /> Esto son contenidos que colocamos en el lateral izquierdo. Resulta muy fácil maquetar con un mapa de Google en una capa que toma el tamaño del contendor donde se encuentra. </div> </div> <div id="map" style="height: 100%; margin‐right:210px;"></div> </div> </body> </html> Dibujar líneas en mapas de Google Seguimos estudiando la creación de mapas de Google con el API de Google Maps, en esta ocasión para mostrar el proceso de creación de líneas sobre mapas de Google. Las líneas se dibujan encima de los mapas y se muestran con una pequeña transparencia, para que se pueda ver lo que hay debajo de ellas. Dibujar líneas o polígonos es un modo muy interesante de marcar elementos o caminos en el mapa y resulta muy sencillo. Sólo necesitamos conocer previamente unos cuantos conceptos sobre la creación de mapas, que ya vimos en artículos anteriores, en el manual: Manual del API de Google Maps. Para ilustrar este ejemplo, vamos a crear una línea en un mapa de Google que va de Madrid a Barcelona. Podemos ver el ejemplo en marcha en una página aparte. Clase GPolyline Esta clase sirve para dibujar líneas o polígonos en un mapa. Intenta hacer el trabajo utilizando las características de dibujo con vectores de los navegadores y si no es posible superpone una imagen al mapa. Para construir un polígono se necesitan varios parámetros: •
Array con los vértices de las líneas, que se indica con los distintos puntos •
El color de las líneas, que es un RGB en hexadecimal, como los que utilizamos para definir colores en HTML, comenzando por #. Ej: #ff8800. •
El ancho de las líneas, en pixels. •
La opacidad con un valor que va de cero a uno. •
Otras opciones. El único parámetro que necesitamos indicar de manera obligada son los puntos de las líneas, los otros parámetros son opcionales. Para indicar los puntos de los vértices, se utiliza la clase GLatLng, que sirve para crear objetos que tienen las dos coordenadas geográficas latitud y longitud. Por ejemplo, para definir los puntos donde están Madrid y Barcelona: var madrid = new GLatLng(40.4165020, ‐3.702564); var barcelona = new GLatLng(41.38878, 2.15898); Ahora que tenemos los puntos de la línea a crear, podemos hacer la llamada al constructor del polyline: var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4); Como vemos, se ha definido una línea con dos puntos, con color #0000dd que es un azul, con 6 pixels de ancho y 0.4 de opacidad. Pintar la línea en el mapa con addOverlay Para que esta línea quede dibujada en el mapa se utiliza el método de GMap2 llamado addOverlay() al que le pasamos por parámetro el polyline que habíamos construido. map.addOverlay(polyline); Todo el código Este es el código completo para la configuración del mapa del ejemplo: function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40.002,‐4.12),5); var madrid = new GLatLng(40.4165020, ‐3.702564); var barcelona = new GLatLng(41.38878, 2.15898); var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4); map.addOverlay(polyline); } } window.onload=load Podemos ver el código completo del mapa accediendo al ejemplo y utilizando la funcionalidad del navegador de "Ver código fuente". Ejemplo completo en marcha en http://www.guiarte.com/mapasgoogle/desarrolloweb/linea.php Polígonos con líneas geodésicas en mapas de Google Continuamos la explicación del artículo anterior sobre mapas de Google y polígonos. Anteriormente vimos cómo crear una línea recta en un mapa de Google entre dos puntos dados. Ahora vamos a ver cómo crear un polígono con varios puntos y líneas geodésicas. Primero habrá que explicar qué son líneas geodésicas. Como sabemos, la tierra es esférica y por tanto su superficie tiene una curvatura, a pesar que en los mapas aparece la tierra sobre un plano recto. Por ello, para ir de un punto a otro en el mapa, realmente no vamos a ir en línea recta, sino realizando esa forma de la curvatura de la tierra. Esto es porque la distancia más corta entre dos puntos de la tierra se representaría con una curva geodésica. Para decirle al API de mapas de Google que trace líneas geodésicas sobre el mapa tenemos que especificarlo a la hora de instanciar el polígono. Para ello primero tenemos que definir una opción adicional al polígono: var opciones_poligono = {geodesic:true}; Ahora esas opciones las pasamos como último parámetro en el constructor del objeto de la clase GPolyline. Imaginemos que queremos construir un polígono que hace esta ruta: Madrid, Moscú, Estambul, Roma, Túnez y Madrid. Primero crearíamos los puntos de esas ciudades: var madrid = new GLatLng(40.4165020, ‐3.702564); var moscu = new GLatLng(55.7522222, 37.6155556); var estambul = new GLatLng(41.0186111, 28.9647222); var roma = new GLatLng(41.9, 12.4833333); var tunez = new GLatLng(36.8027778, 10.1797222); Y luego instanciaríamos el polígono, indicando que queremos líneas geodésicas, de esta forma: var poligono = new GPolyline([madrid, moscu, estambul, roma, tunez, madrid], "#cccc00", 6, 0.6, opciones_poligono); Por último ordenamos que se pinte el polígono en el mapa con el método addOverlay(). map.addOverlay(poligono); Podemos ver un ejemplo que hace este mapa con el polígono con líneas geodésicas. Artículo por Miguel Angel Alvarez Polígonos en mapas de Google El API de Google Maps permite dibujar varios tipos de elementos para superponer sobre los mapas de Google. En nuestro manual sobre el desarrollo con el API de Google Maps ya explicamos la manera de colocar marcas y líneas. Ahora le toca el turno a los polígonos. Los polígonos en mapas de Google se colocan de manera similar a como se hacen las líneas, indicando los puntos o vértices, con sus correspondientes coordenadas de latitud y longitud. En el caso de los polígonos, tenemos que indicar los puntos desde el primero hasta el último, siendo el último punto el mismo que el primero, para que se pueda cerrar el polígono. La parte novedosa con respecto a las líneas es que en los polígonos se puede indicar no sólo el color del borde, sino también el color del relleno con el que queremos pintar la parte interna del polígono. La clase GPolygon es la encargada de dar soporte a la implementación de polígonos en los mapas. Para crear un polígono tenemos que utilizar el constructor de la clase GPolygon, que recibe una serie de parámetros para la configuración del mismo. La instanciación de un polígono se realiza de la siguiente manera: var objeto_poligono = new GPolygon([punto1, punto2, …, punto1], color_borde, tamaño_borde, opacidad_borde, color_relleno, opacidad_relleno); Voy a listar y explicar los parámetros del constructor de GPolygon para que queden claros: Puntos de los vértices: Como se puede ver, puede generarse un polígono con un número indeterminado de vértices. Lo único es que el recorrido de vértices tiene que estar cerrado, es decir, empezar y acabar en el mismo punto, para que no se produzcan comportamientos indefinidos a la hora de pintar el polígono. Todos los puntos o vértices tienen que ser indicados con un objeto GLatLng, que se compone de las coordenadas de latitud y longitud. Color del borde: Una cadena con un color RGB en hexadecimal, tal como de definen en HTML. Tamaño del borde: Un número entero, que es el número de píxeles del borde. Opacidad del borde: Un número entre 0 y 1. Cuanto más bajo, más transparente y cuanto más alto más opaco. Color_relleno: Un valor de tipo cadena con el color RGB en hexadecimal. Opacidad del relleno: También un valor entre 0 y 1, igual que la opacidad del borde. Para dar la orden a un mapa de Google que dibuje un polígono generado se utiliza el método addOverlay() del objeto mapa, de la clase GMap2, de manera similar a como hicimos al dibujar líneas: map.addOverlay(objeto_poligono); Ejemplo de creación de un polígono en un mapa de Google Maps Ahora veamos un ejemplo de creación de un polígono. En este caso hemos realizado uno cuyoslados se superponen a la muralla de Ávila y cuyo interior sería la ciudad amurallada. Primero hemos tenido que obtener y generar los puntos (latitud y longitud, con la clase GLatLng) de los vértices de la muralla: var muralla1 = new GLatLng(40.65627360348711, ‐4.707534313201904); var muralla2 = new GLatLng(40.65884555247438, ‐4.706525802612305); var muralla3 = new GLatLng(40.658715329592404, ‐4.70139741897583); var muralla4 = new GLatLng(40.658259547503505, ‐4.697213172912598); var muralla5 = new GLatLng(40.656680564044166, ‐4.696569442749023); var muralla6 = new GLatLng(40.65399457849209, ‐4.697320461273193); Luego creamos el polígono utilizando estos puntos y las configuraciones deseadas: var polygon = new GPolygon([muralla1, muralla2, muralla3, muralla4, muralla5, muralla6, muralla1], "#669933", 5, 0.7, "#996633", 0.4); Esto creará un polígono sobre los vértices sacados de la muralla de Ávila, con color de borde #669933, tamaño de borde 5 píxel, opacidad del borde 0.7 (tirando a opaco), con color del relleno #996633 y opacidad del relleno 0.4 (tirando más a transparente). Por último, mostraríamos el polígono con addOverlay(). map.addOverlay(polygon); Podemos ver el ejemplo en marcha en: http://www.guiarte.com/mapas‐google/desarrolloweb/ poligonos.php Recomendamos ver el código fuente de este ejemplo Abre el ejemplo y utiliza el menú "Ver ‐Código fuente", para ver el código completo de la creación del mapa de Google con el polígono. Artículo por Miguel Angel Alvarez Eventos y polígonos en Google Maps Para desarrollar alguna funcionalidad adicional de los polígonos en los mapas de Google vamos a programar un añadido al script que crea un polígono, que vimos en el artículo anterior, para ocultar y mostrar el polígono por respuesta a un evento de usuario. Esta funcionalidad de mostrar y ocultar polígonos es común a las distintas overlays que hemos tratado con anterioridad en el manual de mapas de Google (API de Google Maps). El ejercicio se trata de colocar una marca y un polígono en un mapa de Google. Al pulsar la marca se ocultará el polígono y al volverla a pulsar se mostrará de nuevo, y así sucesivamente. Podemos ver el ejemplo en marcha para entender bien el objetivo de este taller de Google Maps. Como hemos dicho, en el artículo anterior vimos como colocar un polígono en un mapa de Google. La única diferencia con este caso es que hemos definido la variable donde vamos a colocar el objeto polígono, de la clase GPolygon, como global a toda la página. Esto es porque este objeto polygon lo tendremos que acceder desde otras funciones para mostrarlo u ocultarlo y si no está como variable global será imposible referenciarlo. (Para crear una variable glogal basta con declararla fuera de ninguna función, mira el código fuente del ejercicio terminado para ver cómo hacerlo.) Hemos creado también, como decíamos, una marca: var punto_marca = new GPoint (‐4.702, 40.6570); var marca = new GMarker(punto_marca); map.addOverlay(marca); Luego, tenemos que crear el evento "click" a la marca, para que cuando se hace clic sobre ella se llame a una función que se encargue de mostrar u ocultar el polígono. Con el API de Google Maps se define un evento de la siguiente manera: GEvent.addListener(marca, "click", ocultar_mostrar_poligono); Esto añade el escuchador de evento "click" asociado al objeto contenido en la variable marca. Cuando y cuando se detecte el evento se ejecuta la función ocultar_mostrar_poligono(). Por decirlo de otra manera, hemos definido un evento click sobre una marca, para ejecutar la función ocultar_mostrar_poligono() cuando se produzca. Nos quedaría ver el código de la función que muestra u oculta el polígono. Esta función hace uso de la variable global donde hemos almacenado el objeto polígono, para acceder a los métodos de dicho objeto. function ocultar_mostrar_poligono(){ if (polygon.isHidden()){ //alert("Estaba oculto"); polygon.show(); }else{ //alert("Estaba mostrandose"); polygon.hide(); } } Lo primero que se hace es ver si el poligono esta o no oculto, con el método isHidden(), con polygon.isHidden(), que devuelve true en caso que esté oculto y false en caso que esté mostrándose. En caso de estar oculto, llamamos al método que lo muestra, con polygon.show(). En caso que estuviera visualmente activo, llamamos al método para ocultarlo, con polygon.hide(). Y no hay más misterios, que no hayamos visto con anterioridad en el manual del API de Google Maps. Dejo de nuevo el link para ver el ejemplo en marcha en una ventana aparte. Observar su código fuente para obtener más información. Superponer una imagen en un mapa de Google En este artículo del manual de Google Maps vamos a explicar el modo de superponer una imagen a un mapa, lo que en el API de desarrollo de mapas de Google llaman "Ground Overlays". . Puede servirnos para ofrecer información gráfica del lugar que se está visualizando, o añadir elementos para llamar la atención del usuario. La tarea es muy simple, pues sólo necesitamos definir el lugar donde se tiene que pegar la imagen que deseamos mostrar y la URL donde se localiza el archivo gráfico a superponer. La imagen que coloquemos siempre aparecerá sobre el propio fondo, tapando lo que haya debajo Las imágenes que se superponen se crean a través de la clase GGroundOverlay, cuyo constructor recibe una URL o camino relativo de la imagen y los límites del mapa donde colocarla. var imagen = new GGroundOverlay("archivo‐grafico.jpg", limites_imagen); Los límites de la imagen son a su vez otra clase, llamada GLatLngBounds, que es como un rectángulo formado por dos puntos geográficos, las coordenadas Sur‐Oeste y Norte‐Este, definidas a su vez con los valores de latitud y longitud. Podemos ver la siguiente imagen, en la que hemos marcado los dos puntos que necesitamos para definir los bordes o límites de la imagen, que utilizaremos en el constructor de la clase GLatLngBounds. En el constructor debemos especificar primero el punto X1 y luego el punto X2. var limites_imagen = new GLatLngBounds(x1, x2); A su vez, los puntos x1 y x2 son coordenadas latitud y longitud que debemos crear con la clase GLatLng, de esta manera: var x1 = new GLatLng(valor_latitud, valor_longitud); Una vez tenemos el objeto imagen de la clase GLatLngBounds, tenemos que colocarlo en el mapa con el método del mapa addOverlay(), que habíamos utilizado anteriormente para superponer elementos en mapas de google como los polígonos. map.addOverlay(imagen); Vemos el código completo para hacer un mapa con una imagen superpuesta. var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40.491022,‐3.8736677),15); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); //creo los puntos de los límites de la imagen var x1 = new GLatLng(40.489259,‐3.877358); var x2 = new GLatLng(40.4923928,‐3.8675308); //defino los límites donde voy a colocar la imagen var limites_imagen = new GLatLngBounds(x1, x2); //Creo un ground overlay var imagen = new GGroundOverlay("lasrozas.jpg", limites_imagen); //coloco la imagen o ground overlay en el mapa map.addOverlay(imagen); Como se ha podido comprobar, superponer una imagen es algo relativamente sencillo, aunque tenemos que definir bien los límites de la imagen para que el renderizado quede bien y no se estire demasiado la foto. El ejemplo en marcha lo podemos ver en una página aparte. Incluir las fotos de Panoramio en un mapa de Google Como debemos saber, Panoramio es un servicio de Google donde los usuarios pueden enviar fotos de cualquier parte del mundo. A través del API de Google Maps podemos, de una manera muy rápida, sobreponer una capa con las fotos de la base de datos de Panoramio. En este artículo veremos cómo incluir dichas fotos para enriquecer nuestros mapas con contenido actualizado y de utilidad. Este artículo es muy sencillo, al menos así les parecerá a todos los que hayan seguido el Manual de programación del API de los Mapas de Google que venimos publicando en DesarrolloWeb.com. Sólo vamos a utilizar una nueva clase que no habíamos visto hasta ahora que es la clase Glayer. Esta clase GLayer sirve para superponer capas con información geográfica de otros sitios web. En este caso utilizaremos el sitio web de Panoramio para incluir las fotos dadas de alta, pero también se puede utilizar GLayer para incluir información de la Wikipedia, por ejemplo. En el documento http://spreadsheets.google.com/pub?key=p9pdwsai2hDN‐cAocTLhnag podemos encontrar una lista de las posibles capas que por ahora soporta el API de Google Maps. Para crear una capa con GLayer hacemos lo siguiente: var capa_panoramio = new GLayer("com.panoramio.all"); Simplemente llamamos al constructor de GLayer y le pasamos como parámetro el identificador de la capa que queremos mostrar. Los identificadores posibles están en el documento ese al que hacía referencia. Luego, para hacer que el layer se muestre en un mapa de Google utilizamos un método, que ya hemos visto anteriormente en el manual de desarrollo web .com, de la clase GMap2: addOverlay(). map.addOverlay(capa_panoramio); A addOverlay() le tenemos que pasar la instancia de la capa que queremos mostrar, que hemos creado al llamar al constructor de GLayer. El código completo para crear un mapa de Google con las fotos de Panoramio sería el siguiente: function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40.002,‐4.12),8); var capa_panoramio = new GLayer("com.panoramio.all"); map.addOverlay(capa_panoramio); } } window.onload=load Podemos ver el ejemplo en marcha en una página aparte. Incluir referencias a la Wikipedia en mapas de Google En este artículo vamos a mostrar cómo se pueden incluir referencias a contenidos de la Wikipedia en mapas de Google. Para quien llegue aquí y no sepa hacer mapas de Google recomendamos leer el manual de programación de Google Maps. La verdad es que los chicos de Google nos han puesto muy fácil la integración de la Wikipedia con los mapas de Google y es de agradecer. El proceso para conseguirlo es muy similar ‐casi idéntico‐al utilizado para incluir las fotos de Panoramio, tratado anteriormente en DesarrolloWeb.com. Por eso, recomendamos leer previamente el artículo Incluir fotos de Panoramio en un mapa de Google, ya que hay cosas en este artículo que vamos a dar por sabidas, por haber sido explicadas en el artículo mencionado. Para que se vea qué son las referencias de la Wikipedia y cómo se integran con los mapas de Google podemos acceder al ejemploque vamos a tratar en este artículo. Así pues, pasamos a la acción. Lo primero que tenemos que saber es que existen diversos servicios que pueden ser integrados como capas de contenidos externos en nuestros mapas. En concreto, por lo que respecta a la Wikipedia, tenemos varias posibilidades de integración que corresponden con los distintos idiomas en los que la enciclopedia trabaja. Para acceder a un listado de todos los servicios que se pueden integrar, tenemos que entrar en: http://spreadsheets.google.com/pub?key=p9pdwsai2hDN‐cAocTLhnag Veremos que existen distintos idiomas que podemos escoger. A nosotros de momento nos interesará el español, por lo que tenemos que utilizar el identificador de capa org.wikipedia.es. Ahora, para mostrar una capa (layer) con un contenido externo, haremos algo como esto: function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(40.41,‐3.717),13); var capa_wikipedia = new GLayer("org.wikipedia.es"); map.addOverlay(capa_wikipedia); } } window.onload=load En el artículo sobre incluir las fotos de Panoramio ya quedó explicado este script por pasos, pero podemos remarcar las siguientes particularidades: var capa_panoramio = new Glayer("org.wikipedia.es"); Con esa línea se crea una nueva capa, como un objeto de la clase Glayer, pasando como parámetro al constructor la referencia id de la capa que queremos mostrar, "org.wikipedia.es". map.addOverlay(capa_wikipedia); Así añadimos al mapa de Google la capa que acabamos de crear. Eso es todo, ahora podemos añadir contenidos de interés a nuestro mapa, que explican los puntos geográficos de los lugares que se han destacado en la Wikipedia. Es tan fácil la integración con la Wikipedia que, después de leído este artículo de desarrollo web .com, tardarás menos de un minuto en utilizarla en tus mapas. Además está disponible para todos los idiomas más usados en el mundo. El ejemplo realizado para ilustrar esta funcionalidad se puede ver en este enlace. Colorear países en mapas de Google En este artículo vamos a conocer una manera de colorear países en Google Maps. No es la única pero quizás sí sea la más sencilla de conseguirlo. Para ello vamos a utilizar la clase GPolygon, del API de Google Maps, que nos permite dibujar un polígono dadas una serie de coordenadas. Los polígonos contienen una línea de contorno y además se les puede aplicar color de relleno. Así pues, los utilizaremos para rellenar de color la superficie de los países y pintar una línea que rodea la silueta del país. En el Manual de Mapas de Google, que venimos publicando, ya explicamos cómo crear y mostrar polígonos en los mapas, con lo que ya deberíamos dominar los conocimientos necesarios para seguir este ejemplo. Antes de continuar, tal vez te interese ver el efecto de coloreado sobre diferentes países que vamos a explicar en este artículo. La parte más laboriosa para la realización de los polígonos de cada país consiste en sacar todos los puntos geográficos (latitud, longitud) que necesitaríamos para crear su contorno. Esto representa un gran trabajo, porque tendríamos que ir, país por país, apuntando los puntos de la silueta en arrays, y además, cuanto más detallistas queramos ser, más puntos tenemos que extraer. Afortunadamente, otras personas ya se han tomado por nosotros la molestia de sacar cada uno de los puntos geográficos de las siluetas de los países y además, han disponibilizado su trabajo para con licencia copyleft, para que otros puedan utilizarlo en sus aplicaciones. Hay un proyecto creado por Anieto2k que nos va a servir de manera excelente para obtener las líneas de puntos, en una estructura de datos tipo array de coordenadas GLatLng, que se puede utilizar directamente para la creación de los polígonos en mapas de Google. El proyecto mencionado se llama CountryPoints y está en Google Code en la URL: http://code.google.com/ p/countrypoints/ CountryPoints consiste básicamente en un archivo con código Javascript donde se declaran una serie de arrays con puntos geográficos, basados en latitudes y longitudes, para generar las siluetas de cada país. Con esos puntos se pueden trazar los polígonos para dibujar los países. Aunque en un principio podría parecer suficiente un polígono para cada país, hay que señalar que muchos de ellos contienen islas o territorios separados del principal, que deben especificarse en polígonos distintos. Así que en CountryPoints tenemos, para cada país, una o más sucesiones de puntos para formar uno o más polígonos sobre la superficie. Para ilustrar la forma de este archivo de puntos, vendrá bien mostrar aquí un extracto de los puntos de varios países: //primero se declara un objeto var country = {}; //luego se definen propiedades con las coordenadas para cada país //se utilizan códigos de dos letras para cada país country.GU = { desc: 'GUAM', coord: [ [new GLatLng(13.235, 144.7094), new GLatLng(13.42778, 144.6552), new GLatLng(13.65229, 144.8761), new GLatLng(13.235, 144.7094)]] }; country.PT = { desc: 'PORTUGAL', coord: [ [new GLatLng(37.25319, ‐7.431854), new GLatLng(37.00889, ‐7.897779), new GLatLng(37.02631, ‐8.9892369), new GLatLng(38.71722, ‐9.118473)], [new GLatLng(37.70555, ‐25.45611), new GLatLng(37.88389, ‐25.85417), new GLatLng(37.70555, ‐25.45611)], [new GLatLng(32.6375, ‐16.94361), new GLatLng(32.6375, ‐16.94361)]] }; He escogido dos países para mostrar la sintaxis de declaración de puntos de sus siluetas, aunque a Portugal le he quitado muchos puntos para que quepa bien en el texto de este artículo de desarrolloweb .com. Observemos que los puntos se guardan en una propiedad llamada "coord", que es un array de dos dimensiones. En la primera dimensión tiene cada uno de los polígonos para cada uno de los territorios separados del país. En la segunda dimensión tiene cada uno de los puntos para hacer el polígono, definidos con objetos GLatLng. Así pues, para crear los polígonos de un país, por ejemplo Portugal, tendremos que hacer algo como esto: 1) Incluir el array con los puntos de los países. Para ello tendremos que incluir un código Javascript externo, que está en el proyecto CountryPoints de Google Code. (podemos incluirlo desde el servidor de Google Code o directamente descargarlo y subirlo a nuestro espacio de alojamiento. <script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script> 2) Extraigo todos los puntos definidos para Portugal var coordenadas_portugal = country.PT.coord; Los códigos de países de dos letras son por ejemplo PT para portugal, ES para España y BR para Brasil... Estos códigos están normalizados según normativa ISO 3166‐1. 3) Recorrer las coordenadas para crear los polígonos Con un bucle recorro los grupos de coordenadas para crear cada uno de los polígonos. (Porque debemos recordar que el array de coordenadas era de dos dimensiones, para cada uno de los territorios separados del país) for (i=0; i<coordenadas_portugal.length; i++){ map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4)); } Código completo para colorear países A continuación pongo un código completo a utilizar para colorear varios países del mundo. <script src="http://maps.google.com/maps?file=api&v=2&key=tu_lleva_api_google_maps" type="text/javascript"></script> <script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(39.41,‐3.017),5); map.addControl(new GMapTypeControl()); map.addControl(new GSmallZoomControl()); //creo los polígonos de España var coordenadas_espana = country.ES.coord; for (i=0; i<coordenadas_espana.length; i++){ map.addOverlay(new GPolygon(coordenadas_espana[i],"#dd6600", 2, 0.7, "#993300", 0.4)); } //creo los polígonos de portugal var coordenadas_portugal = country.PT.coord; for (i=0; i<coordenadas_portugal.length; i++){ map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4)); } //creo los polígonos de francia var coordenadas_francia = country.FR.coord; for (i=0; i<coordenadas_francia.length; i++){ map.addOverlay(new GPolygon(coordenadas_francia[i],"#000099", 2, 0.7, "#000099", 0.4)); } //creo los polígonos de Marruecos var coordenadas_marruecos = country.MA.coord; for (i=0; i<coordenadas_francia.length; i++){ map.addOverlay(new GPolygon(coordenadas_marruecos[i],"#990000", 2, 0.7, "#990000", 0.4)); } } } window.onload=load //]]> </script> El ejemplo anterior se puede ver en marcha en una página aparte. Esperamos que se haya podido entender el proceso para pintar países. En el propio blog del creador de CountryPoints hay otras explicaciones sobre la utilización de este sistema, que es de donde me he guiado para hacer el ejemplo que vamos a publicar en DesarrolloWeb.com. Colorear países puede venir muy bien para darle un poco de vida y mejor aspecto a nuestras aplicaciones, pero además este ejemplo puede servir para aprender a crear un sistema por el cual definir una serie de coordenadas de elementos, para colorear cualquier cosa que necesitemos en mapas geográficos, como provincias de un país, ciudades, barrios, etc.