Manual Del API de Google Maps

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.
com
Manual del API de Google Maps
Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Javier Chaure Miguel Angel Alvarez Gema Maria Molina Prados
Desarrollador freelance http://www.xski.net/ (2 captulos) Director de DesarrolloWeb.com http://www.desarrolloweb.com (23 captulos) Equipo DesarrolloWeb.com http://www.desarrolloweb.com/ (1 captulo)
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
Incluir un Mapa de Google en tu web en 5 minutos

En DesarrolloWeb.com 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 artculo voy a explicar una manera mucho ms sencilla de incluir un mapa de Google en una pgina web, apta para todo tipo de personas, programadores o no, y que te llevar slo unos minutos para integrar un mapa personalizado en cualquier web. Quera 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 pgina de una inmobiliaria y queremos localizar cada una de las casas en venta, adems 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 ms sencillo. Tenis un cliente al que le estis creando el sitio web y quiere que tenga un mapa de Google con la localizacin 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 sera suficiente crear un nico mapa esttico e incrustarlo en la pgina del cliente. Esto se puede hacer fcilmente desde la propia pgina http://maps.google.com/ y no necesita ningn conocimiento de programacin. 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 descripcin del mapa.
Adems, a la derecha tenis el mapa que se va a crear. En este momento estn disponibles las opciones para edicin del mapa y creacin de marcas, lneas, etc. Podris ver en la esquina superior derecha del mapa una serie de iconos con los que podris colocar los distintos elementos sobre el mapa.
Experimentar con cada tipo de dibujo que se puede colocar. Adems, luego podemos personalizar cualquier cosa, como cambiar el color a las lneas o formas, o poner varios tipos de marcas sobre el mapa. Al crear cualquier elemento o seal sobre el mapa, nos abre una pequea 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 botn de Aceptar. 6) Cuando est el mapa creado, podemos dar al botn de Guardar y luego al botn marcado como Listo, que aparecen a la izquierda. 7) Obtener el cdigo para incluir el mapa en cualquier web. Este paso tiene varias maneras de hacerse, todas a travs del enlace que pone Enlazar, situado a la derecha. La opcin ms verstil es incluir el mapa con un IFRAME, pero debemos personalizar el mapa antes, para que el IFRAME sea exactamente como nosotros queremos. Primero, como deca, 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 pgina web.
En esta pgina tenemos que indicar: 1) El tamao del mapa, 2) centrar el mapa donde lo queremos y ponerle el zoom deseado y 3) copiar el cdigo que nos dan. 8) Pegar el cdigo del mapa en nuestra pgina web Pues ya est! Una vez pegado el mapa de Google aparecer tal cual lo hemos personalizado en la pgina web que deseemos. Yo he pegado a continuacin este mapa de Google de prueba, para que se pueda ver en este artculo de DesarrolloWeb.com.
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 5
Eso es todo. Podemos haber tardado un poco ms para aprender a crear el mapa, pero una vez sepamos, nos llevar menos de 5 minutos incorporar un mapa de Google en una pgina web.
Object 1
Ver mapa ms grande Artculo por Miguel Angel Alvarez
Crear mapas de Google con el asistente de Google Maps

