Professional Documents
Culture Documents
com
Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Miguel Angel Alvarez Javier Chaure
Director de DesarrolloWeb.com http://www.desarrolloweb.com (20 captulos) Desarrollador freelance http://www.xski.net/ (2 captulos)
Manual del API de Google: 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.
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.
Manual del API de Google: 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.
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.
Manual del API de Google: 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.
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.
Manual del API de Google: 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.
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.
Manual del API de Google: 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
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>
Manual del API de Google: 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.
</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:
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.
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.
Manual del API de Google: 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. 8
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.
Lo primero que necesitamos son las coordenadas de los nuevos puntos, en este caso la Plaza
Manual del API de Google: 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.
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); 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"/>
Manual del API de Google: 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.
10
<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 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
Manual del API de Google: 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.
11
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. 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.
Manual del API de Google: 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
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")); //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>
Manual del API de Google: 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.
13
</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
Manual del API de Google: 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
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"
Manual del API de Google: 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.
15
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
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);
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> <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());
Manual del API de Google: 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.
16
map.setMapType(G_SATELLITE_MAP); } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px; height: 400px"></div> </body> </html> }
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);
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);
Manual del API de Google: 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
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
Manual del API de Google: 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
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:
Manual del API de Google: 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.
19
<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
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.
Manual del API de Google: 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. 20
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> </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.
Manual del API de Google: 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. 21
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
Manual del API de Google: 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.
22
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
Manual del API de Google: 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. 23
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) { //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"; Manual del API de Google: 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. 24
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>
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()); }
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.
Manual del API de Google: 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.
26
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
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.
Manual del API de Google: 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
window.onload=load //]]> </script> </head> <body> <div id="map" style="width: 765px; height: 388px"></div> </body> </html>
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); GEvent.addListener(map, "click", function (overlay,point){ if (point){ marker.setPoint(point); document.posicion.x.value=point.x document.posicion.y.value=point.y }
Manual del API de Google: 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.
29
}); } }
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>
As habramos guardado en una variable zoom_actual el valor entero del zoom del mapa. 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); Manual del API de Google: 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. 30
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
Manual del API de Google: 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.
31
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
Manual del API de Google: 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.
32
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 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.
Manual del API de Google: 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.
33
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>
Manual del API de Google: 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.
34
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.
map.addOverlay(polyline);
Todo el cdigo Este es el cdigo completo para la configuracin del mapa del ejemplo:
Manual del API de Google: 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. 35
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
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 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);
Manual del API de Google: 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.
36
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
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. 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.
Manual del API de Google: 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.
37
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);
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
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
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.
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()); 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);
Manual del API de Google: 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.
40
//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
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
Manual del API de Google: 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. 41
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
Manual del API de Google: 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.
42