Manual Apis Googles

5/7/2018 Manual Apis Googles - slidepdf.com

http://slidepdf.com/reader/full/manual-apis-googles 1/42

Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

Manual del API de

Google Maps

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:Miguel Angel AlvarezDirector de DesarrolloWeb.comhttp://www.desarrolloweb.com (20 capítulos)

Javier ChaureDesarrollador freelancehttp://www.xski.net/ (2 capítulos)

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 autorización.

1

http://www.desarrolloweb.com/



http://www.xski.net/

http://www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html


http://www.xski.net/






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 tratasobre el desarrollo de aplicaciones utilizando los mapas de Google, enfocado paraprogramadores que quieran aprovechar la potencia de Google Maps en sus desarrollos. Pero eneste artículo voy a explicar una manera mucho más sencilla de incluir un mapa de Google enuna página web, apta para todo tipo de personas, programadores o no, y que te llevará sólounos minutos para integrar un mapa personalizado en cualquier web.

Quería aclarar antes que con el API de Google Maps podemos hacer todo tipo de aplicacionespara mostrar mapas de cualquier parte del mundo. Por ejemplo, imaginar que estamoshaciendo una página de una inmobiliaria y queremos localizar cada una de las casas en venta,además de mostrar fotos y cualquier otro contenido de los inmuebles en el propio mapa. Paraesto necesitaremos forzosamente trabajar con el API, que hemos explicado ya enDesarrolloWeb.com y combinar la base de datos de propiedades de la inmobiliaria, con la

interfaz de mapas de Google Maps.Pero imaginar un caso mucho más sencillo. Tenéis un cliente al que le estáis creando el sitioweb y quiere que tenga un mapa de Google con la localización de sus oficinas y la forma dellegar a ellas. Para hacer este único mapa no es necesario utilizar el API de Google Maps, sinosería suficiente crear un único mapa estático e incrustarlo en la página del cliente. Esto sepuede hacer fácilmente desde la propia página http://maps.google.com/ y no necesita ningúnconocimiento de programación.

Voy a dar una receta por pasos:

1) Entrar en http://maps.google.com/

2) Pulsar sobre el enlace “Mis Mapas”

3) Ahora pulsar sobre “Crear Mapa nuevo”

4) Nos pedirá que nos autentiquemos con nuestra cuenta Google. Una cuenta vale para todoslos servicios de Google, incluido el de mapas.

5) Entonces podemos empezar a crear nuestro mapa.


2



http://maps.google.com/











Tendremos que darle el nombre y descripción del mapa.

Además, a la derecha tenéis el mapa que se va a crear. En este momento están disponibles lasopciones para edición del mapa y creación de marcas, líneas, etc. Podréis ver en la esquinasuperior derecha del mapa una serie de iconos con los que podréis colocar los distintoselementos sobre el mapa.

Experimentar con cada tipo de dibujo que se puede colocar. Además, luego podemospersonalizar cualquier cosa, como cambiar el color a las líneas o formas, o poner varios tiposde marcas sobre el mapa. Al crear cualquier elemento o señal sobre el mapa, nos abre unapequeña ventana para colocar las propiedades de este elemento.


3








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 paraacceder a otras propiedades de la marca, como la forma, el color, etc. Cuando tengamos todo,podemos pulsar el botón de Aceptar.

6) Cuando esté el mapa creado, podemos dar al botón de Guardar y luego al botón marcadocomo “Listo”, que aparecen a la izquierda.

7) Obtener el código para incluir el mapa en cualquier web.

Este paso tiene varias maneras de hacerse, todas a través del enlace que pone “Enlazar”,situado a la derecha. La opción más versátil es incluir el mapa con un IFRAME, pero debemospersonalizar el mapa antes, para que el IFRAME sea exactamente como nosotros queremos.

Primero, como decía, pulsamos sobre “Enlazar” y luego pulsamos sobre “Personalizar y obtenervista previa del mapa que se va a insertar”.


4








Entonces se abrirá una ventana aparte donde dar las propiedades del mapa que vamos a crear

para nuestra página web.

En esta página tenemos que indicar: 1) El tamaño del mapa, 2) centrar el mapa donde loqueremos y ponerle el zoom deseado y 3) copiar el código que nos dan.

8) Pegar el código del mapa en nuestra página web

Pues ya está! Una vez pegado el mapa de Google aparecerá tal cual lo hemos personalizado enla página web que deseemos.

Yo he pegado a continuación este mapa de Google de prueba, para que se pueda ver en esteartículo de DesarrolloWeb.com.


5








Eso es todo. Podemos haber tardado un poco más para aprender a crear el mapa, pero unavez sepamos, nos llevará menos de 5 minutos incorporar un mapa de Google en una páginaweb.

Object1

Ver mapa más grande

Artículo por Miguel Angel Alvarez

Lo básico para empezar a desarrollar con Google Maps I

Uno de los últimos servicios del gigante Google que más ha dado que hablar es Google Maps.En un navegador, y a golpe de clic el usuario puede darse una vuelta virtual por el mundo,disfrutando de fotos aéreas de gran calidad en algunas zonas, y del mapeado vectorialcompleto de otras. Pero lo interesante del servicio es que Google ofrece una API (ApplicationProgramming Interface) para todos aquellos interesados en usar este servicio e integrarlo ensu propia página, de forma simple y gratuita. A lo largo de este artículo veremos losfundamentos para integrar Google Maps en nuestro website y a través de un ejemplocrearemos un primer mapa usando las funcionalidades más básicas de la API.

La característica que sin duda más llama la atención del funcionamiento de Google Maps es suinteractividad. Podemos pinchar una y otra vez en el mapa para movernos por el mundo, hacerzoom y elegir el tipo del mapa sin necesidad de recargar la página, todo ello de forma fácil eintuitiva. Este tipo de aplicación web se encuadra dentro de la tecnología que Adaptive Path hadado por denominar AJAX (Asynchronous Javascript + XML). No vamos a profundizar en esteartículo en el planteamiento AJAX, sin embargo es conveniente hacer una breve reseña paraconocer a grandes rasgos su funcionamiento.

AJAX no es una nueva tecnología, sino una combinación de tecnologías ya existentes para


6


http://maps.google.com/maps/ms?ie=UTF8&hl=es&msa=0&msid=114181991181516154927.000455df9d7be30832e20&ll=40.420913,-3.696256&spn=0.005718,0.00912&z=16&source=embed


http://maps.google.com/maps/ms?ie=UTF8&hl=es&msa=0&msid=114181991181516154927.000455df9d7be30832e20&ll=40.420913,-3.696256&spn=0.005718,0.00912&z=16&source=embed






ofrecer una nueva visión a la hora de crear aplicaciones web. Siguiendo un planteamientoAJAX, usaremos CSS y DHTML para la presentación de los datos, el DOM (Document ObjectModel) para tratar dinámicamente la presentación de estos datos, XML y XSLT para el correcto

intercambio y manipulación de la información, XMLHttpRequest para obtener la información demanera asíncrona (cuando nos lo pida el usuario) y Javascript para coordinar a todos estosagentes a nuestro gusto dependiendo de nuestras necesidades. De este modo, tenemos un"motor" javascript entre la presentación y el servidor, que nos hará peticiones de informaciónde forma asíncrona para incorporarla inmediatamente a la presentación de nuestra página, sinnecesidad de recargarla y hacer una nueva petición de página completa al servidor.

A grandes rasgos esta es la filosofía de funcionamiento de AJAX, un planteamiento que sinduda ofrece grandes posibilidades, como las que podemos ver en práctica con Google Maps.Podemos ver otros ejemplos de aplicaciones AJAX en Google Suggest y Gmail.

Como vimos anteriormente en la introducción de este artículo, Google nos permite usar Google

Maps en nuestra página web de forma gratuita. A continuación veremos cómo hemos deproceder para realizar nuestro primer mapa, viendo los fundamentos de la API que Google nosofrece.

Los requisitos para empezar a trabajar son realmente escasos. Con un simple editor de html yun servidor público podemos empezar a crear mapas en nuestro dominio. Es importantereseñar que el servidor donde alojemos nuestros scripts para Google Maps ha de ser público,entre otras razones porque Google monitorizará el uso que hagamos del mapa, de acuerdo consus términos y condiciones de uso.

El primer paso para empezar a usar Google Maps es obtener una clave (key) que se nosconcede cuando nos damos de alta en el servicio. Esta clave es única para cada usuario deGoogle Maps y es restrictiva en lo que se refiere a su uso, ya que sólo nos permite usar losscripts 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/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=UTF-8"/>

<title>Introducción a Google Maps - Desarrolloweb</title>

<script src="http://maps.google.com/maps?file=api&v=1&key=AÑADE_TU_CLAVE_AQUÍ"

type="text/javascript"></script></head>

<body><div id="map" style="width: 400px; height: 300px"></div><script type="text/javascript">

var map = new GMap(document.getElementById("map"));map.setMapType(G_SATELLITE_TYPE);

map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl());

map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);

</script>


7


http://www.google.com/apis/maps/terms.html

http://www.google.com/apis/maps/signup.html


http://www.google.com/apis/maps/terms.html







</body></html>

Ejecutando este código en un servidor público obtenemos como resultado el siguiente mapa,que nos muestra una vista aérea de Madrid centrada en la Puerta de Alcalá:

Como se puede ver en el código, hemos creado una única capa con id="map" destinada acontener nuestro Google Map. El script que viene a continuación de la declaración de esta capaes el que genera el mapa. Veamos sentencia a sentencia qué hace el código:

• var map = new GMap(document.getElementById("map"));

Esta sentencia genera el mapa especificando como destino el id="map" que hemosasignado previamente para nuestra capa contenedora. Nótese que el mapa se adaptaráal tamaño que hayamos especificado para esta capa.

• map.setMapType(G_SATELLITE_TYPE);