Vamos a ver uno de los modos de creacin 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 cdigo que debemos copiar y pegar en nuestra pgina web en el lugar donde queremos que aparezca. En realidad el asistente que vamos comentar en este artculo es para realizar un mapa con el Ajax Search API para bsqueda local. El resultado que obtendremos consiste en un mapa, con un punto sealado en l y adems un sistema de bsqueda de direcciones y rutas para llegar a ese punto. As que ser un mapa con alguna utilidad extra para la localizacin 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 creacin de mapas de Google. No obstante para quien quiera hacer un mapa sencillo para sealar un punto geogrfico y ponerlo en su web, sin complicarse la vida, es una herramienta ideal. El asistente para la creacin 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 informacin 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 geogrfico localizado, que tambin 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 informacin), y la direccin completa de lo que queremos enlazar.
Nota: la direccin completa, para que la entienda Google Maps y la pueda localizar en el mapa, hay que ponerla desde lo ms particular a lo ms general, separado por comas. Por ejemplo. Gran Va 45, Madrid, Espaa.
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 slo se ver en el sitio web donde hayamos indicado (podemos poner slo la URL principal del dominio como http://www.desarrolloweb.com). Luego podemos pasar al tercer paso, donde simplemente tenemos que generar el cdigo fuente que colocar en la pgina web. Lo copiamos y slo tenemos que pegarlo en el lugar de la pgina donde deseemos que aparezca el mapa de Google.
Referencia: Por si nos interesa, existe otra manera de crear fcilmente un mapa de Google en una pgina web, que ya relatamos en otro artculo de DesarrolloWeb.com: Crear un Mapa de Google sin saber programacin.
Para acabar, dejamos aqu una muestra de un mapa de Google que hemos preparado para probar este asistente. Artculo por Miguel Angel Alvarez
Lo bsico para empezar a desarrollar con Google Maps I

Uno de los ltimos servicios del gigante Google que ms 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 areas 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 pgina, de forma simple y gratuita. A lo largo de este artculo veremos los fundamentos para integrar Google Maps en nuestro website y a travs de un ejemplo crearemos un primer mapa usando las funcionalidades ms bsicas de la API. La caracterstica que sin duda ms llama la atencin 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 pgina, todo ello de forma fcil e intuitiva. Este tipo de aplicacin web se encuadra dentro de la tecnologa que Adaptive Path ha dado por denominar AJAX (Asynchronous Javascript + XML). No vamos a profundizar en este
artculo en el planteamiento AJAX, sin embargo es conveniente hacer una breve resea para conocer a grandes rasgos su funcionamiento. AJAX no es una nueva tecnologa, sino una combinacin de tecnologas ya existentes para ofrecer una nueva visin a la hora de crear aplicaciones web. Siguiendo un planteamiento AJAX, usaremos CSS y DHTML para la presentacin de los datos, el DOM (Document Object Model) para tratar dinmicamente la presentacin de estos datos, XML y XSLT para el correcto intercambio y manipulacin de la informacin, XMLHttpRequest para obtener la informacin de manera asncrona (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 presentacin y el servidor, que nos har peticiones de informacin de forma asncrona para incorporarla inmediatamente a la presentacin de nuestra pgina, sin necesidad de recargarla y hacer una nueva peticin de pgina completa al servidor. A grandes rasgos esta es la filosofa de funcionamiento de AJAX, un planteamiento que sin duda ofrece grandes posibilidades, como las que podemos ver en prctica con Google Maps. Podemos ver otros ejemplos de aplicaciones AJAX en Google Suggest y Gmail. Como vimos anteriormente en la introduccin de este artculo, Google nos permite usar Google Maps en nuestra pgina web de forma gratuita. A continuacin veremos cmo 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 pblico podemos empezar a crear mapas en nuestro dominio. Es importante resear que el servidor donde alojemos nuestros scripts para Google Maps ha de ser pblico, entre otras razones porque Google monitorizar el uso que hagamos del mapa, de acuerdo con sus trminos 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 slo 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>Introduccin a Google Maps - Desarrolloweb</title> <script src="http://maps.google.com/maps?file=api&v=1&key=AADE_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()); map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3); </script> </body> </html>
Ejecutando este cdigo en un servidor pblico obtenemos como resultado el siguiente mapa, que nos muestra una vista area de Madrid centrada en la Puerta de Alcal:
Como se puede ver en el cdigo, hemos creado una nica capa con id="map" destinada a contener nuestro Google Map. El script que viene a continuacin de la declaracin de esta capa es el que genera el mapa. Veamos sentencia a sentencia qu hace el cdigo:
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. Ntese que el mapa se adaptar al tamao 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" (fotografa de satlite) y "Hybrid" (combina ambas vistas). En nuestro caso, ya que Google todava no dispone de mapas vectoriales para Espaa, hemos elegido la vista de satelite que nos muestra la fotografa area 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 tamao (GSmallMapControl) para mapas en tamao 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 mtodo centerAndZoom. Los parmetros son un GPoint (que generamos a continuacin a partir de su latitud y longitud) y el nivel de zoom que queremos mostrar, de 1 a 16, siendo el nivel 1 el ms cercano y el 16 el ms alejado. Google Maps ubica los puntos en los mapas a partir de su latitud y longitud. Esta informacin debemos suministrarla nosotros, y para ello lo ms 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 fsico en el mapa, tales como Geocoder.us y geonames.org, en los que podemos realizar bsquedas a partir del nombre de la ubicacin que buscamos.
Nota: El artculo continua en Desarrollar con Google Maps II. Pero atencin, que estos ejemplos de Mapas de Google estn explicados para el API 1 de Google Maps. Pero si queremos ver explicaciones actualizadas, siguiendo el API 2 de Google Maps, podemos consultar el artculo: Mapas de Google API 2.
Artculo por Javier Chaure
10
Lo bsico para empezar a desarrollar con Google Maps II

Como se puede ver en el artculo anterior sobre la creacin de mapas de Google, crear un mapa y centrarlo en un punto es realmente simple. Sofistiquemos un poco nuestro mapa aadindole unos marcadores, de tal forma que podamos ubicar determinados puntos de inters en el mapa. El mapa con nuestros puntos de inters aadidos 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 continuacin asociaremos un marcador a cada uno de los puntos y lo mostraremos en el mapa. El cdigo 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>Introduccin a Google Maps - Desarrolloweb</title> <script src="http://maps.google.com/maps?file=api&v=1&key= AADE_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);
11
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 ocasin 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 sealados sobre l, pero no aportan ninguna informacin al visitante. Lo apropiado sera satisfacer la curiosidad del usuario proporcionndole algo de informacin asociada a ese punto. Aadamos pues algo ms de informacin a nuestros marcadores mostrando unas ventanas informativas que nos indiquen el nombre de la ubicacin fsica 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>Introduccin a Google Maps - Desarrolloweb</title> <script src="http://maps.google.com/maps?file=api&v=1&key= AADE_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 API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 12
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 cdigo 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 funcin que nos crea los markers y sus correspondientes infoWindows para ahorrar algo de cdigo. Esta pequea funcin recibe como parmetros el GPoint donde queremos ubicar el marker, y un parmetro "nombre" que contiene la informacin que queremos mostrar en la ventana informativa asociada. Hay que resear que para asociar la aparicin 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(nombre); });
De esta manera cada vez que se hace un clic sobre el marker se muestra en la infoWindow la informacin especificada en el parmetro "nombre". Ntese que hemos usado openInfoWindowHtml, que toma su parmetro como cdigo html, de modo que podramos incluir una maquetacin al contenido de nuestra nueva infoWindow.
13
A lo largo de este artculo hemos visto las funciones ms bsicas de Google Maps, que proporcionan las herramientas ms 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 ms avanzados.
Nota: Hemos visto aqu explicada el API 1 de Google Maps. Ahora estos cdigos deben actualizarse siguiendo el API 2 de Google Maps. Para ello podemos consultar el artculo Mapas de Google API 2.
Artculo por Javier Chaure
Mapas de Google API 2

Seguramente ya conozcamos los Mapas de Google, un sistema que permite acceder a fotos de satlite de todo el mundo que ha tenido bastante xito entre los Internautas. Si estamos leyendo este artculo hasta podremos saber que los Mapas de Google tienen un API a travs de la cual podemos integrarlos como servicio en una pgina web. Esto permite que en una pgina web desarrollada por nosotros podamos colocar mapas y vistas satlite de distintos puntos del planeta, todo de manera gratuita. Bueno, pues en DesarrolloWeb.com ya habamos publicado un par de artculos sobre los Mapas de Google que explicaban las reglas ms bsicas para empezar a publicar mapas satlite en nuestro sitio. Lo bsico para empezar a desarrollar con Google Maps I Desarrollar con Google Maps II
Pero estos dos artculos utilizaban una API que Google ha actualizado, por lo que se haca necesaria una revisin para mostrar cdigos de integracin de Google Maps que sean compatibles con el API que se utiliza ahora. Sin embargo, los artculos anteriores siguen siendo muy interesantes para leer, porque explican algunas cosas bsicas como obtener una llave (Key) de Google, registrndonos en el sitio de Google Maps, para poder utilizar los mapas en nuestro sitio. Ahora vamos a ver un cdigo 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[ //funcin para cargar un mapa de Google. //Esta funcin se llama cuando la pgina 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, pasndole una referencia a la capa o <div> donde queremos mostrar el mapa var map = new GMap2(document.getElementById("map")); API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 14
} }
//centramos el mapa en una latitud y longitud deseadas map.setCenter(new GLatLng(40.407,-3.68), 5); //aadimos controles al mapa, para interaccin 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 cdigo est comentado para una mejor comprensin. Ahora a dar unas explicaciones adicionales: Primero, aunque est ms tarde en el cdigo, vamos a ver lo que hay en el body de la pgina. Hay que ver que hemos definido un evento onload="load()", que sirve para llamar a la funcin que genera el mapa, una vez se ha terminado de cargar la pgina. Dentro del cuerpo de la pgina nos fijamos en la etiqueta div donde se mostrar el mapa:
<div id="map" style="width: 615px; height: 400px"></div>
El tamao definido con estilos a esta capa es importante, porque ser el tamao de visualizacin 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 cdigo Javascript. Primero se incluye la librera 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 cdigo 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 funcin que genera el mapa, que se carga cuando se termina de mostrar la pgina (la llamamos por el evento onload). Esa funcin est bastante comentada y adems quiero dejar para artculos posteriores distintos pormenores de la generacin de mapas, pero es muy importante llamar la atencin sobre un punto crtico, que me dio un quebradero de cabeza cuando estaba probando los mapas, hasta que consegu dar con el error. Se trata del mtodo de la clase GMap2 setCenter(): setCenter() se tiene que invocar justo despus 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 documentacin del API, pero que como es un poco larga de leer, es
fcil que no nos percatemos. En mis pruebas me fall porque intentaba ponerle un tipo de mapa (vista satlite) y luego lo centraba. El problema es que no sale ningn error especfico y es difcil hallar el problema. Artculo por Miguel Angel Alvarez
Tipos de mapa en Google Maps