setMapType nos permite especificar el tipo de mapa que queremos visualizar. Comopuede verse en los selectores situados arriba a la derecha en el mapa, podemos elegir

entre las vistas "Map" (mapa vectorial), "Satellite" (fotografía de satélite) y "Hybrid"(combina ambas vistas). En nuestro caso, ya que Google todavía no dispone de mapasvectoriales para España, hemos elegido la vista de satelite que nos muestra lafotografía aérea de la zona.

• map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl());

addControl nos permite incorporar elementos de control al mapa, tal y como son elcontrol de zoom que vemos a la izquierda y el selector de tipo de mapa. Dependiendode nuestras necesidades podemos incorporar estos controles, o incluso versiones demenor tamaño (GSmallMapControl) para mapas en tamaño reducido. Por defecto elmapa se muestra sin controles.


8








• map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);

Con esta sentencia indicamos a nuestro GMap qué lugar queremos que muestre,

mediante el método centerAndZoom. Los parámetros son un GPoint (que generamos acontinuación a partir de su latitud y longitud) y el nivel de zoom que queremos mostrar,de 1 a 16, siendo el nivel 1 el más cercano y el 16 el más alejado.

Google Maps ubica los puntos en los mapas a partir de su latitud y longitud. Estainformación debemos suministrarla nosotros, y para ello lo más adecuado es usaralguno de los servicios de geocoding disponibles en la red. Uno de ellos es por ejemploel de InfoSports, en el que con simplemente pulsar en cualquier punto del mapaobtendremos la latitud y longitud deseadas para ese punto. Existen otros servicios degeocoding disponibles de forma gratuita en la red que no exigen buscar el punto físicoen el mapa, tales como Geocoder.us y geonames.org, en los que podemos realizarbúsquedas a partir del nombre de la ubicación que buscamos.

Nota: El artículo continua en Desarrollar con Google Maps II. Pero atención, que estos ejemplos de Mapasde Google están explicados para el API 1 de Google Maps. Pero si queremos ver explicacionesactualizadas, siguiendo el API 2 de Google Maps, podemos consultar el artículo: Mapas de Google API 2.

Artículo por Javier Chaure

Lo básico para empezar a desarrollar con Google Maps II

Como se puede ver en el artículo anterior sobre la creación de mapas de Google, crear unmapa y centrarlo en un punto es realmente simple. Sofistiquemos un poco nuestro mapa

añadiéndole unos marcadores, de tal forma que podamos ubicar determinados puntos deinterés en el mapa. El mapa con nuestros puntos de interés añadidos nos quedará de lasiguiente manera:

Lo primero que necesitamos son las coordenadas de los nuevos puntos, en este caso la Plaza


9


http://www.infosports.com/m/map.htm

http://www.desarrolloweb.com/articulos/2441.php

http://www.desarrolloweb.com/articulos/mapas-google-api-2.html





http://www.infosports.com/m/map.htm









de Cibeles y la Plaza de Neptuno. A continuación asociaremos un marcador a cada uno de lospuntos y lo mostraremos en el mapa. El código que muestra este segundo mapa es elsiguiente:





<script src="http://maps.google.com/maps?file=api&v=1&key= AÑADE_TU_CLAVE_AQUÍ"type="text/javascript"></script>

</head>

<body>

<div id="map" style="width: 400px; height: 300px"></div><script type="text/javascript">

var map = new GMap(document.getElementById("map"));map.setMapType(G_SATELLITE_TYPE);map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl());

//Puerta de Alcalávar point = new GPoint (-3.688788414001465, 40.41996541363825);var marker = new GMarker(point);map.addOverlay(marker);

//Plaza de Neptunovar point = new GPoint (-3.6941099166870117, 40.4154238545226);var marker = new GMarker(point);map.addOverlay(marker);

//Plaza de Cibelesvar 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 paraposteriormente mostrarlo en el mapa con addOverlay. En esta ocasión hemos centrado elmapa en el último punto declarado, el correspondiente a la Plaza de Cibeles.

Estupendo, ya tenemos un mapa creado con una serie de puntos señalados sobre él, pero noaportan ninguna información al visitante. Lo apropiado sería satisfacer la curiosidad del usuarioproporcionándole algo de información asociada a ese punto. Añadamos pues algo más deinformación a nuestros marcadores mostrando unas ventanas informativas que nos indiquen elnombre de la ubicación física sobre la que nos encontramos:





10









<script src="http://maps.google.com/maps?file=api&v=1&key= AÑADE_TU_CLAVE_AQUÍ"type="text/javascript"></script>

</head>

<body><div id="map" style="width: 400px; height: 300px"></div><script type="text/javascript">

var map = new GMap(document.getElementById("map"));map.setMapType(G_SATELLITE_TYPE);map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl());

function createMarker(point, nombre) {var marker = new GMarker(point);

GEvent.addListener(marker, 'click', function() {marker.openInfoWindowHtml(nombre);

});return marker;}

//Puerta de Alcalávar point = new GPoint (-3.688788414001465, 40.41996541363825);var nombre = "Puerta de Alcalá";var marker = createMarker (point, nombre);map.addOverlay(marker);

//Plaza de Neptunovar point = new GPoint (-3.6941099166870117, 40.4154238545226);var nombre = "Plaza de Neptuno"var marker = createMarker (point, nombre);map.addOverlay(marker);

//Plaza de Cibelesvar point = new GPoint (-3.693079948425293, 40.41940998761056);var nombre = "Plaza de Cibeles"var marker = createMarker (point, nombre);map.addOverlay(marker);map.centerAndZoom(point, 3);

</script>

</body></html>

Este código nos genera el siguiente mapa, en el que al pulsar sobre el punto de la Plaza deCibeles…


11








Efectivamente se muestra la ventana informativa con los datos asociados a ese punto. En esteejemplo hemos creado una función que nos crea los markers y sus correspondientesinfoWindows para ahorrar algo de código. Esta pequeña función recibe como parámetros elGPoint donde queremos ubicar el marker, y un parámetro "nombre" que contiene lainformación que queremos mostrar en la ventana informativa asociada.

Hay que reseñar que para asociar la aparición de la ventana con el clic del usuario sobrenuestro 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 lainformación especificada en el parámetro "nombre". Nótese que hemos usadoopenInfoWindowHtml, que toma su parámetro como código html, de modo que podríamosincluir una maquetación al contenido de nuestra nueva infoWindow.

A lo largo de este artículo hemos visto las funciones más básicas de Google Maps, queproporcionan las herramientas más rudimentarias para manejar el servicio. Pese a no haberprofundizado 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 deGoogle Maps y empezar a crear scripts más avanzados.

Nota: Hemos visto aquí explicada el API 1 de Google Maps. Ahora estos códigos deben actualizarsesiguiendo el API 2 de Google Maps. Para ello podemos consultar el artículo Mapas de Google API 2.

Artículo por Javier Chaure


12










Mapas de Google API 2

Seguramente ya conozcamos los Mapas de Google, un sistema que permite acceder a fotos desatélite de todo el mundo que ha tenido bastante éxito entre los Internautas. Si estamosleyendo este artículo hasta podremos saber que los Mapas de Google tienen un API a través dela cual podemos integrarlos como servicio en una página web. Esto permite que en una páginaweb desarrollada por nosotros podamos colocar mapas y vistas satélite de distintos puntos delplaneta, todo de manera gratuita.

Bueno, pues en DesarrolloWeb.com ya habíamos publicado un par de artículos sobre los Mapasde Google que explicaban las reglas más básicas para empezar a publicar mapas satélite ennuestro sitio.

• Lo básico para empezar a desarrollar con Google Maps I • Desarrollar con Google Maps II

Pero estos dos artículos utilizaban una API que Google ha actualizado, por lo que se hacíanecesaria una revisión para mostrar códigos de integración de Google Maps que seancompatibles con el API que se utiliza ahora.

Sin embargo, los artículos anteriores siguen siendo muy interesantes para leer, porqueexplican algunas cosas básicas como obtener una llave (Key) de Google, registrándonos en elsitio de Google Maps, para poder utilizar los mapas en nuestro sitio.

Ahora vamos a ver un código para crear un mapa conforme a las especificaciones del GoogleMaps API 2.

<html>

<head><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"><title>Ejemplo de Google Maps API</title><script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#"type="text/javascript"></script><script type="text/javascript">

//<![CDATA[ //función para cargar un mapa de Google. //Esta función se llama cuando la página se ha terminado de cargar. Evento onloadfunction load() {

//comprobamos si el navegador es compatible con los mapas de googleif (GBrowserIsCompatible()) {

//instanciamos un mapa con GMap, pasándole una referencia a la capa o <div> donde queremos mostrar elmapa

var map = new GMap2(document.getElementById("map")); //centramos el mapa en una latitud y longitud deseadasmap.setCenter(new GLatLng(40.407,-3.68), 5);

//añadimos controles al mapa, para interacción con el usuariomap.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>


13
















</html>

El código está comentado para una mejor comprensión. Ahora a dar unas explicaciones

adicionales:Primero, aunque esté más tarde en el código, vamos a ver lo que hay en el body de la página.Hay que ver que hemos definido un evento onload="load()", que sirve para llamar a la funciónque genera el mapa, una vez se ha terminado de cargar la página.

Dentro del cuerpo de la página nos fijamos en la etiqueta div donde se mostrará el mapa:

<div id="map" style="width: 615px; height: 400px"></div>

El tamaño definido con estilos a esta capa es importante, porque será el tamaño devisualización del mapa. El API de Google Maps reconocerá la anchura y altura del contenedorpara mostrar un mapa justamente ocupando ese espacio.

Ahora nos fijamos en el código Javascript.

Primero se incluye la librería donde está el API Javascript para los mapas de Google.

<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#"type="text/javascript"></script>

Si nos fijamos, este código necesita que indiquemos nuestra propia Key del API de GoogleMaps, que hemos conseguido al registrarnos. La tendremos que poner sustituyendo el texto=#TU LLAVE GOOGLE MAPS#.

Luego podemos pasar a la función que genera el mapa, que se carga cuando se termina demostrar la página (la llamamos por el evento onload).

Esa función está bastante comentada y además quiero dejar para artículos posterioresdistintos pormenores de la generación de mapas, pero es muy importante llamar la atenciónsobre un punto crítico, que me dio un quebradero de cabeza cuando estaba probando losmapas, hasta que conseguí dar con el error. Se trata del método de la clase GMap2setCenter():

setCenter() se tiene que invocar justo después de instanciar el mapa!!!

Si intentamos instanciar el mapa y hacer cosas antes de centrarlo no funcionará. Esto es algoque está muy claro en la documentación del API, pero que como es un poco larga de leer, esfácil que no nos percatemos.

En mis pruebas me falló porque intentaba ponerle un tipo de mapa (vista satélite) y luego locentraba. El problema es que no sale ningún error específico y es difícil hallar el problema.



14








Tipos de mapa en Google Maps

Al desarrollar con Google Maps podemos escoger el tipo de mapa que verán los usuarios, entrelas distintas vistas predefinidas como son la vista satélite, vista de calles o vista híbrida(satélite y calles en modo semi-transparente.

Para definir el tipo de mapa en un mapa de Google tenemos el método setMapType() de laclase GMap2. El método setMapType() recibe el tipo de mapa que se desea ver. En principioexisten los siguientes tipos de mapa:

G_NORMAL_MAP Es para un mapa normal, que es el mapa político, con los nombres de localizaciones. Estemapa es el definido por defecto. En principio aparecen los distintos países, pero si ampliamosveremos las ciudades importantes, carreteras, etc y si hacemos más zoom sobre una poblaciónveremos los nombres de las calles, plazas, barrios, etc.

G_SATELLITE_MAP Este mapa permite ver el mundo con imágenes tomadas desde satélite.

G_HYBRID_MAP Este mapa combina la vista satélite y la vista normal. Sobre las fotos satélite se pintan encimalas distintas localizaciones, calles, etc.

Veamos un mapa de Google en el que definimos el tipo de mapa. Mostramos una vista satéliteen este caso.

<html>

<head><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"><title>Ejemplo de Google Maps API</title><script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE" type="text/javascript"></script><script type="text/javascript">

//<![CDATA[ //función para cargar un mapa de Google. //La llamamos cuando la página se ha terminado de cargar. Evento onloadfunction load() {

//comprobamos si el navegador es compatible con los mapas de googleif (GBrowserIsCompatible()) {

//instanciamos un mapa con GMap, pasándole una referencia a la capa o <div> donde queremos mostrar el mapavar map = new GMap2(document.getElementById("map"));

//centramos el mapa en una latitud y longitud deseadasmap.setCenter(new GLatLng(41.375987390149106, 2.1778035163879395), 17);map.setMapType(G_SATELLITE_MAP);

}}

//]]></script></head><body onload="load()" onunload="GUnload()"><div id="map" style="width: 615px; height: 400px"></div></body></html>

Con este código tendremos una vista satélite de Barcelona centrada en la plaza donde está laestatua de Colón señalando con el dedo. Un par de cosas que hay que ver:

• En la línea que carga el API de Google Maps tenemos que sustituir "AQUI-TU-CLAVE"


15








por la clave de usuario del API proporcionada en Google al registrarnos para usar susmapas en nuestro sitio web. http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE

•

La línea map.setMapType(G_SATELLITE_MAP); es donde cargamos el tipo de vista.Nota: Existen otros artículos anteriores donde hemos explicado temas adicionales de los mapas deGoogle que deberías conocer para entender este código.: Google Maps API 2

Ahora, si deseamos un mapa híbrido, sólo tendremos que cambiar la línea:

map.setMapType(G_SATELLITE_MAP);

Por esta otra línea, donde especificamos otro tipo de mapa:

map.setMapType(G_HYBRID_MAP);

También podemos probar a quitar esa línea donde especificamos el tipo de mapa. Veremoscomo sale entonces el mapa de calles. Es lo mismo que si especificásemos el tipo de mapanormal.

map.setMapType(G_NORMAL_MAP);


Control para cambiar el tipo de mapa de Google

Se pueden incluir varios controles interactivos en los mapas de Google, por ejemplo para hacerzoom sobre el mapa o para alternar entre distintos tipos de mapa.

Veremos ahora como hacer un mapa poniendo un control con tres botones, pinchando loscuales el usuario puede seleccionar el tipo de vista que desea.

Esto se hace con el método addControl de la clase GMap2, pasando por parámetro unainstancia del tipo de control que se desea incluir. Habría que poner esta línea en el código,después de centrar el mapa en la posición deseada.

map.addControl(new GMapTypeControl());

Veamos el código completo de un mapa que tiene el control para cambiar el tipo de vista. Elmapa estará centrado en Peñíscola, provincia de Castellón, donde tenía la sede el Papa Luna.

<html><head><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"><title>Ejemplo de Google Maps API</title><script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE" type="text/javascript"></script><script type="text/javascript">

//<![CDATA[function load() {

if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 16);map.addControl(new GMapTypeControl());


16










map.setMapType(G_SATELLITE_MAP);}

} //]]>

</script></head><body onload="load()" onunload="GUnload()"><div id="map" style="width: 615px; height: 400px"></div></body></html>


Incluir un mapa de tipo físico

En este artículo vamos a mostrar cómo trabajar con un tipo de mapa de Google especial,presentado hace poco en el sistema de Google Maps. Se trata del mapa físico, que muestra latierra con un dibujo de su superficie que representa las montañas, ríos y otros accidentesgeográficos.

El mapa físico ha sido presentado hace relativamente poco tiempo. Al menos cuando iniciamoseste manual del API de Google Maps no existía. Por tanto, en los artículos publicadosanteriormente no habíamos hablado de la posibilidad de integrar un mapa físico. Lo veremosahora.

En el control de selección de tipo de mapa no aparece por defecto el tipo de mapa físico, con loque no se puede seleccionar por el usuario, a no ser que nosotros hagamos algo parahabilitarlo. Los tipos de mapas disponibles para el usuario por defecto a la hora de trabajar conGoogle Maps son los que habíamos visto con anterioridad:

• G_NORMAL_MAP: es un mapa político, de países, ciudades con sus calles, etc.• G_SATELLITE_MAP: mapa de imágenes de satélite.• G_HYBRID_MAP: Un mapa que superpone la vista de calles encima de la vista satélite.

Por eso cuando colocamos el control para cambiar el tipo de mapa, nos aparecen tres botones,para cambiar entre cualquiera de estos tipos de mapas.

Ahora bien, nosotros podemos aumentar la disponibilidad de tipos de mapas de Google, paraincluir nuevos mapas, como el mapa físico (G_PHYSICAL_MAP), otros mapas existentes,cualquiera que puedan sacar en el futuro, o incluso mapas creados por nosotros mismos.

Para indicar el tipo de mapa que deseamos que se muestre se hace de esta manera:

map.setMapType(G_PHYSICAL_MAP);

Definir los tipos de mapa del control de selección de tipos de mapa

Ahora, para incluir otros tipos de mapas en el control de selección de tipo de mapa, debemosutilizar el método addMapType() de la clase GMap2, indicando como parámetro el nombre deltipo de mapa que queremos incluir. Por ejemplo:

map.addMapType(G_PHYSICAL_MAP);


17



http://www.desarrolloweb.com/articulos/control-cambiar-tipo-mapa-google.html











Esto parece que no es un paso obligatorio para poder mostrar un tipo de mapa, sino para queaparezca en el control y el usuario lo pueda seleccionar. Es decir, para hacer un mapa deGoogle físico con map.setMapType(G_PHYSICAL_MAP) no es necesario que lo haya incluido

previamente con map.addMapType(G_PHYSICAL_MAP);

Ahora, para quitar un tipo de mapa del control, lo hacemos a través del métodoremoveMapType() de la clase GMap2, indicando un parámetro con el nombre del tipo de mapaque queremos deshabilitar del control. Por ejemplo:

map.removeMapType(G_HYBRID_MAP);

Ejemplo de mapa de Google con dibujo tipo físico

Para acabar voy a mostrar cómo crear un mapa de Google físico, que además tenga un controlque permita cambiar entre los tipos de mapa político, satélite y físico.

function load() {if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(40.201022,-3.8736677),6);map.addMapType(G_PHYSICAL_MAP);map.removeMapType(G_HYBRID_MAP);map.addControl(new GMapTypeControl());map.setMapType(G_PHYSICAL_MAP);

}}

El código que podemos ver incluye llamadas a los métodos: addMapType(G_PHYSICAL_MAP),para indicar que en el control de selección de tipo de mapa se debe incluir el mapa físico.map.removeMapType(G_HYBRID_MAP), para eliminar del control de selección de tipos de

mapas el mapa híbrido. El método addControl(new GmapTypeControl()) para incluir en lainterfaz el control de usuario para cambiar el tipo de mapa. Y por últimosetMapType(G_PHYSICAL_MAP), para definir que el mapa que debe mostrarse desde elprincipio debe ser el mapa físico.

Podemos ver el ejemplo en marcha en una página aparte.

Puedes ver el código fuente de la página para ver el código del ejemplo completo.


Controles en mapas de Google

Como ya debemos de saber, los mapas de Google se pueden integrar en la página de cualquierpersona que desee, a través de un API en Javascript. En este caso vamos a ver cómo incluircontroles de usuario dentro de un mapa de Google, como funciona el API en este sentido y quétipos de controles hay disponibles.