Al desarrollar con Google Maps podemos escoger el tipo de mapa que vern los usuarios, entre las distintas vistas predefinidas como son la vista satlite, vista de calles o vista hbrida (satlite y calles en modo semi-transparente. Para definir el tipo de mapa en un mapa de Google tenemos el mtodo setMapType() de la clase GMap2. El mtodo 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 poltico, con los nombres de localizaciones. Este mapa es el definido por defecto. En principio aparecen los distintos pases, pero si ampliamos veremos las ciudades importantes, carreteras, etc y si hacemos ms zoom sobre una poblacin veremos los nombres de las calles, plazas, barrios, etc. G_SATELLITE_MAP Este mapa permite ver el mundo con imgenes tomadas desde satlite. G_HYBRID_MAP Este mapa combina la vista satlite y la vista normal. Sobre las fotos satlite se pintan encima las distintas localizaciones, calles, etc. Veamos un mapa de Google en el que definimos el tipo de mapa. Mostramos una vista satlite 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[ //funcin para cargar un mapa de Google. //La llamamos cuando la pgina 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, pasndole 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); } } //]]>
16
</script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px; height: 400px"></div> </body> </html>
Con este cdigo tendremos una vista satlite de Barcelona centrada en la plaza donde est la estatua de Coln sealando con el dedo. Un par de cosas que hay que ver: En la lnea 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 lnea map.setMapType(G_SATELLITE_MAP); es donde cargamos el tipo de vista.
Nota: Existen otros artculos anteriores donde hemos explicado temas adicionales de los mapas de Google que deberas conocer para entender este cdigo.: Google Maps API 2
Ahora, si deseamos un mapa hbrido, slo tendremos que cambiar la lnea:

map.setMapType(G_SATELLITE_MAP);
Por esta otra lnea, donde especificamos otro tipo de mapa:

map.setMapType(G_HYBRID_MAP);
Tambin podemos probar a quitar esa lnea donde especificamos el tipo de mapa. Veremos como sale entonces el mapa de calles. Es lo mismo que si especificsemos el tipo de mapa normal.
map.setMapType(G_NORMAL_MAP);
Artculo por Miguel Angel Alvarez
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 mtodo addControl de la clase GMap2, pasando por parmetro una instancia del tipo de control que se desea incluir. Habra que poner esta lnea en el cdigo, despus de centrar el mapa en la posicin deseada.
map.addControl(new GMapTypeControl());
Veamos el cdigo completo de un mapa que tiene el control para cambiar el tipo de vista. El mapa estar centrado en Pescola, provincia de Castelln, donde tena la sede el Papa Luna.
<html> API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 17
<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 fsico

En este artculo vamos a mostrar cmo trabajar con un tipo de mapa de Google especial, presentado hace poco en el sistema de Google Maps. Se trata del mapa fsico, que muestra la tierra con un dibujo de su superficie que representa las montaas, ros y otros accidentes geogrficos. El mapa fsico ha sido presentado hace relativamente poco tiempo. Al menos cuando iniciamos este manual del API de Google Maps no exista. Por tanto, en los artculos publicados anteriormente no habamos hablado de la posibilidad de integrar un mapa fsico. Lo veremos ahora. En el control de seleccin de tipo de mapa no aparece por defecto el tipo de mapa fsico, 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 habamos visto con anterioridad: G_NORMAL_MAP: es un mapa poltico, de pases, ciudades con sus calles, etc. G_SATELLITE_MAP: mapa de imgenes de satlite. G_HYBRID_MAP: Un mapa que superpone la vista de calles encima de la vista satlite.
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 fsico (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); API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 18
Definir los tipos de mapa del control de seleccin de tipos de mapa Ahora, para incluir otros tipos de mapas en el control de seleccin de tipo de mapa, debemos utilizar el mtodo addMapType() de la clase GMap2, indicando como parmetro 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 fsico 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 travs del mtodo removeMapType() de la clase GMap2, indicando un parmetro 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 fsico Para acabar voy a mostrar cmo crear un mapa de Google fsico, que adems tenga un control que permita cambiar entre los tipos de mapa poltico, satlite y fsico.
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 cdigo que podemos ver incluye llamadas a los mtodos: addMapType(G_PHYSICAL_MAP), para indicar que en el control de seleccin de tipo de mapa se debe incluir el mapa fsico. map.removeMapType(G_HYBRID_MAP), para eliminar del control de seleccin de tipos de mapas el mapa hbrido. El mtodo 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 fsico. Podemos ver el ejemplo en marcha en una pgina aparte. Puedes ver el cdigo fuente de la pgina para ver el cdigo del ejemplo completo. Artculo por Miguel Angel Alvarez
19
Controles en mapas de Google

Como ya debemos de saber, los mapas de Google se pueden integrar en la pgina de cualquier persona que desee, a travs de un API en Javascript. En este caso vamos a ver cmo 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 artculo viene a ampliar la informacin 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 captulos del mencionado manual. Tipos de controles de usuario Los controles de usuario de los mapas de Google (controls en ingls) son interfaces desde donde el usuario puede interaccionar con el mapa, para efectuar acciones como seran hacer zoom, seleccionar entre tipos de mapa (satlite, mapa, hbrido), o moverse por un mapa pequeo ms general. Todos estos controles estn ya creados y existen instrucciones y clases para incluirlos fcilmente en un mapa de Google. Aunque cualquier desarrollador podra 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 ms pequeo, que tambin aparece en la esquina superior izquierda. GSmallZoomControl: Un control de usuario muy pequeito, que aparece en la esquina superior izquierda que simplemente tiene un botn para ampliar el zoom y otro botn 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 satlite y mapa hbrido -calles y carreteras sobre el fondo de satlite) GOverviewMapControl: Con este control aparece un pequeo mapita en la esquina inferior derecha donde aparece una vista general con menos zoom del mapa actual, a travs del cual tambin podemos movernos.
Aadir controles a un mapa de Google Los controles de usuario para los mapas de Google que hemos visto se incluyen con una sencilla instruccin Javascript a la hora de crear el mapa. Como los controles ya estn predefinidos en el API de Google Maps, simplemente tenemos que asociarlos al mapa que estamos creando. Para ello se utiliza un mtodo 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 mtodo 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 mtodo addControl() de esta manera:
map.addControl(new GMapTypeControl()); Podemos incluir todos los controles que deseemos haciendo varias llamadas al mtodo addControl(), pasando como parmetro 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 habamos dicho, el desarrollador puede crear sus propios controles para incluirlos en sus mapas. Este es un tema que trataremos ms adelante, pero por ahora podemos referiros a la documentacin del API Google Maps para obtener ms informacin: http://www.google.com/apis/maps/documentation/controls.html Artculo por Miguel Angel Alvarez
Insertar una marca en un mapa de Google

Veamos rpidamente cmo insertar una marca en un mapa de Google, que nos sirve para sealar un punto preciso en un mapa. Es un paso muy sencillo pero importante en el manejo del API de Google Maps. Este artculo 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 artculos anteriores.
21
Para insertar marcas tenemos un mtodo, tambin de la clase GMap2, que sirve para insertar un elemento sobre el mapa. El mtodo en concreto se llama addOverlay() y recibe como parmetro la marca que se quiere insetar.
map.addOverlay(marker);
En el cdigo anterior el objeto map sera 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 slo 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 inters que se pueden personalizar en las marcas. Veamos el cdigo 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>
22
</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 parmetros, el primero obligado es el punto geogrfico 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 carctersticas cargadas del G_DEFAULT_ICON. En la siguiente lnea se modifica la imagen del icono, asignando un nuevo valor a su atributo image. Habra que hablar ms sobre la creacin y modificacin de iconos, porque es un tema que requiere mayor detenimiento para dominarlo, pero lo dejaremos para ms adelante. Artculo 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 parmetros para conseguir un icono con el formato deseado. No obstante, vamos a dar aqu un pequeo ejemplo de cmo crear un icono que podr servir para los interesados en cambiar la imagen por defecto del icono. Este artculo est englobado dentro del manual de Trabajo con el API de Google Maps. Adems, hay que decir que en este artculo 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 parmetros distintos. Las referencias completas de esta clase conviene leerlas en la propia documentacin del API de Google Maps. Pero nosotros vamos a explicar esos parmetros, al menos los necesarios para crear iconos con la imagen personalizada.
23
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 parmetros, pero el API nos permite crear iconos copiando las caractersticas 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 haba hecho antes. (Hablar sobre formatos de las imgenes de los iconos ms tarde en este artculo)
iconoMarca.image = "/images/bandera-roja.png";
A continuacin, a travs del atributo iconSize, debemos de definir el tamao de la imagen de este icono. Los tamaos 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 tamao 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 tamao de la imagen utilizada.
iconoMarca.shadow = "/images/sombra-bandera2.png"; var tamanoSombra = new GSize(22,18); iconoMarca.shadowSize = tamanoSombra;
Para acabar, slo nos queda por editar el atributo iconAnchor. Este sirve para reposicionar el lugar donde se colocan los iconos. Como se pueden hacer iconos con imgenes de distintos tamaos, 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 tamao de la imagen del icono por defecto (que habamos 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 geogrfico 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 habra que sealar: 1) URLs de las imgenes 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 imgenes los hemos creado como PNG de 24 bits con transparencia. Hemos elegido ese formato porque permite una transparencia para las imgenes. 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 ms habituales programas de edicin grfica, como Photoshop. De hecho, nosotros hemos utilizado Photoshop para hacer o retocar las imgenes utilizadas. 2) El enlace para ver el ejemplo: http://www.guiarte.com/mapas-google/desarrolloweb/ej_icono.php 3) El cdigo 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=ABQIAAAAUnJY3ChJhF0YgyTSDJuVfBTquzEVMasluaqfAe9FKyfKhfBExSs1s93Q7GOuBeSnaddg05sRmEGTs" 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) {
25
//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 = "Espaa"; 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>
26
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 tambin es un lenguaje de programacin orientado a eventos y el API de los mapas de Google est basado en Javascript. Pero hay que sealar 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 bsicos de Javascript. Adems, 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 adems se ejecutan dentro de un contexto y pasan distintos parmetros 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 geogrfico donde se hizo clic, si puls sobre cualquier rea vaca del mapa. Todos los eventos que soporta el API de Google Maps, para cada clase, estn 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 tendramos que crear el mapa, tal como lo hemos hecho en anteriores ocasiones, y aadirle 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 lnea que tenemos que ver ahora es la ltima, donde se aade el escuchador de eventos. GEvent es la clase a la que aadimos el event listener. Al aadir un evento para ser escuchado tenemos que proveer de tres parmetros: 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 funcin que se encargar de tratar el evento. En este caso se ha aadido 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 funcin tratamiento_clic (fjate que slo ponemos el nombre de la funcin, sin los parntesis). Ahora tenemos que codificar el comportamiento de nuestro mapa cuando se hace clic en l, es decir, codificar la funcin tratamiento_clic().
function tratamiento_clic(overlay,point){ alert ("Hola amigo! Veo que ests ah porque has hecho clic!"); alert ("El punto donde has hecho clic es: " + point.toString()); API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 27
Como vemos, la funcin recibe un par de parmetros, que son el contexto en el que se ha detectado el evento. Estos dos parmetros 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 geogrficas donde el usuario ha hecho clic.
El cdigo de la funcin 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 parmetro point que hemos recibido como contexto del evento, al que hemos pasado el mtodo toString() para que extraer su codificacin en cadena de caracteres. El ejemplo puede verse en marcha en una pgina aparte. Artculo por Miguel Angel Alvarez
Manejar un evento en un mapa de Google para reposicionar una marca

En el anterior captulo 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 posicin 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 cdigo 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 Espaa, tiene una marca tambin en Espaa. Ahora veamos el sencillo cdigo 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 funcin que recibe dos parmetros (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 vaca del mapa.
En la funcin empezamos con un if(point) que sirve para saber si hemos recibido un punto (Slo recibimos el punto si se ha pulsado sobre un rea vaca del mapa), porque slo entonces queremos recolocar la marca. Entonces llamamos al mtodo de la marca setPoint(point) para reposicionar la marca al punto recibido por parmetro. Es bien simple no? Podemos ver el ejemplo en marcha en este enlace. Para acabar, os dejo el cdigo 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>
29
Crear una marca y mostrar una ventana de informacin con sus coordenadas
En este artculo 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 informacin con las coordenadas donde se ha situado la marca. Es un ejemplo sencillo en el que veremos cmo tratar un evento clic sobre el mapa, la colocacin de una marca y posteriormente la presentacin de una ventana de informacin. Tambin 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 artculo accediendo a una pgina con ejemplo en funcionamiento. Esta nueva gua 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 artculo 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 todava no la mostremos en el mapa de Google, puesto que slo 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 habamos guardado antes.

var marker = new Gmarker(point);
Despus hay que aadir 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 informacin 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 lneas de este cdigo: marker.setPoint(point);
Con esto cambiamos la posicin de la marca.

map.addOverlay(marker);
Con esa otra lnea hacemos que la marca se muestre en el mapa (puesto que hasta ahora se haba creado la marca pero no se mostraba en ningn sitio) Por ltimo se incluye la siguiente linea dentro de la funcin 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, tambin aparezca una ventana de
informacin, con las coordenadas de la misma. Al construir el bocadillo con la informacin utilizamos los mtodos 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 cdigo 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 pgina aparte. Artculo por Gema Maria Molina Prados
Mostrar la posicin 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 pgina 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 geogrfico. 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 captulo, 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="posicin", 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 cdigo de creacin 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 lneas 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 cdigo 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);
32
} }
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 utilizndolo puede haber cambiado el zoom, para ampliar o reducir la definici. En este artculo vamos a aprender a obtener el zoom actual de un mapa cuando se produzca un evento, es decir, como respuesta a una accin de un usuario. Los eventos en mapas de Google ya los hemos tratado anteriormente en este manual, de hecho, este artculo va a ampliar otro que ya habamos realizado: Mostrar la posicin 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 pgina. En realidad saber el zoom en un mapa es simple, slo tenemos que utilizar el mtodo getZoom() de la clase GMap2. getZoom() devuelve un nmero entero, que es el zoom actual del mapa. Pongamos que tenemos el objeto mapa en una variable llamada "map". Pues entonces el mtodo lo ejecutaremos con esto:
zoom_actual = map.getZoom();
As habramos guardado en una variable zoom_actual el valor entero del zoom del mapa.
33
Si queremos mostrar en un formulario en la pgina 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 cdigo tendremos que leer el artculo anterior, as como posiblemente los precedentes de este manual que tratan sobre eventos. Bueno, adems 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 cdigo completo del ejercicio simplemente muestra el cdigo fuente de la pgina del ejemplo. Artculo por Miguel Angel Alvarez
Evento zoom en un mapa de Google