Antes que nada decir que este artículo viene a ampliar la información del manual Desarrollocon el API de Google Maps, por lo que muchas de las explicaciones para trabajar con losmapas de Google la tenemos que consultar en otros capítulos del mencionado manual.


18


http://www.guiarte.com/mapas-google/desarrolloweb/mapa-fisico.php




http://www.guiarte.com/mapas-google/desarrolloweb/mapa-fisico.php








Tipos de controles de usuario

Los controles de usuario de los mapas de Google (controls en inglés) son interfaces desdedonde el usuario puede interaccionar con el mapa, para efectuar acciones como serían hacerzoom, seleccionar entre tipos de mapa (satélite, mapa, híbrido), o moverse por un mapapequeño más general. Todos estos controles están ya creados y existen instrucciones y clasespara incluirlos fácilmente en un mapa de Google.

Aunque cualquier desarrollador podría crear sus propios controles, existen varios tipos decontroles de usuario en los mapas de Google ya creados de antemano:

• GLargeMapControl: Muestra una interfaz para hacer zoom y moverse por el mapa, conuna especie de regla donde se pueden escoger de las distintas aproximaciones de lavista. Este control aparece en la parte superior izquierda.

• GSmallMapControl: Es otro control de usuario para hacer zoom y moverse por el mapa,

pero más pequeño, que también aparece en la esquina superior izquierda.• GSmallZoomControl: Un control de usuario muy pequeñito, que aparece en la esquina

superior izquierda que simplemente tiene un botón para ampliar el zoom y otro botónpara reducirlo. Pero no tiene botones para moverse por el mapa.

• GScaleControl: Este es un control que simplemente informa sobre la escala actual delmapa. Con este control no se puede interaccionar, es meramente informativo.

• GMapTypeControl: Este control incluye tres botones para cambiar entre distintos tiposde mapa (mapa politico de calles y carreteras, mapa satélite y mapa híbrido -calles ycarreteras sobre el fondo de satélite)

• GOverviewMapControl: Con este control aparece un pequeño mapita en la esquinainferior derecha donde aparece una vista general con menos zoom del mapa actual, através del cual también podemos movernos.

Añadir controles a un mapa de Google

Los controles de usuario para los mapas de Google que hemos visto se incluyen con unasencilla instrucción Javascript a la hora de crear el mapa. Como los controles ya estánpredefinidos en el API de Google Maps, simplemente tenemos que asociarlos al mapa queestamos creando.

Para ello se utiliza un método de la clase GMap2 llamado addControl(). La clase GMap2 es laque se utiliza para instanciar un mapa de google. Con ella creamos el objeto mapa y luego aeste objeto con addControl() le asociamos los controles deseados. El método addControl()recibe una instancia del control de usuario que se desea crear.

Por ejemplo, si tenemos el mapa en un objeto llamado "map", ejecutaremos el métodoaddControl() de esta manera:

map.addControl(new GMapTypeControl());

Podemos incluir todos los controles que deseemos haciendo varias llamadas al métodoaddControl(), pasando como parámetro distintas instancias de los controls que queremosincluir.

Veamos un ejemplo completo de un mapa de Google que tiene una serie de controles deusuario:


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">


if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 12);map.addControl(new GMapTypeControl());map.addControl(new GSmallZoomControl());map.addControl(new GScaleControl());map.addControl(new GOverviewMapControl());map.setMapType(G_SATELLITE_MAP);

}

} //]]></script></head><body onload="load()" onunload="GUnload()"><div id="map" style="width: 615px; height: 400px"></div></body></html>

Como habíamos dicho, el desarrollador puede crear sus propios controles para incluirlos en susmapas. Este es un tema que trataremos más adelante, pero por ahora podemos referiros a ladocumentación del API Google Maps para obtener más información:http://www.google.com/apis/maps/documentation/controls.html


Insertar una marca en un mapa de Google

Veamos rápidamente cómo insertar una marca en un mapa de Google, que nos sirve paraseñalar un punto preciso en un mapa. Es un paso muy sencillo pero importante en el manejodel API de Google Maps.

Este artículo está englobado dentro del manual de manejo del API de los mapas de Google, por

lo que muchas explicaciones nos las vamos a saltar porque ya las hemos presentado enartículos anteriores.

Para insertar marcas tenemos un método, también de la clase GMap2, que sirve para insertarun elemento sobre el mapa. El método en concreto se llama addOverlay() y recibe comoparámetro la marca que se quiere insetar.

map.addOverlay(marker);

En el código anterior el objeto map sería una instancia de la clase GMap2. La variable markercontendrá la marca que se quiere insertar en el mapa.

Ahora veamos como crear la marca. Lo explicaremos en dos pasos.


20


http://www.google.com/apis/maps/documentation/controls.html



http://www.google.com/apis/maps/documentation/controls.html







1) Creamos un puntoLa 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 laclase GPoint, que recibe en el constructor la longitud y latitud de ese punto.

var point = new GPoint (-3.7034815549850464, 40.41689826118782);

2) Creamos la marcaPara crear la marca simplemente utilizamos la clase GMarker, que en su constructor deberecibir varios valores. Por ahora colocaremos sólo el único valor que es obligado indicar, que esel 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 deinterés que se pueden personalizar en las marcas.

Veamos el código completo de un mapa de Google con una marca en la plaza "Puerta del Sol"de Madrid.

<html><head><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"><title>Ejemplo de Google Maps API</title><script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE-GOOGLE-MAPS"type="text/javascript"></script>

<script type="text/javascript"> //<![CDATA[function load() {

if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 17);map.addControl(new GLargeMapControl());map.setMapType(G_SATELLITE_MAP);

var point = new GPoint (-3.7034815549850464, 40.41689826118782);var marker = new GMarker(point);map.addOverlay(marker);

}}

//]]></script></head><body onload="load()" onunload="GUnload()"><div id="map" style="width: 615px; height: 400px"></div></body></html>

Cambiar el icono a una marca

La marca se crea con un icono por defecto, como una especie de chincheta roja, pero podemoscambiarlo para personalizar el estilo de nuestros mapas.

Vamos a ver aquí como asociar un icono a una marca, cuando la instanciamos a partir de suconstructor.


21








El constructor de la marca recibe dos parámetros, el primero obligado es el punto geográfico yel otro es el icono, que es opcional. En caso que no se especifique un icono se utiliza el

G_DEFAULT_ICON, que es una constante del API que contiene el icono por defecto.var marker = new GMarker(point, miIcono);

la variable miIcono en este caso es un objeto de la clase GIcon, que puede crear así:

var miIcono = new GIcon(G_DEFAULT_ICON);miIcono.image = "http://www.midominio.org/mapas-google/arrow_down.png";

En este caso, con la primera sentencia se crea un nuevo icono, a partir de G_DEFAULT_ICON.Es decir, un icono nuevo pero con todas las carácterísticas cargadas del G_DEFAULT_ICON.

En la siguiente línea se modifica la imagen del icono, asignando un nuevo valor a su atributo

image.

Habría que hablar más sobre la creación y modificación de iconos, porque es un tema querequiere mayor detenimiento para dominarlo, pero lo dejaremos para más adelante.


Personalizar iconos en los mapas de google

Crear y definir iconos para mapas de Google es algo que nos puede llevar un tiempo, porquepuede resultar minucioso ajustar los distintos parámetros para conseguir un icono con elformato deseado. No obstante, vamos a dar aquí un pequeño ejemplo de cómo crear un iconoque podrá servir para los interesados en cambiar la imagen por defecto del icono.

Este artículo está englobado dentro del manual de Trabajo con el API de Google Maps.Además, hay que decir que en este artículo vamos a realizar trabajos como crear marcas enlos 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 laclase GIcon, que son unas cuantas, porque los iconos se pueden personalizar en muchosparámetros distintos. Las referencias completas de esta clase conviene leerlas en la propia

documentación del API de Google Maps. Pero nosotros vamos a explicar esos parámetros, almenos los necesarios para crear iconos con la imagen personalizada.

Lo primero que tenemos que hacer es definir el icono personalizado. Luego podremos crearmarcas utilizando este icono. Crear un icono desde cero es complicado, porque requiereajustar muchos parámetros, pero el API nos permite crear iconos copiando las característicasde otros iconos.

Entonces, por simplificar la tarea, vamos a crear un icono que es copia del icono que aparecepor defecto:

var iconoMarca = new GIcon(G_DEFAULT_ICON);


22



http://www.desarrolloweb.com/articulos/insertar-marca-en-mapa-google.html


http://code.google.com/apis/maps/documentation/reference.html#GIcon





http://code.google.com/apis/maps/documentation/reference.html#GIcon






Esto crea una variable iconoMarca que es una instancia de la clase GIcon, donde hemosutilizado G_DEFAULT_ICON como icono a copiar. G_DEFAULT_ICON es una constante del APIde Google Maps, que contiene el icono por defecto.

Luego vamos a definir la imagen del icono, alterando el atributo image de la instancia delicono que había hecho antes. (Hablaré sobre formatos de las imágenes de los iconos más tardeen este artículo)

iconoMarca.image = "/images/bandera-roja.png";

A continuación, a través del atributo iconSize, debemos de definir el tamaño de la imagen deeste icono. Los tamaños en el API se define con un objeto de la clase GSize.

var tamanoIcono = new GSize(17,17);iconoMarca.iconSize = tamanoIcono;

Primero hemos creado el tamaño del icono y luego lo hemos asociado al atributo iconSize.

Del mismo modo, tendremos que definir la imagen que utilizaremos para la sombra y eltamaño de la imagen utilizada.

iconoMarca.shadow = "/images/sombra-bandera2.png";var tamanoSombra = new GSize(22,18);iconoMarca.shadowSize = tamanoSombra;