Estamos en el manual de creacin 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 artculo 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 aadir un escuchador de evento con el mtodo addListener de la clase GEvent. Este mtodo tiene que recibir el objeto sobre el que se escuchar el evento, el tipo de evento y la funcin que se ejecutar como respuesta al evento (el manejador de eventos). Para obtener ms explicaciones de este paso consultar el artculo donde se tratan los eventos de mapas de google en general. El manejador de evento zoomend, es decir, la funcin que se ejecuta cuando se produce el evento, recibe dos variables. Una es el antiguo zoom que tena 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 quisiramos crear un evento para que nos mostrase en una caja
34
de alerta las dos variables con el antiguo zoom y el nuevo, haramos 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 ms, 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 artculo: Averiguar el zoom en un mapa de Google Maps. Anteriormente ya hacamos 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 pgina. Como se puede ver, hay un formulario en la parte de abajo, que se actualiza cada vez que se resita la marca. Ahora vamos a actualizarlo tambin cuando el usuario cambia el zoom. Para ello tenemos que definir un escuchador del evento zoomend en el mapa. Realmente, slo hemos aadido estas lneas 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=nuevoZoom });
Podemos ver el ejemplo en marcha. Viendo su cdigo fuente podemos hacernos una idea del ejercicio completo. Pero recordamos que para entenderlo tenemos que seguir el artculo Averiguar el zoom en un mapa de Google Maps. Artculo por Miguel Angel Alvarez
Maquetar una pgina con un mapa de Google, usando CSS