Para acabar, sólo nos queda por editar el atributo iconAnchor. Este sirve para reposicionar ellugar donde se colocan los iconos. Como se pueden hacer iconos con imágenes de distintostamaños, hay que ajustar bien donde queremos que queden, para que la imagen quepongamos apunte al lugar correcto. Dicho de otra manera, como hemos cambiado el tamaño

de la imagen del icono por defecto (que habíamos copiado para crear el icono personalizado),ahora hay que editar el atributo iconAnchor para que apunte al lugar correcto.

iconoMarca.iconAnchor = new GPoint(11, 16);

Al iconAnchor se les pasa un punto, que está formado por las coordenadas relativas a laesquina superior izquierda de la imagen donde debe estar enlazado el icono. Es el punto de laimagen que debe aparecer en el punto geográfico donde se coloca la imagen. En nuestro casoel 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 elicono que que se desea.

Para acabar habría que señalar:

1) URLs de las imágenes que hemos utilizado en el ejemplo:https://reader003.{domain}/reader003/html5/0209/5a7d4ad5b7be1/5a7d4af21d89c.png https://reader003.{domain}/reader003/html5/0209/5a7d4ad5b7be1/5a7d4af2b032d.png

Los formatos de las imágenes los hemos creado como PNG de 24 bits con transparencia.Hemos elegido ese formato porque permite una transparencia para las imágenes. Es una


23


http://www.guiarte.com/images/bandera-roja.png

http://www.guiarte.com/images/sombra-bandera2.png


http://www.guiarte.com/images/bandera-roja.png

http://www.guiarte.com/images/sombra-bandera2.png






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 necesariosobretodo para hacer la sombra de la marca, que tiene que ser forzosamente medio

transparente para que quede bien.

Podemos utilizar un formato PNG 24 bits con transparencia en los más habituales programasde edición gráfica, como Photoshop. De hecho, nosotros hemos utilizado Photoshop para hacero retocar las imágenes utilizadas.

2) El enlace para ver el ejemplo:http://www.guiarte.com/mapas-google/desarrolloweb/ej_icono.php

3) El código completo del ejemplo:


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><head><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"><title>Mapa de Google</title><script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAUnJY3ChJhF0YgyTSDJuVfBTqu-zEVMasluaqfAe9FKyfKhfBExSs1s93Q7GOuBeSnaddg05sRmEGTs"type="text/javascript"></script><script type="text/javascript">

//<![CDATA[


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 ICONOvar 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 DESEADOvar marker = new GMarker(point, iconoMarca);

GEvent.addListener(marker, 'click', function() {marker.openInfoWindowHtml("<span style='font-size: 8pt; font-family: verdana'>" + nombre + "<br><a

target='_parent' href='/destinos/" + continente + "/" + pais + ".html'>Ir al destino " + nombre + "</a></span>");});return marker;

}

var point = new GPoint (-4.0,40);var nombre = "España";

var continente = "europa";


24


http://www.guiarte.com/mapas-google/desarrolloweb/ej_icono.php


http://www.guiarte.com/mapas-google/desarrolloweb/ej_icono.php






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>


Eventos en mapas de Google

Para continuar el manual de desarrollo de mapas de Google, vamos a conocer el tratamientode eventos. El API de Google Maps tiene capacidad para tratar eventos. Esto no es nadanuevo, porque Javascript también es un lenguaje de programación orientado a eventos y el APIde los mapas de Google está basado en Javascript.

Pero hay que señalar que el API de Google Maps incorpora unos cuantos eventos que sonpropios de los mapas de Google y que no forman parte de los eventos básicos de Javascript.


25










Además, así como las peculiaridades de cada navegador pueden hacer el tratamiento deeventos distinto entre distintas plataformas, el API de los mapas de Google es único y funcionaen 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 delos mapas de google dispone de una serie de eventos ya definidos, que además se ejecutandentro de un contexto y pasan distintos parámetros para identificar tal contexto. Por ejemplo,un mapa de Google tiene el evento click (la clase GMap2 tiene multitud de eventos distintos),que se desata cuando el usuario hace clic sobre el mapa. Dicho evento pasa los argumentosoverlay y point, el primero para pasar una marca (si es que el usuario hizo clic en una marca)y el segundo para pasar el punto geográfico donde se hizo clic, si pulsó sobre cualquier áreavacía del mapa.

Todos los eventos que soporta el API de Google Maps, para cada clase, están perfectamentedocumentados 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 elpunto donde el usuario ha hecho clic en el mapa.

Primero tendríamos que crear el mapa, tal como lo hemos hecho en anteriores ocasiones, yañadirle a GEvent un escuchador de eventos (Event listener) para cuando se hace clic sobre elmapa.

var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(33,0),3);map.addControl(new GLargeMapControl());map.setMapType(G_NORMAL_MAP);

GEvent.addListener(map, "click", tratamiento_clic);

La línea que tenemos que ver ahora es la última, donde se añade el escuchador de eventos.

GEvent es la clase a la que añadimos el event listener. Al añadir un evento para ser escuchadotenemos que proveer de tres parámetros:

1. El objeto del API sobre el que se tiene que escuchar el evento2. El nombre del evento que queremos detectar y hacer acciones cuando se haya captado3. El nombre de la función que se encargará de tratar el evento.

En este caso se ha añadido un escuchador de evento, para realizar acciones cuando se hace"clic" sobre el objeto map, que es el propio mapa de google. Las acciones son simplementeejecutar la función tratamiento_clic (fíjate que sólo ponemos el nombre de la función, sin losparéntesis). Ahora tenemos que codificar el comportamiento de nuestro mapa cuando se hace

clic en él, es decir, codificar la función tratamiento_clic().function tratamiento_clic(overlay,point){

alert ("Hola amigo! Veo que estás ahí porque has hecho clic!");alert ("El punto donde has hecho clic es: " + point.toString());

}

Como vemos, la función recibe un par de parámetros, que son el contexto en el que se hadetectado el evento. Estos dos parámetros son:

• overlay: No lo vamos a utilizar ahora. Tiene que ver cuando el usuario hace clic en unamarca de un mapa.

• point: que es el punto o coordenadas geográficas donde el usuario ha hecho clic.

El código de la función es simplemente un par de alert, para mostrar mensajes al usuario. El


26


http://code.google.com/apis/maps/documentation/reference.html


http://code.google.com/apis/maps/documentation/reference.html






primer alert simplemente está para dar un saludo al visitante y el segundo muestra lascoordenadas (x e y - latitud, longitud) donde se ha hecho clic. Dichas coordenadas se extraendel parámetro point que hemos recibido como contexto del evento, al que hemos pasado el

método toString() para que extraer su codificación en cadena de caracteres.El ejemplo puede verse en marcha en una página aparte.


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

En el anterior capítulo del manual de desarrollo con el API de mapas de Google vimos losprimeros detalles sobre el tratamiento de eventos. Ahora vamos a seguir con otro ejemplo dedesarrollo en el que vamos a hacer un mapa que tiene una marca. Pulsando en cualquier partedel mapa reposicionaremos la marca a la posición donde se ha hecho clic.

El evento que vamos a ver es el click en el objeto map, de la clase GMap2. En este caso,recuperaremos el punto donde se ha hecho click para colocar la marca en ese punto.

Primero veamos el código para crear el mapa con una marca:

var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(40,-4),3);map.addControl(new GLargeMapControl());

map.setMapType(G_NORMAL_MAP);var point = new GPoint (-4,40);var marker = new GMarker(point);map.addOverlay(marker);

Este mapa, centrado en España, tiene una marca también en España. Ahora veamos el sencillocódigo para detectar un evento de tipo click sobre el mapa:

GEvent.addListener(map, "click", function (overlay,point){if (point){

marker.setPoint(point);}

});

Se crea el escuchador de eventos, para el objeto map y el tipo de evento click, ejecutando unafunción que recibe dos parámetros (overlay,point). Recordamos que overlay es la marca sobrela que se ha pulsado, si es que se pulsó sobre una marca, y point es el punto donde se hahecho clic del mapa, si es que se pulsó sobre un área vacía del mapa.

En la función empezamos con un if(point) que sirve para saber si hemos recibido un punto(Sólo recibimos el punto si se ha pulsado sobre un área vacía del mapa), porque sólo entoncesqueremos recolocar la marca. Entonces llamamos al método de la marca setPoint(point) parareposicionar la marca al punto recibido por parámetro.

Es bien simple ¿no? Podemos ver el ejemplo en marcha en este enlace.


27


http://www.guiarte.com/mapas-google/desarrolloweb/ej_eventos.php


http://www.guiarte.com/mapas-google/desarrolloweb/ej_eventos2.php


http://www.guiarte.com/mapas-google/desarrolloweb/ej_eventos.php








Para acabar, os dejo el código completo de este ejercico:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><head><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"><title>Mapa de Google</title><script src="http://maps.google.com/maps?file=api&v=2&key=llave"type="text/javascript"></script><script type="text/javascript">

//<![CDATA[


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);


marker.setPoint(point);}

});}

}

window.onload=load //]]>

</script>

</head>

<body><div id="map" style="width: 765px; height: 388px"></div>

</body></html>


Mostrar la posición de una marca de Google Maps en unformulario

Ahora vamos a complicar un poco el ejemplo anterior de recolocar una marca en un mapa deGoogle, para poner en un formulario en la propia página los valores de latitud y longitud. Estonos puede servir para saber el punto exacto donde se hace clic, para poder obtener la latitud ylongitud de cualquier punto geográfico.

En el ejemplo vamos a tener el mapa de Google y un formulario. El mapa de google, así comoel tratamiento del evento con el API de Google Maps ya lo vimos en el anterior capítulo, por loque no los voy a explicar.


28


http://www.desarrolloweb.com/articulos/manejar-evento-mapa-google-reposicionar-marca.html












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 hemospuesto un name="posición", para podernos referir a él desde Javascript. Luego vemos loscampos X e Y, que son campos de texto normales, con sus respectivos name, para poderactualizar sus valores desde el script.

Ahora el único cambio que hemos incorporado en el código de creación del mapa de Google, esel manejo del evento click sobre el mapa.


marker.setPoint(point);document.posicion.x.value=point.xdocument.posicion.y.value=point.y

}});

Simplemente hemos incluido un par de líneas adicionales para acceder al formulario yactualizar los valores de los campos <input> de las coordenadas.

Eso es todo. Podemos ver el ejemplo en marcha en este enlace

El código completo del ejercicio es este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><head><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"><title>Mapa de Google</title><script src="http://maps.google.com/maps?file=api&v=2&key=TU-GOOGLE-MAPS-KEY"type="text/javascript"></script><script type="text/javascript">

//<![CDATA[


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);


marker.setPoint(point);document.posicion.x.value=point.xdocument.posicion.y.value=point.y

}


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>


Averiguar el zoom en un mapa de Google Maps

Cuando generamos un mapa de Google, utilizando el API de los Google Maps, definimos elzoom con el que tiene que comenzar el mapa. Esta es una tarea que hemos repetidonumerosas veces a lo largo del Manual de API de Google Maps. Pero el mapa es interactivo y elusuario utilizándolo puede haber cambiado el zoom, para ampliar o reducir la definició. En esteartículo vamos a aprender a obtener el zoom actual de un mapa cuando se produzca unevento, es decir, como respuesta a una acción de un usuario. Los eventos en mapas de Googleya los hemos tratado anteriormente en este manual, de hecho, este artículo va a ampliar otroque ya habíamos realizado: Mostrar la posición de una marca de Google Maps en unformulario. En este caso mostraremos el zoom actual del mapa de google al hacer el usuarioclic en el mapa y lo escribiremos en un formulario en la propia página. En realidad saber elzoom en un mapa es simple, sólo tenemos que utilizar el método getZoom() de la claseGMap2. getZoom() devuelve un número entero, que es el zoom actual del mapa.

Pongamos que tenemos el objeto mapa en una variable llamada "map". Pues entonces elmétodo lo ejecutaremos con esto:

zoom_actual = map.getZoom();

Así habríamos guardado en una variable zoom_actual el valor entero del zoom del mapa.

Si queremos mostrar en un formulario en la página el zoom actual, como respuesta al eventoclic, haremos algo como esto:


marker.setPoint(point);


30



http://www.desarrolloweb.com/articulos/mostrar-posicion-marca-google-formulario.html











document.posicion.x.value=point.xdocument.posicion.y.value=point.y

zoom_actual = map.getZoom();

document.posicion.zoom.value=zoom_actual}});

Recordar que para entender bien este código tendremos que leer el artículo anterior, así comoposiblemente los precedentes de este manual que tratan sobre eventos.

Bueno, además tendremos que colocar en el formulario un campo nuevo para escribir el zoomdel mapa:

zoom actual: <input type="text" name="zoom" value="" />

Esto es todo. Podemos ver el ejercicio en marcha en este enlace.

Para ver el código completo del ejercicio simplemente muestra el código fuente de la páginadel ejemplo.


Evento zoom en un mapa de Google

Estamos en el manual de creación de Google Maps, tratando los eventos sobre mapas de

Google. En este caso vamos a ver un evento que se ejecuta en el momento en el que elusuario cambia el zoom del mapa. Es el evento “zoomend”, que se desata en el momento queel mapa cambia el zoom.

El tratamiento de eventos en mapas de Google ya lo explicamos en el artículo Eventos enmapas 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 queañadir un escuchador de evento con el método addListener de la clase GEvent. Este métodotiene que recibir el objeto sobre el que se escuchará el evento, el tipo de evento y la funciónque se ejecutará como respuesta al evento (el manejador de eventos). Para obtener másexplicaciones de este paso consultar el artículo donde se tratan los eventos de mapas de

google en general.El manejador de evento zoomend, es decir, la función que se ejecuta cuando se produce elevento, recibe dos variables. Una es el antiguo zoom que tenía el mapa y otra el nuevo zoomque se ha colocado.

Suponemos que tenemos creado un mapa de google y que está declarado en el objeto map dela clase GMap2. Entonces, si quisiéramos crear un evento para que nos mostrase en una cajade alerta las dos variables con el antiguo zoom y el nuevo, haríamos algo como esto:

GEvent.addListener(map, "zoomend", function (antiguoZoom, nuevoZoom){alert("Has cambiado el zoom del mapa.\nAntiguo Zoom: " + antiguoZoom + "\nNuevo Zoom: " + nuevoZoom);

});

Este simple ejercicio se puede ver en marcha aquí .


31



http://www.guiarte.com/mapas-google/desarrolloweb/eventos_zoom.php


http://www.desarrolloweb.com/articulos/eventos-mapas-google.html




http://www.guiarte.com/mapas-google/desarrolloweb/evento_mapa_zoom.php









http://www.guiarte.com/mapas-google/desarrolloweb/evento_mapa_zoom.php






Volcamos el zoom en un formulario, cuando se produce el evento

Ahora, por complicarlo algo más, mostramos el zoom en un formulario, que se actualizacuando el usuario cambia el zoom en el mapa. Parte de este ejercicio lo hemos tratado

previamente en otro artículo: Averiguar el zoom en un mapa de Google Maps.

Anteriormente ya hacíamos un volcado del zoom en un formulario, pero si el zoom secambiaba no se actualizaba el valor hasta que no se cambiaba la marca pulsando el cualquierparte del mapa. Podemos ver lo que estoy diciendo en esta página.

Como se puede ver, hay un formulario en la parte de abajo, que se actualiza cada vez que seresitúa la marca. Ahora vamos a actualizarlo también cuando el usuario cambia el zoom. Paraello tenemos que definir un escuchador del evento zoomend en el mapa.

Realmente, sólo hemos añadido estas líneas para que se produzca el comportamiento deseadocuando 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 código fuente podemos hacernos una idea del ejercicio completo. Pero recordamosque para entenderlo tenemos que seguir el artículo Averiguar el zoom en un mapa de GoogleMaps.


Maquetar una página con un mapa de Google, usando CSS

La maquetación con mapas de Google, que creamos con el API de Google Maps, es muysencilla, ya que el mapa ocupa el espacio disponible en la capa donde esté contenido. Así pues,al incorporar un mapa a una página web, no tenemos que especificar el tamaño del mapa porJavascript ni nada parecido, simplemente el mapa de Google tomará el los atributos de anchoy alto de la capa (el <div> ) donde está contenido. Esto es dinámico, es decir, si cambia elespacio disponible de la capa donde está el mapa -ya sea porque el usuario ha cambiado eltamaño de la ventana o porque se han alterando los atributos width y height de la capa conJavascript o por cualquier modo- cambiará automáticamente el tamaño del mapa paraajustarse dinámicamente al espacio disponible.

Dicho esto, puede resultar poco revelador este artículo, porque no vamos a ver nada deJavascript ni de creación de mapas de Google, sino que vamos a mostrar como maquetar conCSS, 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 loslectores.

En DesarrolloWeb.com ofrecemos un manual en el que puedes aprender a trabajar con el APIde Google Maps.

También recomiendo la lectura del material que ofrecemos en DesarrolloWeb.com sobre lamaquetación CSS, pues voy a dar por sabidos los aspectos sobre maquetación con hojas deestilos y por tanto, no los voy a explicar.


32


http://www.desarrolloweb.com/articulos/averiguar-zoom-mapa-google.html


http://www.guiarte.com/mapas-google/desarrolloweb/evento_mapa_zoom2.php









http://www.guiarte.com/mapas-google/desarrolloweb/evento_mapa_zoom2.php











Los atributos de altura y anchura de un mapa son la capa que lo contiene

El ejemplo más sencillo que podemos encontrarnos para maquetar un mapa de google es quetenga dimensiones en ancho y alto fijas. Es como hemos colocado los mapas en el manualhasta este momento:

<div id="map" style="width: 765px; height: 388px"></div>

En este ejemplo el mapa ocupa 765 píxel de ancho y 388 de alto. Esto no tiene ningún secreto.

¿Pero qué pasa si queremos que un mapa de Google Maps tenga el ancho de toda la ventanadel navegador? Porque sabemos que el navegador puede tener distintos tamaños, dependiendode la definición de pantalla del visitante y si la ventana está maximizada o dimensionada decualquier otra forma.

Entonces es muy sencillo, podemos colocar width:100% en la declaración de estilos css de lacapa donde está el mapa.

<div id="map" style="width: 100%; height: 388px"></div>

Este mapa ocuparía todo el área disponible de la ventana del navegador, o bien de la capadonde estuviera contenido.

El ejemplo se complica si queremos que el mapa de Google ocupe además todo el altodisponible en el navegador, que también, sabemos, puede ser variable dependiendo de lascaracterísticas de pantalla o del estado de la ventana del browser. Lo normal es que

probásemos algo como esto:

<div id="map" style="height: 100%; width:100%;"></div>

Pero esto tal cual, sin hacer ninguna otra cosa, tiene un problema y es que misteriosamente elmapa aparece vacío o con height = 0. Esto es porque los navegadores tienen problemas almaquetar con height=100%. La idea para solucionarlo es colocar a todas las capas quecontengan al mapa height:100%, así como a las etiquetas <BODY> y <HTML> que tambiéndeberían tener el height de 100%. Entonces nos debería funcionar y el mapa ocuparía todo elalto y ancho de la ventana.

Referencia: Podemos ver una FAQ con explicaciones sobre utilización del height:100% en CSS.

Ahora veamos el ejemplo de un mapa de Google Maps que ocupa todo el ancho y alto delespacio en una página aparte.

Maquetar un mapa de Google con width y height 100%, pero mezclado con otroselementos