La maquetacin 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 pgina web, no tenemos que especificar el tamao 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 dinmico, es decir, si cambia el espacio disponible de la capa donde est el mapa -ya sea porque el usuario ha cambiado el tamao de la ventana o porque se han alterando los atributos width y height de la capa con Javascript o por cualquier modo- cambiar automticamente el tamao del mapa para ajustarse dinmicamente al espacio disponible. Dicho esto, puede resultar poco revelador este artculo, porque no vamos a ver nada de Javascript ni de creacin 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.
35
En DesarrolloWeb.com ofrecemos un manual en el que puedes aprender a trabajar con el API de Google Maps. Tambin recomiendo la lectura del material que ofrecemos en DesarrolloWeb.com sobre la maquetacin CSS, pues voy a dar por sabidos los aspectos sobre maquetacin 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 ms 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 pxel de ancho y 388 de alto. Esto no tiene ningn 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 tamaos, dependiendo de la definicin 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 declaracin de estilos css de la capa donde est el mapa.
<div id="map" style="width: 100%; height: 388px"></div>
Este mapa ocupara 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 adems todo el alto disponible en el navegador, que tambin, sabemos, puede ser variable dependiendo de las caractersticas de pantalla o del estado de la ventana del browser. Lo normal es que probsemos 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 vaco 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 tambin deberan tener el height de 100%. Entonces nos debera funcionar y el mapa ocupara todo el alto y ancho de la ventana.
Referencia: Podemos ver una FAQ con explicaciones sobre utilizacin del height:100% en CSS.
Ahora veamos el ejemplo de un mapa de Google Maps que ocupa todo el ancho y alto del espacio en una pgina aparte. Maquetar un mapa de Google con width y height 100%, pero mezclado con otros elementos
36
Para acabar veamos un ejemplo de maquetacin 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 maquetacin. Para explicarlo lo ms sencillo es ver directamente el ejemplo en una pgina aparte. El ejercicio es simple, pero necesitaremos conocimientos de CSS sobre maquetacin y posicionamiento. El cdigo 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 fcil maquetar con un mapa de Google en una capa que toma el tamao del contendor donde se encuentra. </div> </div> <div id="map" style="height: 100%; margin-right:210px;"></div> </div> </body> </html>
37
Dibujar lneas en mapas de Google

Seguimos estudiando la creacin de mapas de Google con el API de Google Maps, en esta ocasin para mostrar el proceso de creacin de lneas sobre mapas de Google. Las lneas se dibujan encima de los mapas y se muestran con una pequea transparencia, para que se pueda ver lo que hay debajo de ellas. Dibujar lneas o polgonos es un modo muy interesante de marcar elementos o caminos en el mapa y resulta muy sencillo. Slo necesitamos conocer previamente unos cuantos conceptos sobre la creacin de mapas, que ya vimos en artculos anteriores, en el manual: Manual del API de Google Maps. Para ilustrar este ejemplo, vamos a crear una lnea en un mapa de Google que va de Madrid a Barcelona. Podemos ver el ejemplo en marcha en una pgina aparte. Clase GPolyline Esta clase sirve para dibujar lneas o polgonos en un mapa. Intenta hacer el trabajo utilizando las caractersticas de dibujo con vectores de los navegadores y si no es posible superpone una imagen al mapa. Para construir un polgono se necesitan varios parmetros: Array con los vrtices de las lneas, que se indica con los distintos puntos El color de las lneas, que es un RGB en hexadecimal, como los que utilizamos para definir colores en HTML, comenzando por #. Ej: #ff8800. El ancho de las lneas, en pixels. La opacidad con un valor que va de cero a uno. Otras opciones.
El nico parmetro que necesitamos indicar de manera obligada son los puntos de las lneas, los otros parmetros son opcionales. Para indicar los puntos de los vrtices, se utiliza la clase GLatLng, que sirve para crear objetos que tienen las dos coordenadas geogrficas latitud y longitud. Por ejemplo, para definir los puntos donde estn 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 lnea 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 lnea con dos puntos, con color #0000dd que es un azul, con 6 pixels de ancho y 0.4 de opacidad. Pintar la lnea en el mapa con addOverlay Para que esta lnea quede dibujada en el mapa se utiliza el mtodo de GMap2 llamado addOverlay() al que le pasamos por parmetro el polyline que habamos construido.
38
map.addOverlay(polyline);
Todo el cdigo Este es el cdigo completo para la configuracin 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 cdigo completo del mapa accediendo al ejemplo y utilizando la funcionalidad del navegador de "Ver cdigo fuente". Ejemplo completo en marcha en http://www.guiarte.com/mapasgoogle/desarrolloweb/linea.php Artculo por Miguel Angel Alvarez
Polgonos con lneas geodsicas en mapas de Google

Continuamos la explicacin del artculo anterior sobre mapas de Google y polgonos. Anteriormente vimos cmo crear una lnea recta en un mapa de Google entre dos puntos dados. Ahora vamos a ver cmo crear un polgono con varios puntos y lneas geodsicas. Primero habr que explicar qu son lneas geodsicas. Como sabemos, la tierra es esfrica 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 lnea recta, sino realizando esa forma de la curvatura de la tierra. Esto es porque la distancia ms corta entre dos puntos de la tierra se representara con una curva geodsica. Para decirle al API de mapas de Google que trace lneas geodsicas sobre el mapa tenemos que especificarlo a la hora de instanciar el polgono. Para ello primero tenemos que definir una opcin adicional al polgono:
var opciones_poligono = {geodesic:true};
Ahora esas opciones las pasamos como ltimo parmetro en el constructor del objeto de la clase GPolyline. Imaginemos que queremos construir un polgono que hace esta ruta: Madrid, Mosc, Estambul, Roma, Tnez y Madrid. Primero crearamos los puntos de esas ciudades:
var var var var var
madrid = new GLatLng(40.4165020, -3.702564); moscu = new GLatLng(55.7522222, 37.6155556); estambul = new GLatLng(41.0186111, 28.9647222); roma = new GLatLng(41.9, 12.4833333); tunez = new GLatLng(36.8027778, 10.1797222);
Y luego instanciaramos el polgono, indicando que queremos lneas geodsicas, 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 polgono en el mapa con el mtodo addOverlay().
map.addOverlay(poligono);
Podemos ver un ejemplo que hace este mapa con el polgono con lneas geodsicas. Artculo por Miguel Angel Alvarez
Polgonos 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 lneas. Ahora le toca el turno a los polgonos. Los polgonos en mapas de Google se colocan de manera similar a como se hacen las lneas, indicando los puntos o vrtices, con sus correspondientes coordenadas de latitud y longitud. En el caso de los polgonos, 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 polgono. La parte novedosa con respecto a las lneas es que en los polgonos se puede indicar no slo el color del borde, sino tambin el color del relleno con el que queremos pintar la parte interna del polgono. La clase GPolygon es la encargada de dar soporte a la implementacin de polgonos en los mapas. Para crear un polgono tenemos que utilizar el constructor de la clase GPolygon, que recibe una serie de parmetros para la configuracin del mismo. La instanciacin de un polgono se realiza de la siguiente manera:
var objeto_poligono = new GPolygon([punto1, punto2, , punto1], color_borde, tamao_borde, opacidad_borde, color_relleno, opacidad_relleno);
Voy a listar y explicar los parmetros del constructor de GPolygon para que queden claros: Puntos de los vrtices: Como se puede ver, puede generarse un polgono con un nmero indeterminado de vrtices. Lo nico es que el recorrido de vrtices 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 polgono. Todos los puntos o vrtices 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. Tamao del borde: Un nmero entero, que es el nmero de pxeles del borde.
40
Opacidad del borde: Un nmero entre 0 y 1. Cuanto ms bajo, ms transparente y cuanto ms alto ms opaco. Color_relleno: Un valor de tipo cadena con el color RGB en hexadecimal. Opacidad del relleno: Tambin un valor entre 0 y 1, igual que la opacidad del borde. Para dar la orden a un mapa de Google que dibuje un polgono generado se utiliza el mtodo addOverlay() del objeto mapa, de la clase GMap2, de manera similar a como hicimos al dibujar lneas:
map.addOverlay(objeto_poligono);
Ejemplo de creacin de un polgono en un mapa de Google Maps Ahora veamos un ejemplo de creacin de un polgono. En este caso hemos realizado uno cuyos lados se superponen a la muralla de vila y cuyo interior sera la ciudad amurallada. Primero hemos tenido que obtener y generar los puntos (latitud y longitud, con la clase GLatLng) de los vrtices de la muralla:
var var var var var var muralla1 muralla2 muralla3 muralla4 muralla5 muralla6 = = = = = = new new new new new new GLatLng(40.65627360348711, -4.707534313201904); GLatLng(40.65884555247438, -4.706525802612305); GLatLng(40.658715329592404, -4.70139741897583); GLatLng(40.658259547503505, -4.697213172912598); GLatLng(40.656680564044166, -4.696569442749023); GLatLng(40.65399457849209, -4.697320461273193);
Luego creamos el polgono 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 polgono sobre los vrtices sacados de la muralla de vila, con color de borde #669933, tamao de borde 5 pxel, opacidad del borde 0.7 (tirando a opaco), con color del relleno #996633 y opacidad del relleno 0.4 (tirando ms a transparente). Por ltimo, mostraramos el polgono con addOverlay().
map.addOverlay(polygon);
Podemos ver el ejemplo en marcha en: http://www.guiarte.com/mapas-google/desarrolloweb/ poligonos.php Recomendamos ver el cdigo fuente de este ejemplo Abre el ejemplo y utiliza el men "Ver Cdigo fuente", para ver el cdigo completo de la creacin del mapa de Google con el polgono. Artculo por Miguel Angel Alvarez
Eventos y polgonos en Google Maps