Para acabar veamos un ejemplo de maquetación de un Google Maps que ocupa el 100% delespacio, pero que tiene una cabecera y una barra lateral. La cabecera y el lateral ocupan unosespacios fijos y el mapa de google ocupará todo el sitio que dejan libre otros elementos de lamaquetación.

Para explicarlo lo más sencillo es ver directamente el ejemplo en una página aparte.


33


http://www.desarrolloweb.com/faq/css-height-100.html


http://www.guiarte.com/mapas-google/desarrolloweb/ej_maquetacion1.php

http://www.guiarte.com/mapas-google/desarrolloweb/ej_maquetacion.php



http://www.guiarte.com/mapas-google/desarrolloweb/ej_maquetacion1.php

http://www.guiarte.com/mapas-google/desarrolloweb/ej_maquetacion.php






El ejercicio es simple, pero necesitaremos conocimientos de CSS sobre maquetación yposicionamiento. El código es el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><head><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1"><title>Mapa de Google</title><script src="http://maps.google.com/maps?file=api&v=2&key=coloca-tu-llave"type="text/javascript"></script><script type="text/javascript">


if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(33,0),3);

map.addControl(new GLargeMapControl());map.setMapType(G_NORMAL_MAP);}

}

window.onload=load //]]></script><style type="text/css">html,body{margin:0px;height:100%;}</style></head>

<body><div id="contenedor" style="width:100%; height:100%;">

<div id="cabecera" style="background-color: #ffcc99; font-weight:bold; font-size: 110%; height: 23px; padding:3px; margin-bottom:10px;">Esto es la cabecera!!</div>

<div id="lateral" style="float:right; width:200px; height:100%; background-color:#eeff99;"><div id="contenidolateral" style="padding: 30px 10px 0 10px;">Por <a href="http://www.guiarte.com">guiarte.com</a><br /><br />Esto son contenidos que colocamos en el lateral izquierdo. Resulta muy fácil maquetar con un mapa de Google en

una capa que toma el tamaño del contendor donde se encuentra.</div>

</div><div id="map" style="height: 100%; margin-right:210px;"></div>

</div>

</body></html>


Dibujar líneas en mapas de Google

Seguimos estudiando la creación de mapas de Google con el API de Google Maps, en estaocasión para mostrar el proceso de creación de líneas sobre mapas de Google. Las líneas se


34








dibujan encima de los mapas y se muestran con una pequeña transparencia, para que sepueda ver lo que hay debajo de ellas.

Dibujar líneas o polígonos es un modo muy interesante de marcar elementos o caminos en elmapa y resulta muy sencillo. Sólo necesitamos conocer previamente unos cuantos conceptossobre la creación de mapas, que ya vimos en artículos anteriores, en el manual: Manual delAPI de Google Maps.

Para ilustrar este ejemplo, vamos a crear una línea en un mapa de Google que va de Madrid aBarcelona. Podemos ver el ejemplo en marcha en una página aparte.

Clase GPolyline

Esta clase sirve para dibujar líneas o polígonos en un mapa. Intenta hacer el trabajo utilizandolas características de dibujo con vectores de los navegadores y si no es posible superpone una

imagen al mapa.Para construir un polígono se necesitan varios parámetros:

• Array con los vértices de las líneas, que se indica con los distintos puntos• El color de las líneas, que es un RGB en hexadecimal, como los que utilizamos para

definir colores en HTML, comenzando por #. Ej: #ff8800.• El ancho de las líneas, en pixels.• La opacidad con un valor que va de cero a uno.• Otras opciones.

El único parámetro que necesitamos indicar de manera obligada son los puntos de las líneas,los otros parámetros son opcionales.

Para indicar los puntos de los vértices, se utiliza la clase GLatLng, que sirve para crear objetosque tienen las dos coordenadas geográficas latitud y longitud. Por ejemplo, para definir lospuntos donde están Madrid y Barcelona:

var madrid = new GLatLng(40.4165020, -3.702564);var barcelona = new GLatLng(41.38878, 2.15898);

Ahora que tenemos los puntos de la línea a crear, podemos hacer la llamada al constructor delpolyline:

var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4);

Como vemos, se ha definido una línea con dos puntos, con color #0000dd que es un azul, con6 pixels de ancho y 0.4 de opacidad.

Pintar la línea en el mapa con addOverlay

Para que esta línea quede dibujada en el mapa se utiliza el método de GMap2 llamadoaddOverlay() al que le pasamos por parámetro el polyline que habíamos construido.

map.addOverlay(polyline);

Todo el código

Este es el código completo para la configuración del mapa del ejemplo:


35




http://www.guiarte.com/mapas-google/desarrolloweb/linea.php











var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(40.002,-4.12),5);

var madrid = new GLatLng(40.4165020, -3.702564);var barcelona = new GLatLng(41.38878, 2.15898);

var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4);map.addOverlay(polyline);

}}

window.onload=load

Podemos ver el código completo del mapa accediendo al ejemplo y utilizando la funcionalidad

del navegador de "Ver código fuente".Ejemplo completo en marcha en http://www.guiarte.com/mapas-google/desarrolloweb/linea.php


Polígonos con líneas geodésicas en mapas de Google

Continuamos la explicación del artículo anterior sobre mapas de Google y polígonos.Anteriormente vimos cómo crear una línea recta en un mapa de Google entre dos puntosdados. Ahora vamos a ver cómo crear un polígono con varios puntos y líneas geodésicas.

Primero habrá que explicar qué son líneas geodésicas. Como sabemos, la tierra es esférica ypor tanto su superficie tiene una curvatura, a pesar que en los mapas aparece la tierra sobreun plano recto. Por ello, para ir de un punto a otro en el mapa, realmente no vamos a ir enlínea recta, sino realizando esa forma de la curvatura de la tierra. Esto es porque la distanciamás corta entre dos puntos de la tierra se representaría con una curva geodésica.

Para decirle al API de mapas de Google que trace líneas geodésicas sobre el mapa tenemosque especificarlo a la hora de instanciar el polígono. Para ello primero tenemos que definir unaopción adicional al polígono:

var opciones_poligono = {geodesic:true};

Ahora esas opciones las pasamos como último parámetro en el constructor del objeto de laclase GPolyline.

Imaginemos que queremos construir un polígono que hace esta ruta: Madrid, Moscú,Estambul, Roma, Túnez y Madrid. Primero crearíamos los puntos de esas ciudades:

var madrid = new GLatLng(40.4165020, -3.702564);var moscu = new GLatLng(55.7522222, 37.6155556);var estambul = new GLatLng(41.0186111, 28.9647222);var roma = new GLatLng(41.9, 12.4833333);


36




http://www.desarrolloweb.com/articulos/dibujar-lineas-mapas-google.html










var tunez = new GLatLng(36.8027778, 10.1797222);

Y luego instanciaríamos el polígono, indicando que queremos líneas geodésicas, de esta forma:

var poligono = new GPolyline([madrid, moscu, estambul, roma, tunez, madrid], "#cccc00", 6, 0.6,opciones_poligono);

Por último ordenamos que se pinte el polígono en el mapa con el método addOverlay().

map.addOverlay(poligono);

Podemos ver un ejemplo que hace este mapa con el polígono con líneas geodésicas.


Polígonos en mapas de Google

El API de Google Maps permite dibujar varios tipos de elementos para superponer sobre losmapas de Google. En nuestro manual sobre el desarrollo con el API de Google Maps yaexplicamos la manera de colocar marcas y líneas. Ahora le toca el turno a los polígonos.

Los polígonos en mapas de Google se colocan de manera similar a como se hacen las líneas,indicando los puntos o vértices, con sus correspondientes coordenadas de latitud y longitud. Enel caso de los polígonos, tenemos que indicar los puntos desde el primero hasta el último,siendo el último punto el mismo que el primero, para que se pueda cerrar el polígono.

La parte novedosa con respecto a las líneas es que en los polígonos se puede indicar no sólo elcolor del borde, sino también el color del relleno con el que queremos pintar la parte internadel polígono.

La clase GPolygon es la encargada de dar soporte a la implementación de polígonos en losmapas. Para crear un polígono tenemos que utilizar el constructor de la clase GPolygon, querecibe una serie de parámetros para la configuración del mismo. La instanciación de unpolígono se realiza de la siguiente manera:

var objeto_poligono = new GPolygon([punto1, punto2, …, punto1], color_borde, tamaño_borde, opacidad_borde,color_relleno, opacidad_relleno);

Voy a listar y explicar los parámetros del constructor de GPolygon para que queden claros:

Puntos de los vértices: Como se puede ver, puede generarse un polígono con un númeroindeterminado de vértices. Lo único es que el recorrido de vértices tiene que estar cerrado, esdecir, empezar y acabar en el mismo punto, para que no se produzcan comportamientosindefinidos a la hora de pintar el polígono. Todos los puntos o vértices tienen que ser indicadoscon un objeto GLatLng, que se compone de las coordenadas de latitud y longitud.

Color del borde: Una cadena con un color RGB en hexadecimal, tal como de definen en HTML.

Tamaño del borde: Un número entero, que es el número de píxeles del borde.

Opacidad del borde: Un número entre 0 y 1. Cuanto más bajo, más transparente y cuantomás alto más opaco.

Color_relleno: Un valor de tipo cadena con el color RGB en hexadecimal.


37


http://www.guiarte.com/mapas-google/desarrolloweb/linea_geodesic.php

http://www.desarrolloweb.com/manuales/97/



http://www.guiarte.com/mapas-google/desarrolloweb/linea_geodesic.php

http://www.desarrolloweb.com/manuales/97/







Opacidad del relleno: También un valor entre 0 y 1, igual que la opacidad del borde.

Para dar la orden a un mapa de Google que dibuje un polígono generado se utiliza el métodoaddOverlay() del objeto mapa, de la clase GMap2, de manera similar a como hicimos al dibujar

líneas:map.addOverlay(objeto_poligono);

Ejemplo de creación de un polígono en un mapa de Google Maps

Ahora veamos un ejemplo de creación de un polígono. En este caso hemos realizado uno cuyoslados se superponen a la muralla de Ávila y cuyo interior sería la ciudad amurallada. Primerohemos tenido que obtener y generar los puntos (latitud y longitud, con la clase GLatLng) de losvértices de la muralla:

var muralla1 = new GLatLng(40.65627360348711, -4.707534313201904);var muralla2 = new GLatLng(40.65884555247438, -4.706525802612305);var muralla3 = new GLatLng(40.658715329592404, -4.70139741897583);var muralla4 = new GLatLng(40.658259547503505, -4.697213172912598);

var muralla5 = new GLatLng(40.656680564044166, -4.696569442749023);var muralla6 = new GLatLng(40.65399457849209, -4.697320461273193);

Luego creamos el polígono utilizando estos puntos y las configuraciones deseadas:

var polygon = new GPolygon([muralla1, muralla2, muralla3, muralla4, muralla5, muralla6, muralla1], "#669933", 5,0.7, "#996633", 0.4);

Esto creará un polígono sobre los vértices sacados de la muralla de Ávila, con color de borde#669933, tamaño de borde 5 píxel, opacidad del borde 0.7 (tirando a opaco), con color delrelleno #996633 y opacidad del relleno 0.4 (tirando más a transparente).

Por último, mostraríamos el polígono con addOverlay().

map.addOverlay(polygon);

Podemos ver el ejemplo en marcha en: http://www.guiarte.com/mapas-google/desarrolloweb/poligonos.php

Recomendamos ver el código fuente de este ejemplo Abre el ejemplo y utiliza el menú "Ver -Código fuente", para ver el código completo de la creación del mapa de Google con el polígono.


Eventos y polígonos en Google Maps

Para desarrollar alguna funcionalidad adicional de los polígonos en los mapas de Google vamosa programar un añadido al script que crea un polígono, que vimos en el artículo anterior, paraocultar y mostrar el polígono por respuesta a un evento de usuario.

Esta funcionalidad de mostrar y ocultar polígonos es común a las distintas overlays que hemostratado con anterioridad en el manual de mapas de Google (API de Google Maps).

El ejercicio se trata de colocar una marca y un polígono en un mapa de Google. Al pulsar lamarca se ocultará el polígono y al volverla a pulsar se mostrará de nuevo, y así sucesivamente.Podemos ver el ejemplo en marcha para entender bien el objetivo de este taller de GoogleMaps.

Como hemos dicho, en el artículo anterior vimos como colocar un polígono en un mapa deGoogle. La única diferencia con este caso es que hemos definido la variable donde vamos a


38


http://www.guiarte.com/mapas-google/desarrolloweb/poligonos.php


http://www.desarrolloweb.com/articulos/poligonos-mapas-de-google.html


http://www.guiarte.com/mapas-google/desarrolloweb/eventos_poligonos.php




http://www.desarrolloweb.com/articulos/poligonos-mapas-de-google.html








colocar el objeto polígono, de la clase GPolygon, como global a toda la página. Esto es porqueeste objeto polygon lo tendremos que acceder desde otras funciones para mostrarlo u ocultarloy si no está como variable global será imposible referenciarlo. (Para crear una variable glogal

basta con declararla fuera de ninguna función, mira el código fuente del ejercicio terminadopara ver cómo hacerlo.)

Hemos creado también, como decíamos, una marca:

var punto_marca = new GPoint (-4.702, 40.6570);var marca = new GMarker(punto_marca);map.addOverlay(marca);

Luego, tenemos que crear el evento "click" a la marca, para que cuando se hace clic sobre ellase llame a una función que se encargue de mostrar u ocultar el polígono. Con el API de GoogleMaps se define un evento de la siguiente manera:

GEvent.addListener(marca, "click", ocultar_mostrar_poligono);

Esto añade el escuchador de evento "click" asociado al objeto contenido en la variable marca.

Cuando y cuando se detecte el evento se ejecuta la función ocultar_mostrar_poligono(). Pordecirlo de otra manera, hemos definido un evento click sobre una marca, para ejecutar lafunción ocultar_mostrar_poligono() cuando se produzca.

Nos quedaría ver el código de la función que muestra u oculta el polígono. Esta función haceuso de la variable global donde hemos almacenado el objeto polígono, para acceder a losmétodos de dicho objeto.

function ocultar_mostrar_poligono(){if (polygon.isHidden()){

//alert("Estaba oculto");polygon.show();

}else{//alert("Estaba mostrandose");

polygon.hide();}}

Lo primero que se hace es ver si el poligono esta o no oculto, con el método isHidden(), conpolygon.isHidden(), que devuelve true en caso que esté oculto y false en caso que estémostrándose.

En caso de estar oculto, llamamos al método que lo muestra, con polygon.show().

En caso que estuviera visualmente activo, llamamos al método para ocultarlo, conpolygon.hide().

Y no hay más misterios, que no hayamos visto con anterioridad en el manual del API deGoogle Maps.

Dejo de nuevo el link para ver el ejemplo en marcha en una ventana aparte. Observar sucódigo fuente para obtener más información.


Superponer una imagen en un mapa de Google

En este artículo del manual de Google Maps vamos a explicar el modo de superponer unaimagen a un mapa, lo que en el API de desarrollo de mapas de Google llaman "Ground


39














Overlays". . Puede servirnos para ofrecer información gráfica del lugar que se estávisualizando, o añadir elementos para llamar la atención del usuario.

La tarea es muy simple, pues sólo necesitamos definir el lugar donde se tiene que pegar laimagen que deseamos mostrar y la URL donde se localiza el archivo gráfico a superponer. Laimagen que coloquemos siempre aparecerá sobre el propio fondo, tapando lo que haya debajo

Las imágenes que se superponen se crean a través de la clase GGroundOverlay, cuyoconstructor recibe una URL o camino relativo de la imagen y los límites del mapa dondecolocarla.

var imagen = new GGroundOverlay("archivo-grafico.jpg", limites_imagen);

Los límites de la imagen son a su vez otra clase, llamada GLatLngBounds, que es como unrectángulo formado por dos puntos geográficos, las coordenadas Sur-Oeste y Norte-Este,definidas a su vez con los valores de latitud y longitud. Podemos ver la siguiente imagen, en laque hemos marcado los dos puntos que necesitamos para definir los bordes o límites de laimagen, 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 claseGLatLng, 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 elmapa con el método del mapa addOverlay(), que habíamos utilizado anteriormente para

superponer elementos en mapas de google como los polígonos.

map.addOverlay(imagen);

Vemos el código completo para hacer un mapa con una imagen superpuesta.

var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(40.491022,-3.8736677),15);map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());

//creo los puntos de los límites de la imagenvar x1 = new GLatLng(40.489259,-3.877358);var x2 = new GLatLng(40.4923928,-3.8675308);


40








//defino los límites donde voy a colocar la imagenvar limites_imagen = new GLatLngBounds(x1, x2);

//Creo un ground overlayvar imagen = new GGroundOverlay("lasrozas.jpg", limites_imagen);

//coloco la imagen o ground overlay en el mapamap.addOverlay(imagen);

Como se ha podido comprobar, superponer una imagen es algo relativamente sencillo, aunquetenemos que definir bien los límites de la imagen para que el renderizado quede bien y no seestire demasiado la foto.

El ejemplo en marcha lo podemos ver en una página aparte.


Incluir las fotos de Panoramio en un mapa de Google

Como debemos saber, Panoramio es un servicio de Google donde los usuarios pueden enviarfotos de cualquier parte del mundo. A través del API de Google Maps podemos, de una maneramuy rápida, sobreponer una capa con las fotos de la base de datos de Panoramio. En esteartículo veremos cómo incluir dichas fotos para enriquecer nuestros mapas con contenidoactualizado y de utilidad.

Este artículo es muy sencillo, al menos así les parecerá a todos los que hayan seguido elManual de programación del API de los Mapas de Google que venimos publicando enDesarrolloWeb.com. Sólo vamos a utilizar una nueva clase que no habíamos visto hasta ahoraque es la clase Glayer.

Esta clase GLayer sirve para superponer capas con información geográfica de otros sitios web.En este caso utilizaremos el sitio web de Panoramio para incluir las fotos dadas de alta, perotambién se puede utilizar GLayer para incluir información de la Wikipedia, por ejemplo.

En el documento http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag podemos encontrar una lista de las posibles capas que por ahora soporta el API de GoogleMaps.

Para crear una capa con GLayer hacemos lo siguiente:

var capa_panoramio = new GLayer("com.panoramio.all");

Simplemente llamamos al constructor de GLayer y le pasamos como parámetro el identificadorde la capa que queremos mostrar. Los identificadores posibles están en el documento ese alque hacía referencia.

Luego, para hacer que el layer se muestre en un mapa de Google utilizamos un método, queya 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


41


http://www.guiarte.com/mapas-google/desarrolloweb/ground-overlays.php


http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag



http://www.guiarte.com/mapas-google/desarrolloweb/ground-overlays.php









hemos creado al llamar al constructor de GLayer.

El código completo para crear un mapa de Google con las fotos de Panoramio sería el

siguiente:function load() {

if (GBrowserIsCompatible()) {var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(40.002,-4.12),8);

var capa_panoramio = new GLayer("com.panoramio.all");map.addOverlay(capa_panoramio);

}}

window.onload=load

Podemos ver el ejemplo en marcha en una página aparte.



42


http://www.guiarte.com/mapas-google/desarrolloweb/fotos-panoramio.php


http://www.guiarte.com/mapas-google/desarrolloweb/fotos-panoramio.php



Documents

Manual Apis Googles