Para desarrollar alguna funcionalidad adicional de los polgonos en los mapas de Google vamos a programar un aadido al script que crea un polgono, que vimos en el artculo anterior, para ocultar y mostrar el polgono por respuesta a un evento de usuario. Esta funcionalidad de mostrar y ocultar polgonos es comn 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 polgono en un mapa de Google. Al pulsar la marca se ocultar el polgono y al volverla a pulsar se mostrar de nuevo, y as sucesivamente.
41
Podemos ver el ejemplo en marcha para entender bien el objetivo de este taller de Google Maps. Como hemos dicho, en el artculo anterior vimos como colocar un polgono en un mapa de Google. La nica diferencia con este caso es que hemos definido la variable donde vamos a colocar el objeto polgono, de la clase GPolygon, como global a toda la pgina. 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 funcin, mira el cdigo fuente del ejercicio terminado para ver cmo hacerlo.) Hemos creado tambin, como decamos, 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 funcin que se encargue de mostrar u ocultar el polgono. Con el API de Google Maps se define un evento de la siguiente manera:
GEvent.addListener(marca, "click", ocultar_mostrar_poligono);
Esto aade el escuchador de evento "click" asociado al objeto contenido en la variable marca. Cuando y cuando se detecte el evento se ejecuta la funcin ocultar_mostrar_poligono(). Por decirlo de otra manera, hemos definido un evento click sobre una marca, para ejecutar la funcin ocultar_mostrar_poligono() cuando se produzca. Nos quedara ver el cdigo de la funcin que muestra u oculta el polgono. Esta funcin hace uso de la variable global donde hemos almacenado el objeto polgono, para acceder a los mtodos 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 mtodo isHidden(), con polygon.isHidden(), que devuelve true en caso que est oculto y false en caso que est mostrndose. En caso de estar oculto, llamamos al mtodo que lo muestra, con polygon.show(). En caso que estuviera visualmente activo, llamamos al mtodo para ocultarlo, con polygon.hide(). Y no hay ms 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 cdigo fuente para obtener ms informacin. Artculo por Miguel Angel Alvarez
42
Superponer una imagen en un mapa de Google

En este artculo 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 informacin grfica del lugar que se est visualizando, o aadir elementos para llamar la atencin del usuario. La tarea es muy simple, pues slo necesitamos definir el lugar donde se tiene que pegar la imagen que deseamos mostrar y la URL donde se localiza el archivo grfico a superponer. La imagen que coloquemos siempre aparecer sobre el propio fondo, tapando lo que haya debajo Las imgenes que se superponen se crean a travs de la clase GGroundOverlay, cuyo constructor recibe una URL o camino relativo de la imagen y los lmites del mapa donde colocarla.
var imagen = new GGroundOverlay("archivo-grafico.jpg", limites_imagen);
Los lmites de la imagen son a su vez otra clase, llamada GLatLngBounds, que es como un rectngulo formado por dos puntos geogrficos, 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 lmites 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 mtodo del mapa addOverlay(), que habamos utilizado anteriormente para superponer elementos en mapas de google como los polgonos.
map.addOverlay(imagen);
Vemos el cdigo 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()); API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin. 43
map.addControl(new GMapTypeControl()); //creo los puntos de los lmites de la imagen var x1 = new GLatLng(40.489259,-3.877358); var x2 = new GLatLng(40.4923928,-3.8675308); //defino los lmites 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 lmites 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 pgina aparte. Artculo por Miguel Angel Alvarez
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 travs del API de Google Maps podemos, de una manera muy rpida, sobreponer una capa con las fotos de la base de datos de Panoramio. En este artculo veremos cmo incluir dichas fotos para enriquecer nuestros mapas con contenido actualizado y de utilidad. Este artculo es muy sencillo, al menos as les parecer a todos los que hayan seguido el Manual de programacin del API de los Mapas de Google que venimos publicando en DesarrolloWeb.com. Slo vamos a utilizar una nueva clase que no habamos visto hasta ahora que es la clase Glayer. Esta clase GLayer sirve para superponer capas con informacin geogrfica de otros sitios web. En este caso utilizaremos el sitio web de Panoramio para incluir las fotos dadas de alta, pero tambin se puede utilizar GLayer para incluir informacin 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 parmetro el identificador de la capa que queremos mostrar. Los identificadores posibles estn en el documento ese al que haca referencia. Luego, para hacer que el layer se muestre en un mapa de Google utilizamos un mtodo, 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 cdigo completo para crear un mapa de Google con las fotos de Panoramio sera 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 pgina aparte. Artculo por Miguel Angel Alvarez
Incluir referencias a la Wikipedia en mapas de Google

En este artculo vamos a mostrar cmo 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 programacin de Google Maps. La verdad es que los chicos de Google nos han puesto muy fcil la integracin de la Wikipedia con los mapas de Google y es de agradecer. El proceso para conseguirlo es muy similar -casi idntico- al utilizado para incluir las fotos de Panoramio, tratado anteriormente en DesarrolloWeb.com. Por eso, recomendamos leer previamente el artculo Incluir fotos de Panoramio en un mapa de Google, ya que hay cosas en este artculo que vamos a dar por sabidas, por haber sido explicadas en el artculo mencionado. Para que se vea qu son las referencias de la Wikipedia y cmo se integran con los mapas de Google podemos acceder al ejemploque vamos a tratar en este artculo. As pues, pasamos a la accin. 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 integracin 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 espaol, por lo que tenemos que utilizar el identificador de capa org.wikipedia.es.
45
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 artculo 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 lnea se crea una nueva capa, como un objeto de la clase Glayer, pasando como parmetro al constructor la referencia id de la capa que queremos mostrar, "org.wikipedia.es".
map.addOverlay(capa_wikipedia);
As aadimos al mapa de Google la capa que acabamos de crear. Eso es todo, ahora podemos aadir contenidos de inters a nuestro mapa, que explican los puntos geogrficos de los lugares que se han destacado en la Wikipedia. Es tan fcil la integracin con la Wikipedia que, despus de ledo este artculo de desarrollo web .com, tardars menos de un minuto en utilizarla en tus mapas. Adems est disponible para todos los idiomas ms usados en el mundo. El ejemplo realizado para ilustrar esta funcionalidad se puede ver en este enlace. Artculo por Miguel Angel Alvarez
Colorear pases en mapas de Google

En este artculo vamos a conocer una manera de colorear pases en Google Maps. No es la nica pero quizs s sea la ms sencilla de conseguirlo. Para ello vamos a utilizar la clase GPolygon, del API de Google Maps, que nos permite dibujar un polgono dadas una serie de coordenadas. Los polgonos contienen una lnea de contorno y adems se les puede aplicar color de relleno. As pues, los utilizaremos para rellenar de color la superficie de los pases y pintar una lnea que rodea la silueta del pas. En el Manual de Mapas de Google, que venimos publicando en DesarrolloWeb.com, ya explicamos cmo crear y mostrar polgonos en los mapas, con lo que ya deberamos dominar los conocimientos necesarios para seguir este ejemplo. Antes de continuar, tal vez te interese ver el efecto de coloreado sobre diferentes pases que vamos a explicar en este artculo.
La parte ms laboriosa para la realizacin de los polgonos de cada pas consiste en sacar todos los puntos geogrficos (latitud, longitud) que necesitaramos para crear su contorno. Esto representa un gran trabajo, porque tendramos que ir, pas por pas, apuntando los puntos de la silueta en arrays, y adems, cuanto ms detallistas queramos ser, ms puntos tenemos que extraer. Afortunadamente, otras personas ya se han tomado por nosotros la molestia de sacar cada uno de los puntos geogrficos de las siluetas de los pases y adems, 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 lneas de puntos, en una estructura de datos tipo array de coordenadas GLatLng, que se puede utilizar directamente para la creacin de los polgonos 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 bsicamente en un archivo con cdigo Javascript donde se declaran una serie de arrays con puntos geogrficos, basados en latitudes y longitudes, para generar las siluetas de cada pas. Con esos puntos se pueden trazar los polgonos para dibujar los pases. Aunque en un principio podra parecer suficiente un polgono para cada pas, hay que sealar que muchos de ellos contienen islas o territorios separados del principal, que deben especificarse en polgonos distintos. As que en CountryPoints tenemos, para cada pas, una o ms sucesiones de puntos para formar uno o ms polgonos sobre la superficie. Para ilustrar la forma de este archivo de puntos, vendr bien mostrar aqu un extracto de los puntos de varios pases:
//primero se declara un objeto var country = {}; //luego se definen propiedades con las coordenadas para cada pas //se utilizan cdigos de dos letras para cada pas 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 pases para mostrar la sintaxis de declaracin de puntos de sus siluetas, aunque a Portugal le he quitado muchos puntos para que quepa bien en el texto de este artculo de desarrolloweb .com. Observemos que los puntos se guardan en una propiedad llamada "coord", que es un array de dos dimensiones. En la primera dimensin tiene cada uno de los polgonos para cada uno de los territorios separados del pas. En la segunda dimensin tiene cada uno de los puntos para hacer el polgono, definidos con objetos GLatLng. As pues, para crear los polgonos de un pas, por ejemplo Portugal, tendremos que hacer algo como esto: 1) Incluir el array con los puntos de los pases.
47
Para ello tendremos que incluir un cdigo 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 cdigos de pases de dos letras son por ejemplo PT para portugal, ES para Espaa y BR para Brasil... Estos cdigos estn normalizados segn normativa ISO 3166-1. 3) Recorrer las coordenadas para crear los polgonos Con un bucle recorro los grupos de coordenadas para crear cada uno de los polgonos. (Porque debemos recordar que el array de coordenadas era de dos dimensiones, para cada uno de los territorios separados del pas)
for (i=0; i<coordenadas_portugal.length; i++){ map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4)); }
Cdigo completo para colorear pases A continuacin pongo un cdigo completo a utilizar para colorear varios pases 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 polgonos de Espaa 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 polgonos 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 polgonos 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 polgonos de Marruecos var coordenadas_marruecos = country.MA.coord;
48
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 pgina aparte. Esperamos que se haya podido entender el proceso para pintar pases. En el propio blog del creador de CountryPoints hay otras explicaciones sobre la utilizacin de este sistema, que es de donde me he guiado para hacer el ejemplo que vamos a publicar en DesarrolloWeb.com. Colorear pases puede venir muy bien para darle un poco de vida y mejor aspecto a nuestras aplicaciones, pero adems 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 geogrficos, como provincias de un pas, ciudades, barrios, etc. Artculo por Miguel Angel Alvarez
49

Manual Del API de Google Maps

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Del API de Google Maps

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Manual del API de Google Maps

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Incluir un Mapa de Google en tu web en 5 minutos

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tendremos que darle el nombre y descripcin del mapa.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Ver mapa ms grande Artculo por Miguel Angel Alvarez

Crear mapas de Google con el asistente de Google Maps

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Lo bsico para empezar a desarrollar con Google Maps I

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Javier Chaure

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Lo bsico para empezar a desarrollar con Google Maps II

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Javier Chaure

Mapas de Google API 2

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tipos de mapa en Google Maps

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Ahora, si deseamos un mapa hbrido, slo tendremos que cambiar la lnea:

Por esta otra lnea, donde especificamos otro tipo de mapa:

Artculo por Miguel Angel Alvarez

Control para cambiar el tipo de mapa de Google

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Miguel Angel Alvarez

Incluir un mapa de tipo fsico

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Controles en mapas de Google

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Insertar una marca en un mapa de Google

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Personalizar iconos en los mapas de google

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

En el constructor de la clase GMarker indicamos el punto donde se debe colocar la marca y el

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Miguel Angel Alvarez

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Eventos en mapas de Google

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Manejar un evento en un mapa de Google para reposicionar una marca

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Artculo por Miguel Angel Alvarez

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Luego creamos la marca en el punto que habamos guardado antes.

Con esto cambiamos la posicin de la marca.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Mostrar la posicin de una marca de Google Maps en un formulario

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

GEvent.addListener(map, "click", function (overlay,point){ if (point){ marker.setPoint(point); document.posicion.x.value=point.x document.posicion.y.value=point.y } });

Artculo por Miguel Angel Alvarez

Averiguar el zoom en un mapa de Google Maps