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

com

Manual del API de Google Maps

Autores del manual Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com: Miguel Angel Alvarez Javier Chaure
Director de DesarrolloWeb.com http://www.desarrolloweb.com (20 capítulos) Desarrollador freelance http://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

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

Incluir un Mapa de Google en tu web en 5 minutos
En DesarrolloWeb.com hemos publicado un Manual del API de Google Maps. Este manual trata sobre el desarrollo de aplicaciones utilizando los mapas de Google, enfocado para programadores que quieran aprovechar la potencia de Google Maps en sus desarrollos. Pero en este artículo voy a explicar una manera mucho más sencilla de incluir un mapa de Google en una página web, apta para todo tipo de personas, programadores o no, y que te llevará sólo unos minutos para integrar un mapa personalizado en cualquier web. Quería aclarar antes que con el API de Google Maps podemos hacer todo tipo de aplicaciones para mostrar mapas de cualquier parte del mundo. Por ejemplo, imaginar que estamos haciendo una página de una inmobiliaria y queremos localizar cada una de las casas en venta, además de mostrar fotos y cualquier otro contenido de los inmuebles en el propio mapa. Para esto necesitaremos forzosamente trabajar con el API, que hemos explicado ya en DesarrolloWeb.com y combinar la base de datos de propiedades de la inmobiliaria, con la interfaz de mapas de Google Maps. Pero imaginar un caso mucho más sencillo. Tenéis un cliente al que le estáis creando el sitio web y quiere que tenga un mapa de Google con la localización de sus oficinas y la forma de llegar a ellas. Para hacer este único mapa no es necesario utilizar el API de Google Maps, sino sería suficiente crear un único mapa estático e incrustarlo en la página del cliente. Esto se puede hacer fácilmente desde la propia página http://maps.google.com/ y no necesita ningún conocimiento de programación. Voy a dar una receta por pasos: 1) Entrar en http://maps.google.com/ 2) Pulsar sobre el enlace “Mis Mapas” 3) Ahora pulsar sobre “Crear Mapa nuevo”

4) Nos pedirá que nos autentiquemos con nuestra cuenta Google. Una cuenta vale para todos los servicios de Google, incluido el de mapas. 5) Entonces podemos empezar a crear nuestro mapa.

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.

2

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.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 las opciones para edición del mapa y creación de marcas, líneas, etc. Podréis ver en la esquina superior derecha del mapa una serie de iconos con los que podréis colocar los distintos elementos sobre el mapa.

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

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.

3

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

En la anterior imagen hemos marcado con flechas varios elementos: los datos de la marca, que tenemos que rellenar en la ventana de propiedades. Un icono que se puede pulsar para acceder a otras propiedades de la marca, como la forma, el color, etc. Cuando tengamos todo, podemos pulsar el botón de Aceptar. 6) Cuando esté el mapa creado, podemos dar al botón de Guardar y luego al botón marcado como “Listo”, que aparecen a la izquierda. 7) Obtener el código para incluir el mapa en cualquier web. Este paso tiene varias maneras de hacerse, todas a través del enlace que pone “Enlazar”, situado a la derecha. La opción más versátil es incluir el mapa con un IFRAME, pero debemos personalizar el mapa antes, para que el IFRAME sea exactamente como nosotros queremos. Primero, como decía, pulsamos sobre “Enlazar” y luego pulsamos sobre “Personalizar y obtener vista previa del mapa que se va a insertar”.

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.

4

2) centrar el mapa donde lo queremos y ponerle el zoom deseado y 3) copiar el código que nos dan. para que se pueda ver en este artículo de DesarrolloWeb. En esta página tenemos que indicar: 1) El tamaño del mapa.com Entonces se abrirá una ventana aparte donde dar las propiedades del mapa que vamos a crear para nuestra página web. 8) Pegar el código del mapa en nuestra página web Pues ya está! Una vez pegado el mapa de Google aparecerá tal cual lo hemos personalizado en la página web que deseemos.com tienen el copyright de sus autores. 5 .html © Los manuales de DesarrolloWeb. Manual del API de Google: desarrolloweb. No reproducir sin autorización. Yo he pegado a continuación este mapa de Google de prueba.desarrolloweb.com.Tu mejor ayuda para aprender a hacer webs www.com/manuales/desarrollo-con-api-de-google-maps.

La característica que sin duda más llama la atención del funcionamiento de Google Maps es su interactividad.html © Los manuales de DesarrolloWeb. hacer zoom y elegir el tipo del mapa sin necesidad de recargar la página. nos llevará menos de 5 minutos incorporar un mapa de Google en una página web. AJAX no es una nueva tecnología. Este tipo de aplicación web se encuadra dentro de la tecnología que Adaptive Path ha dado por denominar AJAX (Asynchronous Javascript + XML). No reproducir sin autorización. sin embargo es conveniente hacer una breve reseña para conocer a grandes rasgos su funcionamiento. No vamos a profundizar en este artículo en el planteamiento AJAX.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps. 6 . Podemos pinchar una y otra vez en el mapa para movernos por el mundo. de forma simple y gratuita. En un navegador. sino una combinación de tecnologías ya existentes para Manual del API de Google: desarrolloweb. pero una vez sepamos. y a golpe de clic el usuario puede darse una vuelta virtual por el mundo. A lo largo de este artículo veremos los fundamentos para integrar Google Maps en nuestro website y a través de un ejemplo crearemos un primer mapa usando las funcionalidades más básicas de la API. Podemos haber tardado un poco más para aprender a crear el mapa.com Eso es todo. y del mapeado vectorial completo de otras. disfrutando de fotos aéreas de gran calidad en algunas zonas. todo ello de forma fácil e intuitiva.com tienen el copyright de sus autores.Tu mejor ayuda para aprender a hacer webs www. Object 1 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. Pero lo interesante del servicio es que Google ofrece una API (Application Programming Interface) para todos aquellos interesados en usar este servicio e integrarlo en su propia página.

usaremos CSS y DHTML para la presentación de los datos.com/manuales/desarrollo-con-api-de-google-maps.Desarrolloweb</title> <script src="http://maps.dtd"> <html xmlns="http://www. Los requisitos para empezar a trabajar son realmente escasos. tenemos un "motor" javascript entre la presentación y el servidor.0 Strict//EN""http://www.getElementById("map")). Podemos ver otros ejemplos de aplicaciones AJAX en Google Suggest y Gmail. map. map.addControl(new GLargeMapControl()). que nos hará peticiones de información de forma asíncrona para incorporarla inmediatamente a la presentación de nuestra página. Es importante reseñar que el servidor donde alojemos nuestros scripts para Google Maps ha de ser público. 40. Con un simple editor de html y un servidor público podemos empezar a crear mapas en nuestro dominio. Google nos permite usar Google Maps en nuestra página web de forma gratuita.688788414001465. XML y XSLT para el correcto intercambio y manipulación de la información.w3.desarrolloweb.Tu mejor ayuda para aprender a hacer webs www.w3. entre otras razones porque Google monitorizará el uso que hagamos del mapa. XMLHttpRequest para obtener la información de manera asíncrona (cuando nos lo pida el usuario) y Javascript para coordinar a todos estos agentes a nuestro gusto dependiendo de nuestras necesidades. Como vimos anteriormente en la introducción de este artículo. Esta clave es única para cada usuario de Google Maps y es restrictiva en lo que se refiere a su uso. map. ya que sólo nos permite usar los scripts en uno de los directorios de nuestro servidor.41996541363825).centerAndZoom(new GPoint (-3. sin necesidad de recargarla y hacer una nueva petición de página completa al servidor. un planteamiento que sin duda ofrece grandes posibilidades. De este modo.addControl(new GMapTypeControl()). No reproducir sin autorización. A grandes rasgos esta es la filosofía de funcionamiento de AJAX. viendo los fundamentos de la API que Google nos ofrece. 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.com/maps?file=api&v=1&key=AÑADE_TU_CLAVE_AQUÍ" type="text/javascript"></script> </head> <body> <div id="map" style="width: 400px.org/TR/xhtml1/DTD/xhtml1strict. Una vez que tenemos nuestra clave ya estamos en condiciones de crear nuestro primer mapa: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.setMapType(G_SATELLITE_TYPE). charset=UTF-8"/> <title>Introducción a Google Maps . de acuerdo con sus términos y condiciones de uso.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html.com tienen el copyright de sus autores. 7 .com ofrecer una nueva visión a la hora de crear aplicaciones web. map. como las que podemos ver en práctica con Google Maps.google. el DOM (Document Object Model) para tratar dinámicamente la presentación de estos datos. height: 300px"></div> <script type="text/javascript"> var map = new GMap(document. 3). </script> Manual del API de Google: desarrolloweb.html © Los manuales de DesarrolloWeb. Siguiendo un planteamiento AJAX. A continuación veremos cómo hemos de proceder para realizar nuestro primer mapa.

ya que Google todavía no dispone de mapas vectoriales para España. El script que viene a continuación de la declaración de esta capa es el que genera el mapa. setMapType nos permite especificar el tipo de mapa que queremos visualizar. Por defecto el mapa se muestra sin controles. Esta sentencia genera el mapa especificando como destino el id="map" que hemos asignado previamente para nuestra capa contenedora. Veamos sentencia a sentencia qué hace el código: • var map = new GMap(document. o incluso versiones de menor tamaño (GSmallMapControl) para mapas en tamaño reducido.com </body> </html> Ejecutando este código en un servidor público obtenemos como resultado el siguiente mapa.html © Los manuales de DesarrolloWeb. que nos muestra una vista aérea de Madrid centrada en la Puerta de Alcalá: Como se puede ver en el código. En nuestro caso. tal y como son el control de zoom que vemos a la izquierda y el selector de tipo de mapa. 8 .com tienen el copyright de sus autores.setMapType(G_SATELLITE_TYPE). hemos elegido la vista de satelite que nos muestra la fotografía aérea de la zona.addControl(new GLargeMapControl()).getElementById("map")). map. Manual del API de Google: desarrolloweb. Como puede verse en los selectores situados arriba a la derecha en el mapa.com/manuales/desarrollo-con-api-de-google-maps.Tu mejor ayuda para aprender a hacer webs www. podemos elegir entre las vistas "Map" (mapa vectorial). Nótese que el mapa se adaptará al tamaño que hayamos especificado para esta capa.addControl(new GMapTypeControl()). "Satellite" (fotografía de satélite) y "Hybrid" (combina ambas vistas).desarrolloweb. Dependiendo de nuestras necesidades podemos incorporar estos controles. • map. hemos creado una única capa con id="map" destinada a contener nuestro Google Map. • map. addControl nos permite incorporar elementos de control al mapa. No reproducir sin autorización.

Con esta sentencia indicamos a nuestro GMap qué lugar queremos que muestre. que estos ejemplos de Mapas de Google están explicados para el API 1 de Google Maps.com tienen el copyright de sus autores. 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. siendo el nivel 1 el más cercano y el 16 el más alejado. Pero atención. Sofistiquemos un poco nuestro mapa añadiéndole unos marcadores. No reproducir sin autorización. siguiendo el API 2 de Google Maps. Google Maps ubica los puntos en los mapas a partir de su latitud y longitud. crear un mapa y centrarlo en un punto es realmente simple. de 1 a 16.html © Los manuales de DesarrolloWeb.Tu mejor ayuda para aprender a hacer webs www. mediante el método centerAndZoom. y para ello lo más adecuado es usar alguno de los servicios de geocoding disponibles en la red.us y geonames. Los parámetros son un GPoint (que generamos a continuación a partir de su latitud y longitud) y el nivel de zoom que queremos mostrar.41996541363825). en este caso la Plaza Manual del API de Google: desarrolloweb. en el que con simplemente pulsar en cualquier punto del mapa obtendremos la latitud y longitud deseadas para ese punto. El mapa con nuestros puntos de interés añadidos nos quedará de la siguiente manera: Lo primero que necesitamos son las coordenadas de los nuevos puntos. Pero si queremos ver explicaciones actualizadas. de tal forma que podamos ubicar determinados puntos de interés en el mapa.org.centerAndZoom(new GPoint (-3.com/manuales/desarrollo-con-api-de-google-maps. Nota: El artículo continua en Desarrollar con Google Maps II. 9 .com • map. tales como Geocoder.688788414001465. podemos consultar el artículo: Mapas de Google API 2. en los que podemos realizar búsquedas a partir del nombre de la ubicación que buscamos.desarrolloweb. Existen otros servicios de geocoding disponibles de forma gratuita en la red que no exigen buscar el punto físico en el mapa. 40. Esta información debemos suministrarla nosotros. Uno de ellos es por ejemplo el de InfoSports. 3).

addControl(new GLargeMapControl()). </script> </body> </html> Como puede verse.html © Los manuales de DesarrolloWeb. //Plaza de Cibeles var point = new GPoint (-3.6941099166870117. charset=UTF-8"/> Manual del API de Google: desarrolloweb. No reproducir sin autorización.w3. map.41996541363825).dtd"> <html xmlns="http://www.com/maps?file=api&v=1&key= AÑADE_TU_CLAVE_AQUÍ" type="text/javascript"></script> </head> <body> <div id="map" style="width: 400px. map. El código que muestra este segundo mapa es el siguiente: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. declaramos una variable point a partir de la cual creamos el marcador para posteriormente mostrarlo en el mapa con addOverlay. //Puerta de Alcalá var point = new GPoint (-3.Tu mejor ayuda para aprender a hacer webs www.dtd"> <html xmlns="http://www.setMapType(G_SATELLITE_TYPE).693079948425293. 40.org/TR/xhtml1/DTD/xhtml1strict. pero no aportan ninguna información al visitante. map.Desarrolloweb</title> <script src="http://maps. 3). 40. Lo apropiado sería satisfacer la curiosidad del usuario proporcionándole algo de información asociada a ese punto.addOverlay(marker). 40.w3. A continuación asociaremos un marcador a cada uno de los puntos y lo mostraremos en el mapa.w3.41940998761056).com de Cibeles y la Plaza de Neptuno.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html.addOverlay(marker). charset=UTF-8"/> <title>Introducción a Google Maps .google.getElementById("map")).org/TR/xhtml1/DTD/xhtml1strict. map.688788414001465. height: 300px"></div> <script type="text/javascript"> var map = new GMap(document. var marker = new GMarker(point).addOverlay(marker).org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html. var marker = new GMarker(point). //Plaza de Neptuno var point = new GPoint (-3.w3. map.centerAndZoom(point.com/manuales/desarrollo-con-api-de-google-maps. ya tenemos un mapa creado con una serie de puntos señalados sobre él. En esta ocasión hemos centrado el mapa en el último punto declarado.desarrolloweb. 10 .4154238545226). Estupendo.addControl(new GMapTypeControl()). var marker = new GMarker(point).com tienen el copyright de sus autores.0 Strict//EN""http://www. map. el correspondiente a la Plaza de Cibeles. map.0 Strict//EN""http://www. Añadamos pues algo más de información a nuestros marcadores mostrando unas ventanas informativas que nos indiquen el nombre de la ubicación física sobre la que nos encontramos: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

getElementById("map")). nombre). //Plaza de Cibeles var point = new GPoint (-3. No reproducir sin autorización.com tienen el copyright de sus autores.html © Los manuales de DesarrolloWeb. map.688788414001465. 40. map. var nombre = "Plaza de Neptuno" var marker = createMarker (point. return marker.com <title>Introducción a Google Maps .com/manuales/desarrollo-con-api-de-google-maps.4154238545226). 40. nombre).addOverlay(marker).addOverlay(marker).desarrolloweb. function createMarker(point.Tu mejor ayuda para aprender a hacer webs www. function() { marker. </script> </body> </html> Este código nos genera el siguiente mapa. en el que al pulsar sobre el punto de la Plaza de Cibeles… Manual del API de Google: desarrolloweb. map.google. height: 300px"></div> <script type="text/javascript"> var map = new GMap(document.setMapType(G_SATELLITE_TYPE). 11 . var nombre = "Puerta de Alcalá". nombre). GEvent. 3).Desarrolloweb</title> <script src="http://maps. map.6941099166870117.addListener(marker.41996541363825).addControl(new GMapTypeControl()). //Plaza de Neptuno var point = new GPoint (-3.com/maps?file=api&v=1&key= AÑADE_TU_CLAVE_AQUÍ" type="text/javascript"></script> </head> <body> <div id="map" style="width: 400px. }).41940998761056). map.693079948425293.addOverlay(marker). 'click'. } //Puerta de Alcalá var point = new GPoint (-3. 40. map. nombre) { var marker = new GMarker(point).openInfoWindowHtml(nombre).addControl(new GLargeMapControl()). map. var nombre = "Plaza de Cibeles" var marker = createMarker (point.centerAndZoom(point. var marker = createMarker (point.

De esta manera cada vez que se hace un clic sobre el marker se muestra en la infoWindow la información especificada en el parámetro "nombre". Hay que reseñar que para asociar la aparición de la ventana con el clic del usuario sobre nuestro punto tenemos que asociarle tal evento. Esta pequeña función recibe como parámetros el GPoint donde queremos ubicar el marker. 12 .com Efectivamente se muestra la ventana informativa con los datos asociados a ese punto.Tu mejor ayuda para aprender a hacer webs www. con lo aquí aprendido tenemos ya el bagaje necesario para empezar a profundizar en la API de Google Maps y empezar a crear scripts más avanzados. function() { marker. y un parámetro "nombre" que contiene la información que queremos mostrar en la ventana informativa asociada. Pese a no haber profundizado sobre la verdadera potencialidad del servicio. 'click'. Para ello podemos consultar el artículo Mapas de Google API 2.com tienen el copyright de sus autores. Ahora estos códigos deben actualizarse siguiendo el API 2 de Google Maps.desarrolloweb. }). No reproducir sin autorización. Nota: Hemos visto aquí explicada el API 1 de Google Maps. de modo que podríamos incluir una maquetación al contenido de nuestra nueva infoWindow. que proporcionan las herramientas más rudimentarias para manejar el servicio. En este ejemplo hemos creado una función que nos crea los markers y sus correspondientes infoWindows para ahorrar algo de código.html © Los manuales de DesarrolloWeb.openInfoWindowHtml(nombre).addListener(marker.com/manuales/desarrollo-con-api-de-google-maps. A lo largo de este artículo hemos visto las funciones más básicas de Google Maps. Nótese que hemos usado openInfoWindowHtml. residente en el uso de XML. que es lo que se hace en la sentencia: GEvent. que toma su parámetro como código html. Artículo por Javier Chaure Manual del API de Google: desarrolloweb.

Evento onload function load() { //comprobamos si el navegador es compatible con los mapas de google if (GBrowserIsCompatible()) { //instanciamos un mapa con GMap. <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html.html © Los manuales de DesarrolloWeb. para interacción con el usuario map. por lo que se hacía necesaria una revisión para mostrar códigos de integración de Google Maps que sean compatibles con el API que se utiliza ahora. map.-3.com ya habíamos publicado un par de artículos sobre los Mapas de Google que explicaban las reglas más básicas para empezar a publicar mapas satélite en nuestro sitio. //añadimos controles al mapa.Tu mejor ayuda para aprender a hacer webs www. Sin embargo.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. porque explican algunas cosas básicas como obtener una llave (Key) de Google.desarrolloweb. • • 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.com tienen el copyright de sus autores. Bueno.com Mapas de Google API 2 Seguramente ya conozcamos los Mapas de Google. pasándole una referencia a la capa o <div> donde queremos mostrar el mapa var map = new GMap2(document. 5).getElementById("map")).addControl(new GOverviewMapControl()). Ahora vamos a ver un código para crear un mapa conforme a las especificaciones del Google Maps API 2.charset=ISO-8859-1"> <title>Ejemplo de Google Maps API</title> <script src="http://maps.68). un sistema que permite acceder a fotos de satélite de todo el mundo que ha tenido bastante éxito entre los Internautas. //Esta función se llama cuando la página se ha terminado de cargar. 13 . } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px. No reproducir sin autorización. Si estamos leyendo este artículo hasta podremos saber que los Mapas de Google tienen un API a través de la cual podemos integrarlos como servicio en una página web.addControl(new GLargeMapControl()).setCenter(new GLatLng(40. map.addControl(new GMapTypeControl()). los artículos anteriores siguen siendo muy interesantes para leer. registrándonos en el sitio de Google Maps. todo de manera gratuita. height: 400px"></div> </body> Manual del API de Google: desarrolloweb. //centramos el mapa en una latitud y longitud deseadas map. .google.407. Esto permite que en una página web desarrollada por nosotros podamos colocar mapas y vistas satélite de distintos puntos del planeta. pues en DesarrolloWeb.com/manuales/desarrollo-con-api-de-google-maps. para poder utilizar los mapas en nuestro sitio.

Hay que ver que hemos definido un evento onload="load()".desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps. Luego podemos pasar a la función que genera el mapa.com tienen el copyright de sus autores. vamos a ver lo que hay en el body de la página. Ahora nos fijamos en el código Javascript. que sirve para llamar a la función que genera el mapa. Esto es algo que está muy claro en la documentación del API. Se trata del método de la clase GMap2 setCenter(): setCenter() se tiene que invocar justo después de instanciar el mapa!!! Si intentamos instanciar el mapa y hacer cosas antes de centrarlo no funcionará. que se carga cuando se termina de mostrar la página (la llamamos por el evento onload). este código necesita que indiquemos nuestra propia Key del API de Google Maps. Esa función está bastante comentada y además quiero dejar para artículos posteriores distintos pormenores de la generación de mapas. pero que como es un poco larga de leer. que hemos conseguido al registrarnos. pero es muy importante llamar la atención sobre un punto crítico. Artículo por Miguel Angel Alvarez Manual del API de Google: desarrolloweb. aunque esté más tarde en el código. No reproducir sin autorización. Ahora a dar unas explicaciones adicionales: Primero.html © Los manuales de DesarrolloWeb. En mis pruebas me falló porque intentaba ponerle un tipo de mapa (vista satélite) y luego lo centraba. El problema es que no sale ningún error específico y es difícil hallar el problema.com </html> El código está comentado para una mejor comprensión.Tu mejor ayuda para aprender a hacer webs www. El API de Google Maps reconocerá la anchura y altura del contenedor para mostrar un mapa justamente ocupando ese espacio. hasta que conseguí dar con el error. La tendremos que poner sustituyendo el texto =#TU LLAVE GOOGLE MAPS#. que me dio un quebradero de cabeza cuando estaba probando los mapas. Dentro del cuerpo de la página nos fijamos en la etiqueta div donde se mostrará el mapa: <div id="map" style="width: 615px.google. una vez se ha terminado de cargar la página. es fácil que no nos percatemos. 14 . <script src="http://maps. Primero se incluye la librería donde está el API Javascript para los mapas de Google. height: 400px"></div> El tamaño definido con estilos a esta capa es importante.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#" type="text/javascript"></script> Si nos fijamos. porque será el tamaño de visualización del mapa.

html © Los manuales de DesarrolloWeb.setMapType(G_SATELLITE_MAP). //La llamamos cuando la página se ha terminado de cargar.com Tipos de mapa en Google Maps Al desarrollar con Google Maps podemos escoger el tipo de mapa que verán los usuarios. Mostramos una vista satélite en este caso. <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html. El método setMapType() recibe el tipo de mapa que se desea ver. etc y si hacemos más zoom sobre una población veremos los nombres de las calles. pasándole una referencia a la capa o <div> donde queremos mostrar el mapa var map = new GMap2(document. Sobre las fotos satélite se pintan encima las distintas localizaciones. entre las distintas vistas predefinidas como son la vista satélite. height: 400px"></div> </body> </html> Con este código tendremos una vista satélite de Barcelona centrada en la plaza donde está la estatua de Colón señalando con el dedo. No reproducir sin autorización.com/manuales/desarrollo-con-api-de-google-maps.Tu mejor ayuda para aprender a hacer webs www. 17).charset=ISO-8859-1"> <title>Ejemplo de Google Maps API</title> <script src="http://maps.375987390149106. calles. G_HYBRID_MAP Este mapa combina la vista satélite y la vista normal. 15 . pero si ampliamos veremos las ciudades importantes. En principio aparecen los distintos países. Este mapa es el definido por defecto. con los nombres de localizaciones. vista de calles o vista híbrida (satélite y calles en modo semi-transparente. que es el mapa político. } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px.setCenter(new GLatLng(41. carreteras. Veamos un mapa de Google en el que definimos el tipo de mapa. barrios. G_SATELLITE_MAP Este mapa permite ver el mundo con imágenes tomadas desde satélite. //centramos el mapa en una latitud y longitud deseadas map.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. 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" Manual del API de Google: desarrolloweb.1778035163879395). Para definir el tipo de mapa en un mapa de Google tenemos el método setMapType() de la clase GMap2. En principio existen los siguientes tipos de mapa: G_NORMAL_MAP Es para un mapa normal.getElementById("map")).desarrolloweb. Evento onload function load() { //comprobamos si el navegador es compatible con los mapas de google if (GBrowserIsCompatible()) { //instanciamos un mapa con GMap. etc.google. map.com tienen el copyright de sus autores. 2. etc. plazas.

com tienen el copyright de sus autores. 0.google. Veremos como sale entonces el mapa de calles. donde especificamos otro tipo de mapa: map. Veremos ahora como hacer un mapa poniendo un control con tres botones.com • por la clave de usuario del API proporcionada en Google al registrarnos para usar sus mapas en nuestro sitio web. Habría que poner esta línea en el código. Nota: Existen otros artículos anteriores donde hemos explicado temas adicionales de los mapas de Google que deberías conocer para entender este código. pasando por parámetro una instancia del tipo de control que se desea incluir.desarrolloweb. si deseamos un mapa híbrido. sólo tendremos que cambiar la línea: map.addControl(new GMapTypeControl()). <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html. http://maps.charset=ISO-8859-1"> <title>Ejemplo de Google Maps API</title> <script src="http://maps.setMapType(G_NORMAL_MAP). map.getElementById("map")). después de centrar el mapa en la posición deseada. map. No reproducir sin autorización. Esto se hace con el método addControl de la clase GMap2.com/maps?file=api&v=2&key=AQUITU-CLAVE La línea map. pinchando los cuales el usuario puede seleccionar el tipo de vista que desea. 16 .google. También podemos probar a quitar esa línea donde especificamos el tipo de mapa. El mapa estará centrado en Peñíscola.setMapType(G_SATELLITE_MAP).35868573007256.Tu mejor ayuda para aprender a hacer webs www. Artículo por Miguel Angel Alvarez Control para cambiar el tipo de mapa de Google Se pueden incluir varios controles interactivos en los mapas de Google. Es lo mismo que si especificásemos el tipo de mapa normal.addControl(new GMapTypeControl()). provincia de Castellón.4062795639038086). es donde cargamos el tipo de vista.setCenter(new GLatLng(40.com/manuales/desarrollo-con-api-de-google-maps. donde tenía la sede el Papa Luna.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.setMapType(G_SATELLITE_MAP). por ejemplo para hacer zoom sobre el mapa o para alternar entre distintos tipos de mapa. map. 16).html © Los manuales de DesarrolloWeb.setMapType(G_HYBRID_MAP). Manual del API de Google: desarrolloweb.: Google Maps API 2 Ahora. Por esta otra línea. Veamos el código completo de un mapa que tiene el control para cambiar el tipo de vista. map.

Lo veremos ahora. otros mapas existentes. En el control de selección de tipo de mapa no aparece por defecto el tipo de mapa físico.desarrolloweb. Por ejemplo: map. como el mapa físico (G_PHYSICAL_MAP). con lo que no se puede seleccionar por el usuario. etc. nos aparecen tres botones.com/manuales/desarrollo-con-api-de-google-maps. Para indicar el tipo de mapa que deseamos que se muestre se hace de esta manera: map.Tu mejor ayuda para aprender a hacer webs www. Definir los tipos de mapa del control de selección de tipos de mapa Ahora.com tienen el copyright de sus autores. cualquiera que puedan sacar en el futuro. o incluso mapas creados por nosotros mismos. indicando como parámetro el nombre del tipo de mapa que queremos incluir.addMapType(G_PHYSICAL_MAP). ciudades con sus calles. Por tanto. G_HYBRID_MAP: Un mapa que superpone la vista de calles encima de la vista satélite. height: 400px"></div> </body> </html> } Artículo por Miguel Angel Alvarez 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. para incluir nuevos mapas.html © Los manuales de DesarrolloWeb. que muestra la tierra con un dibujo de su superficie que representa las montañas. para incluir otros tipos de mapas en el control de selección de tipo de mapa.setMapType(G_SATELLITE_MAP). Al menos cuando iniciamos este manual del API de Google Maps no existía.com map. para cambiar entre cualquiera de estos tipos de mapas. El mapa físico ha sido presentado hace relativamente poco tiempo. Ahora bien. No reproducir sin autorización. debemos utilizar el método addMapType() de la clase GMap2. ríos y otros accidentes geográficos. a no ser que nosotros hagamos algo para habilitarlo. 17 . G_SATELLITE_MAP: mapa de imágenes de satélite. nosotros podemos aumentar la disponibilidad de tipos de mapas de Google. Manual del API de Google: desarrolloweb. Por eso cuando colocamos el control para cambiar el tipo de mapa. Se trata del mapa físico. de países. presentado hace poco en el sistema de Google Maps.setMapType(G_PHYSICAL_MAP). en los artículos publicados anteriormente no habíamos hablado de la posibilidad de integrar un mapa físico. Los tipos de mapas disponibles para el usuario por defecto a la hora de trabajar con Google Maps son los que habíamos visto con anterioridad: • • • G_NORMAL_MAP: es un mapa político. } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px.

Manual del API de Google: desarrolloweb.addMapType(G_PHYSICAL_MAP).removeMapType(G_HYBRID_MAP).setMapType(G_PHYSICAL_MAP). Es decir. a través de un API en Javascript. satélite y físico.addMapType(G_PHYSICAL_MAP).com Esto parece que no es un paso obligatorio para poder mostrar un tipo de mapa. para hacer un mapa de Google físico con map.com/manuales/desarrollo-con-api-de-google-maps. como funciona el API en este sentido y qué tipos de controles hay disponibles. map. indicando un parámetro con el nombre del tipo de mapa que queremos deshabilitar del control.desarrolloweb. Por ejemplo: map.Tu mejor ayuda para aprender a hacer webs www. los mapas de Google se pueden integrar en la página de cualquier persona que desee. para eliminar del control de selección de tipos de mapas el mapa híbrido. map. para definir que el mapa que debe mostrarse desde el principio debe ser el mapa físico.removeMapType(G_HYBRID_MAP). function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document. lo hacemos a través del método removeMapType() de la clase GMap2.8736677). Y por último setMapType(G_PHYSICAL_MAP).removeMapType(G_HYBRID_MAP). por lo que muchas de las explicaciones para trabajar con los mapas de Google la tenemos que consultar en otros capítulos del mencionado manual.-3. Artículo por Miguel Angel Alvarez Controles en mapas de Google Como ya debemos de saber. sino para que aparezca en el control y el usuario lo pueda seleccionar. para indicar que en el control de selección de tipo de mapa se debe incluir el mapa físico. para quitar un tipo de mapa del control. map. Antes que nada decir que este artículo viene a ampliar la información del manual Desarrollo con el API de Google Maps. 18 .setCenter(new GLatLng(40. En este caso vamos a ver cómo incluir controles de usuario dentro de un mapa de Google.6).201022. Podemos ver el ejemplo en marcha en una página aparte. Ejemplo de mapa de Google con dibujo tipo físico Para acabar voy a mostrar cómo crear un mapa de Google físico. map.addControl(new GMapTypeControl()).com tienen el copyright de sus autores.html © Los manuales de DesarrolloWeb. El método addControl(new GmapTypeControl()) para incluir en la interfaz el control de usuario para cambiar el tipo de mapa. map. } } El código que podemos ver incluye llamadas a los métodos: addMapType(G_PHYSICAL_MAP).getElementById("map")). Puedes ver el código fuente de la página para ver el código del ejemplo completo. Ahora. No reproducir sin autorización. map.setMapType(G_PHYSICAL_MAP) no es necesario que lo haya incluido previamente con map. que además tenga un control que permita cambiar entre los tipos de mapa político.

Pero no tiene botones para moverse por el mapa. No reproducir sin autorización. Por ejemplo.Tu mejor ayuda para aprender a hacer webs www. Como los controles ya están predefinidos en el API de Google Maps. a través del cual también podemos movernos.desarrolloweb. mapa. pero más pequeño. para efectuar acciones como serían hacer zoom. Con ella creamos el objeto mapa y luego a este objeto con addControl() le asociamos los controles deseados. con una especie de regla donde se pueden escoger de las distintas aproximaciones de la vista. La clase GMap2 es la que se utiliza para instanciar un mapa de google. es meramente informativo. Podemos incluir todos los controles que deseemos haciendo varias llamadas al método addControl(). 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. El método addControl() recibe una instancia del control de usuario que se desea crear. mapa satélite y mapa híbrido -calles y carreteras sobre el fondo de satélite) GOverviewMapControl: Con este control aparece un pequeño mapita en la esquina inferior derecha donde aparece una vista general con menos zoom del mapa actual. 19 . seleccionar entre tipos de mapa (satélite. Veamos un ejemplo completo de un mapa de Google que tiene una serie de controles de usuario: Manual del API de Google: desarrolloweb. GSmallMapControl: Es otro control de usuario para hacer zoom y moverse por el mapa.html © Los manuales de DesarrolloWeb. Todos estos controles están ya creados y existen instrucciones y clases para incluirlos fácilmente en un mapa de Google. si tenemos el mapa en un objeto llamado "map". Con este control no se puede interaccionar.com tienen el copyright de sus autores. que también aparece en la esquina superior izquierda. simplemente tenemos que asociarlos al mapa que estamos creando. GScaleControl: Este es un control que simplemente informa sobre la escala actual del mapa. GMapTypeControl: Este control incluye tres botones para cambiar entre distintos tipos de mapa (mapa politico de calles y carreteras. ejecutaremos el método addControl() de esta manera: map. Para ello se utiliza un método de la clase GMap2 llamado addControl(). Aunque cualquier desarrollador podría crear sus propios controles. Añadir controles a un mapa de Google Los controles de usuario para los mapas de Google que hemos visto se incluyen con una sencilla instrucción Javascript a la hora de crear el mapa. o moverse por un mapa pequeño más general.com Tipos de controles de usuario Los controles de usuario de los mapas de Google (controls en inglés) son interfaces desde donde el usuario puede interaccionar con el mapa. que aparece en la esquina superior izquierda que simplemente tiene un botón para ampliar el zoom y otro botón para reducirlo. pasando como parámetro distintas instancias de los controls que queremos incluir.addControl(new GMapTypeControl()). híbrido). Este control aparece en la parte superior izquierda. GSmallZoomControl: Un control de usuario muy pequeñito.com/manuales/desarrollo-con-api-de-google-maps.

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. Lo explicaremos en dos pasos.html Artículo por Miguel Angel Alvarez Insertar una marca en un mapa de Google Veamos rápidamente cómo insertar una marca en un mapa de Google. pero por ahora podemos referiros a la documentación del API Google Maps para obtener más información: http://www. también de la clase GMap2. Este es un tema que trataremos más adelante. Es un paso muy sencillo pero importante en el manejo del API de Google Maps. map. 20 .addControl(new GMapTypeControl()). map.addControl(new GSmallZoomControl()). por lo que muchas explicaciones nos las vamos a saltar porque ya las hemos presentado en artículos anteriores. map. el desarrollador puede crear sus propios controles para incluirlos en sus mapas. map. Ahora veamos como crear la marca. No reproducir sin autorización.4062795639038086). 12). que nos sirve para señalar un punto preciso en un mapa.addControl(new GScaleControl()).com <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html.google.com/manuales/desarrollo-con-api-de-google-maps. que sirve para insertar un elemento sobre el mapa. map.35868573007256.setCenter(new GLatLng(40. La variable marker contendrá la marca que se quiere insertar en el mapa.addControl(new GOverviewMapControl()).getElementById("map")).html © Los manuales de DesarrolloWeb. map. En el código anterior el objeto map sería una instancia de la clase GMap2.com/apis/maps/documentation/controls.setMapType(G_SATELLITE_MAP).desarrolloweb. 0. Manual del API de Google: desarrolloweb.com tienen el copyright de sus autores.addOverlay(marker).charset=ISO-8859-1"> <title>Ejemplo de Google Maps API</title> <script src="http://maps. map.Tu mejor ayuda para aprender a hacer webs www. Este artículo está englobado dentro del manual de manejo del API de los mapas de Google.google. Para insertar marcas tenemos un método. height: 400px"></div> </body> </html> Como habíamos dicho. } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px. El método en concreto se llama addOverlay() y recibe como parámetro la marca que se quiere insetar.

41689826118782. que recibe en el constructor la longitud y latitud de ese punto. 21 . Para crear un punto se tiene que utilizar la clase GPoint. creado en el paso anterior. } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 615px.getElementById("map")).charset=ISO-8859-1"> <title>Ejemplo de Google Maps API</title> <script src="http://maps. var point = new GPoint (-3. cuando la instanciamos a partir de su constructor.7034815549850464).setCenter(new GLatLng(40. 2) Creamos la marca Para crear la marca simplemente utilizamos la clase GMarker. map. var marker = new GMarker(point). Vamos a ver aquí como asociar un icono a una marca. Por ahora colocaremos sólo el único valor que es obligado indicar. Veamos el código completo de un mapa de Google con una marca en la plaza "Puerta del Sol" de Madrid.google.7034815549850464. height: 400px"></div> </body> </html> Cambiar el icono a una marca La marca se crea con un icono por defecto.addOverlay(marker).Tu mejor ayuda para aprender a hacer webs www.com/manuales/desarrollo-con-api-de-google-maps. No reproducir sin autorización.7034815549850464. var point = new GPoint (-3. var marker = new GMarker(point).41689826118782). pero podemos cambiarlo para personalizar el estilo de nuestros mapas.com tienen el copyright de sus autores. como una especie de chincheta roja.-3. que se define por una longitud y una latitud (coordenadas x. 17). Manual del API de Google: desarrolloweb.html © Los manuales de DesarrolloWeb. Aunque luego veremos otros detalles de interés que se pueden personalizar en las marcas. y en el plano terrestre). 40.desarrolloweb. map. Ejemplo completo Eso es todo lo que necesitamos saber por ahora. <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html. map.41689826118782).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.addControl(new GLargeMapControl()). que en su constructor debe recibir varios valores. que es el punto sobre el que colocar la marca. map.com 1) Creamos un punto La marca debe situarse en un punto concreto del mapa.setMapType(G_SATELLITE_MAP). 40.

por simplificar la tarea. Habría que hablar más sobre la creación y modificación de iconos. que son unas cuantas. vamos a dar aquí un pequeño ejemplo de cómo crear un icono que podrá servir para los interesados en cambiar la imagen por defecto del icono. Las referencias completas de esta clase conviene leerlas en la propia documentación del API de Google Maps. En la siguiente línea se modifica la imagen del icono.org/mapas-google/arrow_down. Además.image = "http://www.desarrolloweb. 22 . que ya explicamos anteriormente y que conviene conocer.com El constructor de la marca recibe dos parámetros. No obstante. Manual del API de Google: desarrolloweb.png". pero lo dejaremos para más adelante. Este artículo está englobado dentro del manual de Trabajo con el API de Google Maps.com/manuales/desarrollo-con-api-de-google-maps. porque puede resultar minucioso ajustar los distintos parámetros para conseguir un icono con el formato deseado. var marker = new GMarker(point. vamos a crear un icono que es copia del icono que aparece por defecto: var iconoMarca = new GIcon(G_DEFAULT_ICON). En este caso.html © Los manuales de DesarrolloWeb. miIcono. Crear un icono desde cero es complicado. hay que decir que en este artículo vamos a realizar trabajos como crear marcas en los mapas. al menos los necesarios para crear iconos con la imagen personalizada. porque requiere ajustar muchos parámetros.Tu mejor ayuda para aprender a hacer webs www. la variable miIcono en este caso es un objeto de la clase GIcon. a partir de G_DEFAULT_ICON.com tienen el copyright de sus autores. que puede crear así: var miIcono = new GIcon(G_DEFAULT_ICON). que es una constante del API que contiene el icono por defecto. Lo que tenemos que saber a la hora de crear un icono son las diferentes propiedades de la clase GIcon. Entonces. Artículo por Miguel Angel Alvarez Personalizar iconos en los mapas de google Crear y definir iconos para mapas de Google es algo que nos puede llevar un tiempo. Lo primero que tenemos que hacer es definir el icono personalizado. En caso que no se especifique un icono se utiliza el G_DEFAULT_ICON. que es opcional. miIcono). pero el API nos permite crear iconos copiando las características de otros iconos. Luego podremos crear marcas utilizando este icono. un icono nuevo pero con todas las carácterísticas cargadas del G_DEFAULT_ICON. el primero obligado es el punto geográfico y el otro es el icono. Es decir. porque es un tema que requiere mayor detenimiento para dominarlo.midominio. No reproducir sin autorización. con la primera sentencia se crea un nuevo icono. Pero nosotros vamos a explicar esos parámetros. porque los iconos se pueden personalizar en muchos parámetros distintos. asignando un nuevo valor a su atributo image.

Para acabar. iconoMarca.18).shadow = "/images/sombra-bandera2. a través del atributo iconSize.shadowSize = tamanoSombra. Hemos elegido ese formato porque permite una transparencia para las imágenes. 23 . Es el punto de la imagen que debe aparecer en el punto geográfico donde se coloca la imagen. que es donde está la puntita de la bandera.image = "/images/bandera-roja. alterando el atributo image de la instancia del icono que había hecho antes.com tienen el copyright de sus autores. tendremos que definir la imagen que utilizaremos para la sombra y el tamaño de la imagen utilizada. var marker = new GMarker(point. A continuación. En el constructor de la clase GMarker indicamos el punto donde se debe colocar la marca y el icono que que se desea.iconAnchor = new GPoint(11. para que la imagen que pongamos apunte al lugar correcto. Este sirve para reposicionar el lugar donde se colocan los iconos. No reproducir sin autorización.png". Los tamaños en el API se define con un objeto de la clase GSize. Del mismo modo. hay que ajustar bien donde queremos que queden. debemos de definir el tamaño de la imagen de este icono. G_DEFAULT_ICON es una constante del API de Google Maps. Es una Manual del API de Google: desarrolloweb. iconoMarca). 16). como hemos cambiado el tamaño de la imagen del icono por defecto (que habíamos copiado para crear el icono personalizado). Dicho de otra manera. que está formado por las coordenadas relativas a la esquina superior izquierda de la imagen donde debe estar enlazado el icono.png". 16). iconoMarca. Al iconAnchor se les pasa un punto. sólo nos queda por editar el atributo iconAnchor.com Esto crea una variable iconoMarca que es una instancia de la clase GIcon. Para acabar habría que señalar: 1) URLs de las imágenes que hemos utilizado en el ejemplo: http://www.iconSize = tamanoIcono. var tamanoSombra = new GSize(22.html © Los manuales de DesarrolloWeb. que contiene el icono por defecto.com/images/bandera-roja.guiarte. Ahora podemos hacer una marca con este icono que hemos creado así. ahora hay que editar el atributo iconAnchor para que apunte al lugar correcto. (Hablaré sobre formatos de las imágenes de los iconos más tarde en este artículo) iconoMarca. Como se pueden hacer iconos con imágenes de distintos tamaños. var tamanoIcono = new GSize(17. Luego vamos a definir la imagen del icono.17). iconoMarca.png Los formatos de las imágenes los hemos creado como PNG de 24 bits con transparencia. En nuestro caso el punto (11.com/images/sombra-bandera2. (Ver imagen del ejemplo).guiarte. Primero hemos creado el tamaño del icono y luego lo hemos asociado al atributo iconSize.Tu mejor ayuda para aprender a hacer webs www. iconoMarca.desarrolloweb.png http://www. donde hemos utilizado G_DEFAULT_ICON como icono a copiar.com/manuales/desarrollo-con-api-de-google-maps.

que tiene que ser forzosamente medio transparente para que quede bien.3).setMapType(G_SATELLITE_MAP). Manual del API de Google: desarrolloweb. 24 .addControl(new GLargeMapControl()).0).openInfoWindowHtml("<span style='font-size: 8pt. De hecho. .pais) { //CREO LA MARCA EN EL PUNTO Y CON EL ICONO DESEADO var marker = new GMarker(point.w3. var tamanoIcono = new GSize(17. } var point = new GPoint (-4.0 Strict//EN" "http://www. iconoMarca. No reproducir sin autorización.nombre. //map. function createMarker(point. //map. var continente = "europa".org/TR/xhtml1/DTD/xhtml1-strict.desarrolloweb.addControl(new GOverviewMapControl()). 'click'. como Photoshop.continente.html'>Ir al destino " + nombre + "</a></span>").setCenter(new GLatLng(33.dtd"> <html xmlns="http://www.iconSize = tamanoIcono.getElementById("map")). //DEFINO EL ICONO var iconoMarca = new GIcon(G_DEFAULT_ICON). function() { marker. iconoMarca.shadowSize = tamanoSombra.addListener(marker.18). Podemos utilizar un formato PNG 24 bits con transparencia en los más habituales programas de edición gráfica. iconoMarca.google.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html.iconAnchor = new GPoint(11. font-family: verdana'>" + nombre + "<br><a target='_parent' href='/destinos/" + continente + "/" + pais + ". 16). return marker.17). nosotros hemos utilizado Photoshop para hacer o retocar las imágenes utilizadas.com/manuales/desarrollo-con-api-de-google-maps.com/mapas-google/desarrolloweb/ej_icono. map. GEvent. //map.Tu mejor ayuda para aprender a hacer webs www. var tamanoSombra = new GSize(22.0. map.shadow = "/images/sombra-bandera2. 2) El enlace para ver el ejemplo: http://www.setMapType(G_NORMAL_MAP).w3. }).40).charset=ISO-8859-1"> <title>Mapa de Google</title> <script src="http://maps. map.png".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.php 3) El código completo del ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. iconoMarca. porque no hace halos blancos alrededor del dibujo.com tienen el copyright de sus autores.image = "/images/bandera-roja.com transparencia avanzada con respecto a la que hemos utilizado otras veces con el formato GIF. iconoMarca. Este formato va a ser muy necesario sobretodo para hacer la sombra de la marca.guiarte. iconoMarca).addControl(new GMapTypeControl()).html © Los manuales de DesarrolloWeb. var nombre = "España".png".

46). var nombre = "Alemania".addOverlay(marker). var point = new GPoint (10. Manual del API de Google: desarrolloweb.pais).addOverlay(marker).nombre.com var pais = "espana".continente. var point = new GPoint (-5. var continente = "africa".nombre. map.continente. map.html © Los manuales de DesarrolloWeb. var pais = "francia". No reproducir sin autorización.continente. vamos a conocer el tratamiento de eventos. var pais = "marruecos".addOverlay(marker). porque Javascript también es un lenguaje de programación orientado a eventos y el API de los mapas de Google está basado en Javascript.com tienen el copyright de sus autores. var continente = "europa".nombre.desarrolloweb. El API de Google Maps tiene capacidad para tratar eventos.Tu mejor ayuda para aprender a hacer webs www.nombre. 25 . var marker = createMarker (point. var pais = "alemania".32). var nombre = "Francia".pais). map.continente. } } window. var marker = createMarker (point. var nombre = "Marruecos".addOverlay(marker).0.pais).com/manuales/desarrollo-con-api-de-google-maps. Esto no es nada nuevo. map.onload=load //]]> </script> <style type="text/css"> body{ margin:0px. var point = new GPoint (2.pais). } </style> </head> <body> <div id="map" style="width: 765px. var marker = createMarker (point.5.5). var marker = createMarker (point.51. height: 388px"></div> </body> </html> Artículo por Miguel Angel Alvarez Eventos en mapas de Google Para continuar el manual de desarrollo de mapas de Google. var continente = "europa". Pero hay que señalar que el API de Google Maps incorpora unos cuantos eventos que son propios de los mapas de Google y que no forman parte de los eventos básicos de Javascript.

No reproducir sin autorización. que se desata cuando el usuario hace clic sobre el mapa.0). que se tienen que registrar dentro de espacio de nombres de GEvent. map. Cada objeto del API de los mapas de google dispone de una serie de eventos ya definidos.point){ alert ("Hola amigo! Veo que estás ahí porque has hecho clic!"). para extraer el punto donde el usuario ha hecho clic en el mapa. tratamiento_clic).Tu mejor ayuda para aprender a hacer webs www. Todos los eventos que soporta el API de Google Maps. es lo que llamamos cross-browser. 26 . La línea que tenemos que ver ahora es la última. El nombre del evento que queremos detectar y hacer acciones cuando se haya captado 3.setCenter(new GLatLng(33. que son el contexto en el que se ha detectado el evento. donde se añade el escuchador de eventos. El nombre de la función que se encargará de tratar el evento.addListener(map. Primero tendríamos que crear el mapa. GEvent. es decir.com tienen el copyright de sus autores. están perfectamente documentados en la referencia que ofrece Google.setMapType(G_NORMAL_MAP).com Además. Estos dos parámetros son: • • overlay: No lo vamos a utilizar ahora. para mostrar mensajes al usuario. Tiene que ver cuando el usuario hace clic en una marca de un mapa. Ahora tenemos que codificar el comportamiento de nuestro mapa cuando se hace clic en él. function tratamiento_clic(overlay. var map = new GMap2(document. point: que es el punto o coordenadas geográficas donde el usuario ha hecho clic. GEvent es la clase a la que añadimos el event listener. es decir. El Manual del API de Google: desarrolloweb.html © Los manuales de DesarrolloWeb. map. sin los paréntesis). tal como lo hemos hecho en anteriores ocasiones. Los eventos en el API se manejan usando funciones que se llaman escuchadores de eventos. que es el propio mapa de google.3). "click". para cada clase.addControl(new GLargeMapControl()). Al añadir un evento para ser escuchado tenemos que proveer de tres parámetros: 1. que además se ejecutan dentro de un contexto y pasan distintos parámetros para identificar tal contexto. muy sencillo. 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. } Como vemos. En este caso se ha añadido un escuchador de evento. el API de los mapas de Google es único y funciona en cualquier navegador de la misma manera. y añadirle a GEvent un escuchador de eventos (Event listener) para cuando se hace clic sobre el mapa.toString()). para realizar acciones cuando se hace "clic" sobre el objeto map.getElementById("map")).desarrolloweb. map. El código de la función es simplemente un par de alert. Las acciones son simplemente ejecutar la función tratamiento_clic (fíjate que sólo ponemos el nombre de la función. si pulsó sobre cualquier área vacía del mapa.com/manuales/desarrollo-con-api-de-google-maps. Sacar el punto donde ha hecho clic el usuario Vamos a mostrar un primer ejemplo de tratamiento de eventos. El objeto del API sobre el que se tiene que escuchar el evento 2. Por ejemplo. así como las peculiaridades de cada navegador pueden hacer el tratamiento de eventos distinto entre distintas plataformas. Dicho evento pasa los argumentos overlay y point. alert ("El punto donde has hecho clic es: " + point. un mapa de Google tiene el evento click (la clase GMap2 tiene multitud de eventos distintos). la función recibe un par de parámetros. codificar la función tratamiento_clic().

function (overlay. No reproducir sin autorización.com primer alert simplemente está para dar un saludo al visitante y el segundo muestra las coordenadas (x e y . } }). El evento que vamos a ver es el click en el objeto map.setMapType(G_NORMAL_MAP). En este caso. Pulsando en cualquier parte del mapa reposicionaremos la marca a la posición donde se ha hecho clic.addOverlay(marker). porque sólo entonces queremos recolocar la marca. si es que se pulsó sobre una marca. El ejemplo puede verse en marcha en una página aparte.addListener(map.Tu mejor ayuda para aprender a hacer webs www. Dichas coordenadas se extraen del parámetro point que hemos recibido como contexto del evento. recuperaremos el punto donde se ha hecho click para colocar la marca en ese punto. al que hemos pasado el método toString() para que extraer su codificación en cadena de caracteres.point). var marker = new GMarker(point).setCenter(new GLatLng(40. Este mapa. si es que se pulsó sobre un área vacía del mapa. 27 .addControl(new GLargeMapControl()). de la clase GMap2.com tienen el copyright de sus autores.latitud. Ahora vamos a seguir con otro ejemplo de desarrollo en el que vamos a hacer un mapa que tiene una marca. Manual del API de Google: desarrolloweb. "click". map. Recordamos que overlay es la marca sobre la que se ha pulsado.3).-4). ejecutando una función que recibe dos parámetros (overlay.40). map. Artículo por Miguel Angel Alvarez Manejar un evento en un mapa de Google para reposicionar una marca En el anterior capítulo del manual de desarrollo con el API de mapas de Google vimos los primeros detalles sobre el tratamiento de eventos. centrado en España.html © Los manuales de DesarrolloWeb. Se crea el escuchador de eventos. tiene una marca también en España.point){ if (point){ marker. para el objeto map y el tipo de evento click.getElementById("map")). Primero veamos el código para crear el mapa con una marca: var map = new GMap2(document. Entonces llamamos al método de la marca setPoint(point) para reposicionar la marca al punto recibido por parámetro.desarrolloweb. map.com/manuales/desarrollo-con-api-de-google-maps. map. Ahora veamos el sencillo código para detectar un evento de tipo click sobre el mapa: GEvent. y point es el punto donde se ha hecho clic del mapa. Es bien simple ¿no? Podemos ver el ejemplo en marcha en este enlace. longitud) donde se ha hecho clic. var point = new GPoint (-4.setPoint(point). 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).

com Para acabar.org/TR/xhtml1/DTD/xhtml1-strict.com/manuales/desarrollo-con-api-de-google-maps. map. } }).addControl(new GLargeMapControl()). por lo que no los voy a explicar.w3. GEvent. En el ejemplo vamos a tener el mapa de Google y un formulario. } } window.Tu mejor ayuda para aprender a hacer webs www. No reproducir sin autorización. "click".addListener(map.40).3). El mapa de google.dtd"> <html xmlns="http://www.setPoint(point).0 Strict//EN" "http://www. para poner en un formulario en la propia página los valores de latitud y longitud.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html.setMapType(G_NORMAL_MAP).onload=load //]]> </script> </head> <body> <div id="map" style="width: 765px.google.w3. 28 . así como el tratamiento del evento con el API de Google Maps ya lo vimos en el anterior capítulo. function (overlay. map.-4).point){ if (point){ marker. para poder obtener la latitud y longitud de cualquier punto geográfico. height: 388px"></div> </body> </html> Artículo por Miguel Angel Alvarez Mostrar la posición de una marca de Google Maps en un formulario Ahora vamos a complicar un poco el ejemplo anterior de recolocar una marca en un mapa de Google.charset=ISO-8859-1"> <title>Mapa de Google</title> <script src="http://maps.getElementById("map")). Manual del API de Google: desarrolloweb.setCenter(new GLatLng(40.desarrolloweb. map.addOverlay(marker). os dejo el código completo de este ejercico: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.com/maps?file=api&v=2&key=llave" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document. map.html © Los manuales de DesarrolloWeb. var marker = new GMarker(point).com tienen el copyright de sus autores. Esto nos puede servir para saber el punto exacto donde se hace clic. var point = new GPoint (-4.

point){ if (point){ marker. Podemos ver el ejemplo en marcha en este enlace El código completo del ejercicio es este: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 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.addListener(map.charset=ISO-8859-1"> <title>Mapa de Google</title> <script src="http://maps. var point = new GPoint (-4. map.setMapType(G_NORMAL_MAP). map.value=point. con sus respectivos name. map. Luego vemos los campos X e Y. GEvent.com/manuales/desarrollo-con-api-de-google-maps.setPoint(point).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. Eso es todo.x.posicion. GEvent.Tu mejor ayuda para aprender a hacer webs www.addControl(new GLargeMapControl()).dtd"> <html xmlns="http://www.x document.addListener(map. es el manejo del evento click sobre el mapa. No reproducir sin autorización.x.org/TR/xhtml1/DTD/xhtml1-strict. 29 . que es como cualquiera que hayamos utilizado en HTML.3).com Veremos entonces los nuevos elementos en este ejercicio. map. function (overlay.setPoint(point).desarrolloweb.w3. al que le hemos puesto un name="posición".setCenter(new GLatLng(40.y.posicion. para podernos referir a él desde Javascript.y.value=point.0 Strict//EN" "http://www. document.x document. "click". Simplemente hemos incluido un par de líneas adicionales para acceder al formulario y actualizar los valores de los campos <input> de las coordenadas.40).getElementById("map")). "click".org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html.y } Manual del API de Google: desarrolloweb.posicion. var marker = new GMarker(point).y } }). document. para poder actualizar sus valores desde el script.value=point. function (overlay. que son campos de texto normales.com tienen el copyright de sus autores.html © Los manuales de DesarrolloWeb.point){ if (point){ marker.w3.posicion. Ahora el único cambio que hemos incorporado en el código de creación del mapa de Google.-4).value=point.addOverlay(marker).google.

Esta es una tarea que hemos repetido numerosas veces a lo largo del Manual de API de Google Maps. En este artículo vamos a aprender a obtener el zoom actual de un mapa cuando se produzca un evento.com }). Si queremos mostrar en un formulario en la página el zoom actual. 30 . En realidad saber el zoom en un mapa es simple. este artículo va a ampliar otro que ya habíamos realizado: Mostrar la posición de una marca de Google Maps en un formulario. como respuesta al evento clic. como respuesta a una acción de un usuario.onload=load //]]> </script> </head> <body> <div id="map" style="width: 765px.setPoint(point).com tienen el copyright de sus autores.desarrolloweb. Pues entonces el método lo ejecutaremos con esto: zoom_actual = map. es decir. getZoom() devuelve un número entero. Pongamos que tenemos el objeto mapa en una variable llamada "map".html © Los manuales de DesarrolloWeb. "click". Manual del API de Google: desarrolloweb.point){ if (point){ marker. para ampliar o reducir la definició.com/manuales/desarrollo-con-api-de-google-maps.Tu mejor ayuda para aprender a hacer webs www. } } window. 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. que es el zoom actual del mapa. haremos algo como esto: GEvent. Los eventos en mapas de Google ya los hemos tratado anteriormente en este manual.guiarte.com">guiarte.addListener(map. de hecho. Pero el mapa es interactivo y el usuario utilizándolo puede haber cambiado el zoom. En este caso mostraremos el zoom actual del mapa de google al hacer el usuario clic en el mapa y lo escribiremos en un formulario en la propia página.getZoom(). No reproducir sin autorización.com</a> </body> </html> Artículo por Miguel Angel Alvarez Averiguar el zoom en un mapa de Google Maps Cuando generamos un mapa de Google. Así habríamos guardado en una variable zoom_actual el valor entero del zoom del mapa. definimos el zoom con el que tiene que comenzar el mapa. utilizando el API de los Google Maps. sólo tenemos que utilizar el método getZoom() de la clase GMap2. function (overlay.

que servirá para ilustrar mejor el tema.com tienen el copyright de sus autores. Manual del API de Google: desarrolloweb. Es el evento “zoomend”.\nAntiguo Zoom: " + antiguoZoom + "\nNuevo Zoom: " + nuevoZoom).value=point.html © Los manuales de DesarrolloWeb. }). es decir.x.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps. El tratamiento de eventos en mapas de Google ya lo explicamos en el artículo Eventos en mapas de Google. El manejador de evento zoomend. así como posiblemente los precedentes de este manual que tratan sobre eventos.x document. que se desata en el momento que el mapa cambia el zoom.posicion.getZoom(). haríamos algo como esto: GEvent. Para ver el código completo del ejercicio simplemente muestra el código fuente de la página del ejemplo. Este método tiene que recibir el objeto sobre el que se escuchará el evento. Para obtener más explicaciones de este paso consultar el artículo donde se tratan los eventos de mapas de google en general.addListener(map. Artículo por Miguel Angel Alvarez Evento zoom en un mapa de Google Estamos en el manual de creación de Google Maps. la función que se ejecuta cuando se produce el evento. Entonces. para crear un tratamiento de un evento producido por el usuario. recibe dos variables. Podemos ver el ejercicio en marcha en este enlace. No reproducir sin autorización.Tu mejor ayuda para aprender a hacer webs www.y zoom_actual = map.value=zoom_actual } }). Como se dijo.y. en este caso vamos a ver otro ejemplo de trabajo con eventos.value=point. Una es el antiguo zoom que tenía el mapa y otra el nuevo zoom que se ha colocado. Recordar que para entender bien este código tendremos que leer el artículo anterior.zoom. Este simple ejercicio se puede ver en marcha aquí. nuevoZoom){ alert("Has cambiado el zoom del mapa. 31 . document.posicion.posicion. "zoomend". tratando los eventos sobre mapas de Google. En este caso vamos a ver un evento que se ejecuta en el momento en el que el usuario cambia el zoom del mapa. function (antiguoZoom. Suponemos que tenemos creado un mapa de google y que está declarado en el objeto map de la clase GMap2. el tipo de evento y la función que se ejecutará como respuesta al evento (el manejador de eventos). Bueno. se tiene que añadir un escuchador de evento con el método addListener de la clase GEvent. además tendremos que colocar en el formulario un campo nuevo para escribir el zoom del mapa: zoom actual: <input type="text" name="zoom" value="" /> Esto es todo.com document. si quisiéramos crear un evento para que nos mostrase en una caja de alerta las dos variables con el antiguo zoom y el nuevo.

que creamos con el API de Google Maps. al incorporar un mapa a una página web.addListener(map. ya que el mapa ocupa el espacio disponible en la capa donde esté contenido. porque no vamos a ver nada de Javascript ni de creación de mapas de Google. que se actualiza cuando el usuario cambia el zoom en el mapa. por complicarlo algo más. seguro que algunas de las informaciones proporcionadas aquí no van a ser triviales para los lectores. Ahora vamos a actualizarlo también cuando el usuario cambia el zoom. si cambia el espacio disponible de la capa donde está el mapa -ya sea porque el usuario ha cambiado el tamaño de la ventana o porque se han alterando los atributos width y height de la capa con Javascript o por cualquier modo. Dicho esto.zoom. Viendo su código fuente podemos hacernos una idea del ejercicio completo. Parte de este ejercicio lo hemos tratado previamente en otro artículo: Averiguar el zoom en un mapa de Google Maps.html © Los manuales de DesarrolloWeb. sino que vamos a mostrar como maquetar con CSS.Tu mejor ayuda para aprender a hacer webs www. simplemente el mapa de Google tomará el los atributos de ancho y alto de la capa (el <div> ) donde está contenido. usando CSS La maquetación con mapas de Google. Como se puede ver.com Volcamos el zoom en un formulario.com ofrecemos un manual en el que puedes aprender a trabajar con el API de Google Maps. En DesarrolloWeb. Podemos ver el ejemplo en marcha. teniendo en cuenta que en una de las capas hay un mapa de Google. "zoomend". No reproducir sin autorización. no los voy a explicar. Manual del API de Google: desarrolloweb. También recomiendo la lectura del material que ofrecemos en DesarrolloWeb. Para ello tenemos que definir un escuchador del evento zoomend en el mapa. hay un formulario en la parte de abajo. Podemos ver lo que estoy diciendo en esta página. puede resultar poco revelador este artículo.desarrolloweb. no tenemos que especificar el tamaño del mapa por Javascript ni nada parecido.com/manuales/desarrollo-con-api-de-google-maps. pero si el zoom se cambiaba no se actualizaba el valor hasta que no se cambiaba la marca pulsando el cualquier parte del mapa. Anteriormente ya hacíamos un volcado del zoom en un formulario.cambiará automáticamente el tamaño del mapa para ajustarse dinámicamente al espacio disponible. Realmente. sólo hemos añadido estas líneas para que se produzca el comportamiento deseado cuando se hace zoom en el mapa. es muy sencilla. Pero recordamos que para entenderlo tenemos que seguir el artículo Averiguar el zoom en un mapa de Google Maps. Artículo por Miguel Angel Alvarez Maquetar una página con un mapa de Google.value=nuevoZoom }).com sobre la maquetación CSS. Así pues. 32 . que se actualiza cada vez que se resitúa la marca. nuevoZoom){ document. cuando se produce el evento Ahora. pues voy a dar por sabidos los aspectos sobre maquetación con hojas de estilos y por tanto. es decir. GEvent. function (antiguoZoom. No obstante. mostramos el zoom en un formulario. Esto es dinámico.com tienen el copyright de sus autores.posicion.

"></div> Pero esto tal cual. La idea para solucionarlo es colocar a todas las capas que contengan al mapa height:100%. Esto no tiene ningún secreto.com tienen el copyright de sus autores. Manual del API de Google: desarrolloweb. La cabecera y el lateral ocupan unos espacios fijos y el mapa de google ocupará todo el sitio que dejan libre otros elementos de la maquetación. podemos colocar width:100% en la declaración de estilos css de la capa donde está el mapa. No reproducir sin autorización. Referencia: Podemos ver una FAQ con explicaciones sobre utilización del height:100% en CSS.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps. Maquetar un mapa de Google con width y height 100%.html © Los manuales de DesarrolloWeb. width:100%. pero que tiene una cabecera y una barra lateral. El ejemplo se complica si queremos que el mapa de Google ocupe además todo el alto disponible en el navegador. Para explicarlo lo más sencillo es ver directamente el ejemplo en una página aparte. Es como hemos colocado los mapas en el manual hasta este momento: <div id="map" style="width: 765px. pero mezclado con otros elementos Para acabar veamos un ejemplo de maquetación de un Google Maps que ocupa el 100% del espacio. 33 . height: 388px"></div> En este ejemplo el mapa ocupa 765 píxel de ancho y 388 de alto.com Los atributos de altura y anchura de un mapa son la capa que lo contiene El ejemplo más sencillo que podemos encontrarnos para maquetar un mapa de google es que tenga dimensiones en ancho y alto fijas. Lo normal es que probásemos algo como esto: <div id="map" style="height: 100%.Tu mejor ayuda para aprender a hacer webs www. Entonces nos debería funcionar y el mapa ocuparía todo el alto y ancho de la ventana. o bien de la capa donde estuviera contenido. <div id="map" style="width: 100%. sin hacer ninguna otra cosa. sabemos. tiene un problema y es que misteriosamente el mapa aparece vacío o con height = 0. ¿Pero qué pasa si queremos que un mapa de Google Maps tenga el ancho de toda la ventana del navegador? Porque sabemos que el navegador puede tener distintos tamaños. height: 388px"></div> Este mapa ocuparía todo el área disponible de la ventana del navegador. que también. puede ser variable dependiendo de las características de pantalla o del estado de la ventana del browser. Esto es porque los navegadores tienen problemas al maquetar con height=100%. así como a las etiquetas <BODY> y <HTML> que también deberían tener el height de 100%. dependiendo de la definición de pantalla del visitante y si la ventana está maximizada o dimensionada de cualquier otra forma. Ahora veamos el ejemplo de un mapa de Google Maps que ocupa todo el ancho y alto del espacio en una página aparte. Entonces es muy sencillo.

"> <div id="cabecera" style="background-color: #ffcc99.google. pero necesitaremos conocimientos de CSS sobre maquetación y posicionamiento. Resulta muy fácil maquetar con un mapa de Google en una capa que toma el tamaño del contendor donde se encuentra.html © Los manuales de DesarrolloWeb. El código es el siguiente: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. height: 23px. height:100%. background-color:#eeff99. en esta ocasión para mostrar el proceso de creación de líneas sobre mapas de Google. } </style> </head> <body> <div id="contenedor" style="width:100%.w3.setCenter(new GLatLng(33. map.com tienen el copyright de sus autores.org/TR/xhtml1/DTD/xhtml1-strict. margin-bottom:10px. No reproducir sin autorización. map."> Por <a href="http://www.com</a> <br /> <br /> Esto son contenidos que colocamos en el lateral izquierdo.com El ejercicio es simple.guiarte. font-weight:bold. height:100%.">Esto es la cabecera!!</div> <div id="lateral" style="float:right.onload=load //]]> </script> <style type="text/css"> html. padding: 3px.setMapType(G_NORMAL_MAP). </div> </div> <div id="map" style="height: 100%.0). Las líneas se Manual del API de Google: desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.getElementById("map")).org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html.w3. 34 ."> <div id="contenidolateral" style="padding: 30px 10px 0 10px.charset=ISO-8859-1"> <title>Mapa de Google</title> <script src="http://maps.com">guiarte. width:200px. map.3).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.0 Strict//EN" "http://www. font-size: 110%.desarrolloweb. margin-right:210px.dtd"> <html xmlns="http://www.body{ margin:0px. } } window. height:100%.Tu mejor ayuda para aprender a hacer webs www."></div> </div> </body> </html> Artículo por Miguel Angel Alvarez Dibujar líneas en mapas de Google Seguimos estudiando la creación de mapas de Google con el API de Google Maps.addControl(new GLargeMapControl()).

para definir los puntos donde están Madrid y Barcelona: var madrid = new GLatLng(40. Todo el código Este es el código completo para la configuración del mapa del ejemplo: Manual del API de Google: desarrolloweb. Podemos ver el ejemplo en marcha en una página aparte. map. podemos hacer la llamada al constructor del polyline: var polyline = new GPolyline([madrid.15898). Clase GPolyline Esta clase sirve para dibujar líneas o polígonos en un mapa. 6. se ha definido una línea con dos puntos. 0. que ya vimos en artículos anteriores. que es un RGB en hexadecimal. 2. El único parámetro que necesitamos indicar de manera obligada son los puntos de las líneas. con color #0000dd que es un azul.addOverlay(polyline). Sólo necesitamos conocer previamente unos cuantos conceptos sobre la creación de mapas. Para indicar los puntos de los vértices.html © Los manuales de DesarrolloWeb. que se indica con los distintos puntos El color de las líneas.4165020. Por ejemplo. Ahora que tenemos los puntos de la línea a crear. los otros parámetros son opcionales. con 6 pixels de ancho y 0. se utiliza la clase GLatLng.4). comenzando por #. 35 .com tienen el copyright de sus autores. Ej: #ff8800. en pixels.4 de opacidad. Pintar la línea en el mapa con addOverlay Para que esta línea quede dibujada en el mapa se utiliza el método de GMap2 llamado addOverlay() al que le pasamos por parámetro el polyline que habíamos construido. "#0000dd". en el manual: Manual del API de Google Maps.desarrolloweb. -3. Dibujar líneas o polígonos es un modo muy interesante de marcar elementos o caminos en el mapa y resulta muy sencillo. La opacidad con un valor que va de cero a uno.38878. barcelona]. Para construir un polígono se necesitan varios parámetros: • • • • • Array con los vértices de las líneas. Intenta hacer el trabajo utilizando las características de dibujo con vectores de los navegadores y si no es posible superpone una imagen al mapa. var barcelona = new GLatLng(41. Como vemos. para que se pueda ver lo que hay debajo de ellas. No reproducir sin autorización.Tu mejor ayuda para aprender a hacer webs www.702564). El ancho de las líneas. vamos a crear una línea en un mapa de Google que va de Madrid a Barcelona.com dibujan encima de los mapas y se muestran con una pequeña transparencia. que sirve para crear objetos que tienen las dos coordenadas geográficas latitud y longitud. como los que utilizamos para definir colores en HTML. Otras opciones.com/manuales/desarrollo-con-api-de-google-maps. Para ilustrar este ejemplo.

Anteriormente vimos cómo crear una línea recta en un mapa de Google entre dos puntos dados. Por ello.002. var barcelona = new GLatLng(41. var madrid = new GLatLng(40.Tu mejor ayuda para aprender a hacer webs www. la tierra es esférica y por tanto su superficie tiene una curvatura.com tienen el copyright de sus autores.9. map.guiarte. 12. map. Ejemplo completo en marcha en http://www. roma = new GLatLng(41. Ahora vamos a ver cómo crear un polígono con varios puntos y líneas geodésicas. 36 .onload=load Podemos ver el código completo del mapa accediendo al ejemplo y utilizando la funcionalidad del navegador de "Ver código fuente". Imaginemos que queremos construir un polígono que hace esta ruta: Madrid. Roma. 28.com/manuales/desarrollo-con-api-de-google-maps. Túnez y Madrid. Primero crearíamos los puntos de esas ciudades: var var var var madrid = new GLatLng(40.setCenter(new GLatLng(40.desarrolloweb. No reproducir sin autorización. 37. moscu = new GLatLng(55.4833333).5).0186111.com function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document. Como sabemos.9647222).html © Los manuales de DesarrolloWeb. para ir de un punto a otro en el mapa.com/mapasgoogle/desarrolloweb/linea. Primero habrá que explicar qué son líneas geodésicas. Moscú. 0.7522222.getElementById("map")).15898). realmente no vamos a ir en línea recta. Esto es porque la distancia más corta entre dos puntos de la tierra se representaría con una curva geodésica.php Artículo por Miguel Angel Alvarez 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. sino realizando esa forma de la curvatura de la tierra. -3. "#0000dd".702564).addOverlay(polyline).6155556). var polyline = new GPolyline([madrid.702564). Manual del API de Google: desarrolloweb. } } window.4165020. Para ello primero tenemos que definir una opción adicional al polígono: var opciones_poligono = {geodesic:true}. Estambul. 2. -3.-4. barcelona]. a pesar que en los mapas aparece la tierra sobre un plano recto. estambul = new GLatLng(41.4165020.38878. 6.4).12). Ahora esas opciones las pasamos como último parámetro en el constructor del objeto de la clase GPolyline. Para decirle al API de mapas de Google que trace líneas geodésicas sobre el mapa tenemos que especificarlo a la hora de instanciar el polígono.

html © Los manuales de DesarrolloWeb. map. que se compone de las coordenadas de latitud y longitud. tenemos que indicar los puntos desde el primero hasta el último. para que no se produzcan comportamientos indefinidos a la hora de pintar el polígono. …. que es el número de píxeles del borde.com/manuales/desarrollo-con-api-de-google-maps. opacidad_borde.1797222). color_borde. La instanciación de un polígono se realiza de la siguiente manera: var objeto_poligono = new GPolygon([punto1. La clase GPolygon es la encargada de dar soporte a la implementación de polígonos en los mapas. estambul. Lo único es que el recorrido de vértices tiene que estar cerrado. tal como de definen en HTML. Tamaño del borde: Un número entero. No reproducir sin autorización. Color_relleno: Un valor de tipo cadena con el color RGB en hexadecimal. 10. 37 . Los polígonos en mapas de Google se colocan de manera similar a como se hacen las líneas. Por último ordenamos que se pinte el polígono en el mapa con el método addOverlay(). Cuanto más bajo. En el caso de los polígonos. que recibe una serie de parámetros para la configuración del mismo. Para crear un polígono tenemos que utilizar el constructor de la clase GPolygon. La parte novedosa con respecto a las líneas es que en los polígonos se puede indicar no sólo el color del borde.8027778. es decir. tamaño_borde. Todos los puntos o vértices tienen que ser indicados con un objeto GLatLng.Tu mejor ayuda para aprender a hacer webs www. opacidad_relleno). sino también el color del relleno con el que queremos pintar la parte interna del polígono. Opacidad del borde: Un número entre 0 y 1. indicando los puntos o vértices. indicando que queremos líneas geodésicas. "#cccc00".com var tunez = new GLatLng(36. de esta forma: var poligono = new GPolyline([madrid. tunez.com tienen el copyright de sus autores. 0. 6. Color del borde: Una cadena con un color RGB en hexadecimal. con sus correspondientes coordenadas de latitud y longitud.6. opciones_poligono). siendo el último punto el mismo que el primero. 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. más transparente y cuanto más alto más opaco. Artículo por Miguel Angel Alvarez Polígonos en mapas de Google El API de Google Maps permite dibujar varios tipos de elementos para superponer sobre los mapas de Google. para que se pueda cerrar el polígono. Ahora le toca el turno a los polígonos. En nuestro manual sobre el desarrollo con el API de Google Maps ya explicamos la manera de colocar marcas y líneas. empezar y acabar en el mismo punto. Podemos ver un ejemplo que hace este mapa con el polígono con líneas geodésicas.addOverlay(poligono). moscu.desarrolloweb. punto1]. punto2. Y luego instanciaríamos el polígono. madrid]. roma. Manual del API de Google: desarrolloweb. puede generarse un polígono con un número indeterminado de vértices. color_relleno.

Artículo por Miguel Angel Alvarez Eventos y polígonos en Google Maps Para desarrollar alguna funcionalidad adicional de los polígonos en los mapas de Google vamos a programar un añadido al script que crea un polígono. GLatLng(40. opacidad del borde 0. "#996633".addOverlay(polygon).707534313201904).com Opacidad del relleno: También un valor entre 0 y 1.com/manuales/desarrollo-con-api-de-google-maps. GLatLng(40.Tu mejor ayuda para aprender a hacer webs www. No reproducir sin autorización. para ver el código completo de la creación del mapa de Google con el polígono. muralla6.7 (tirando a opaco). Al pulsar la marca se ocultará el polígono y al volverla a pulsar se mostrará de nuevo. En este caso hemos realizado uno cuyos lados se superponen a la muralla de Ávila y cuyo interior sería la ciudad amurallada. muralla5. muralla3.70139741897583). Como hemos dicho. y así sucesivamente. -4.addOverlay(objeto_poligono). map. El ejercicio se trata de colocar una marca y un polígono en un mapa de Google. Primero hemos tenido que obtener y generar los puntos (latitud y longitud.guiarte.php Recomendamos ver el código fuente de este ejemplo Abre el ejemplo y utiliza el menú "Ver Código fuente". con color del relleno #996633 y opacidad del relleno 0.65399457849209. La única diferencia con este caso es que hemos definido la variable donde vamos a Manual del API de Google: desarrolloweb.com/mapas-google/desarrolloweb/ poligonos.html © Los manuales de DesarrolloWeb.7.4). Esta funcionalidad de mostrar y ocultar polígonos es común a las distintas overlays que hemos tratado con anterioridad en el manual de mapas de Google (API de Google Maps). en el artículo anterior vimos como colocar un polígono en un mapa de Google. muralla4. muralla2.desarrolloweb. igual que la opacidad del borde. Luego creamos el polígono utilizando estos puntos y las configuraciones deseadas: var polygon = new GPolygon([muralla1.com tienen el copyright de sus autores.65627360348711. -4.656680564044166. tamaño de borde 5 píxel.696569442749023). Esto creará un polígono sobre los vértices sacados de la muralla de Ávila. 0. GLatLng(40.65884555247438. -4.706525802612305).697213172912598). GLatLng(40. -4. para ocultar y mostrar el polígono por respuesta a un evento de usuario. GLatLng(40. "#669933". 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. de la clase GMap2. con color de borde #669933.4 (tirando más a transparente). 5. mostraríamos el polígono con addOverlay(). Por último. con la clase GLatLng) de los vértices de la muralla: var var var var var var muralla1 muralla2 muralla3 muralla4 muralla5 muralla6 = = = = = = new new new new new new GLatLng(40. Para dar la orden a un mapa de Google que dibuje un polígono generado se utiliza el método addOverlay() del objeto mapa.697320461273193). -4. de manera similar a como hicimos al dibujar líneas: map.658715329592404. muralla1]. 0.658259547503505. -4. Podemos ver el ejemplo en marcha para entender bien el objetivo de este taller de Google Maps. Podemos ver el ejemplo en marcha en: http://www. 38 . que vimos en el artículo anterior.

Y no hay más misterios.hide(). que no hayamos visto con anterioridad en el manual del API de Google Maps. llamamos al método para ocultarlo.6570). con el método isHidden(). var marca = new GMarker(punto_marca). llamamos al método que lo muestra. 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. En caso que estuviera visualmente activo.Tu mejor ayuda para aprender a hacer webs www. con polygon. No reproducir sin autorización.com tienen el copyright de sus autores. Con el API de Google Maps se define un evento de la siguiente manera: GEvent.) Hemos creado también. Nos quedaría ver el código de la función que muestra u oculta el polígono. polygon.isHidden()){ //alert("Estaba oculto").702.html © Los manuales de DesarrolloWeb. con polygon.show(). 39 . Dejo de nuevo el link para ver el ejemplo en marcha en una ventana aparte. "click".isHidden(). de la clase GPolygon. } } Lo primero que se hace es ver si el poligono esta o no oculto. ocultar_mostrar_poligono). 40. Esto añade el escuchador de evento "click" asociado al objeto contenido en la variable marca. tenemos que crear el evento "click" a la marca. mira el código fuente del ejercicio terminado para ver cómo hacerlo. como global a toda la página. para ejecutar la función ocultar_mostrar_poligono() cuando se produzca. function ocultar_mostrar_poligono(){ if (polygon. como decíamos.desarrolloweb. lo que en el API de desarrollo de mapas de Google llaman "Ground Manual del API de Google: desarrolloweb. Observar su código fuente para obtener más información. Artículo por Miguel Angel Alvarez Superponer una imagen en un mapa de Google En este artículo del manual de Google Maps vamos a explicar el modo de superponer una imagen a un mapa.addOverlay(marca). Cuando y cuando se detecte el evento se ejecuta la función ocultar_mostrar_poligono(). para acceder a los métodos de dicho objeto. }else{ //alert("Estaba mostrandose"). con polygon. polygon. Esta función hace uso de la variable global donde hemos almacenado el objeto polígono. una marca: var punto_marca = new GPoint (-4.addListener(marca. Por decirlo de otra manera. para que cuando se hace clic sobre ella se llame a una función que se encargue de mostrar u ocultar el polígono. (Para crear una variable glogal basta con declararla fuera de ninguna función.com colocar el objeto polígono. que devuelve true en caso que esté oculto y false en caso que esté mostrándose. map.show(). Luego. hemos definido un evento click sobre una marca. En caso de estar oculto.com/manuales/desarrollo-con-api-de-google-maps.hide().

-3.15). pues sólo necesitamos definir el lugar donde se tiene que pegar la imagen que deseamos mostrar y la URL donde se localiza el archivo gráfico a superponer. o añadir elementos para llamar la atención del usuario. cuyo constructor recibe una URL o camino relativo de la imagen y los límites del mapa donde colocarla. var imagen = new GGroundOverlay("archivo-grafico.com Overlays". 40 . Podemos ver la siguiente imagen. que es como un rectángulo formado por dos puntos geográficos.4923928. map. No reproducir sin autorización. que utilizaremos en el constructor de la clase GLatLngBounds. que habíamos utilizado anteriormente para superponer elementos en mapas de google como los polígonos. de esta manera: var x1 = new GLatLng(valor_latitud.8736677).8675308). los puntos x1 y x2 son coordenadas latitud y longitud que debemos crear con la clase GLatLng.getElementById("map")). limites_imagen). La imagen que coloquemos siempre aparecerá sobre el propio fondo. var limites_imagen = new GLatLngBounds(x1.877358). tapando lo que haya debajo Las imágenes que se superponen se crean a través de la clase GGroundOverlay. var map = new GMap2(document. definidas a su vez con los valores de latitud y longitud. map.-3. Vemos el código completo para hacer un mapa con una imagen superpuesta. en la que hemos marcado los dos puntos que necesitamos para definir los bordes o límites de la imagen.-3.com/manuales/desarrollo-con-api-de-google-maps. las coordenadas Sur-Oeste y Norte-Este. Una vez tenemos el objeto imagen de la clase GLatLngBounds. En el constructor debemos especificar primero el punto X1 y luego el punto X2.489259.Tu mejor ayuda para aprender a hacer webs www. x2).addControl(new GMapTypeControl()). . A su vez. tenemos que colocarlo en el mapa con el método del mapa addOverlay().html © Los manuales de DesarrolloWeb. map. var x2 = new GLatLng(40. Los límites de la imagen son a su vez otra clase. Puede servirnos para ofrecer información gráfica del lugar que se está visualizando.addOverlay(imagen). Manual del API de Google: desarrolloweb.addControl(new GSmallMapControl()). llamada GLatLngBounds.setCenter(new GLatLng(40. valor_longitud).jpg". //creo los puntos de los límites de la imagen var x1 = new GLatLng(40.491022. La tarea es muy simple.com tienen el copyright de sus autores.desarrolloweb. map.

com. de la clase GMap2: addOverlay().jpg".addOverlay(imagen).com/pub?key=p9pdwsai2hDN-cAocTLhnag podemos encontrar una lista de las posibles capas que por ahora soporta el API de Google Maps. El ejemplo en marcha lo podemos ver en una página aparte. Simplemente llamamos al constructor de GLayer y le pasamos como parámetro el identificador de la capa que queremos mostrar.Tu mejor ayuda para aprender a hacer webs www. por ejemplo. aunque tenemos que definir bien los límites de la imagen para que el renderizado quede bien y no se estire demasiado la foto. Como se ha podido comprobar.com //defino los límites donde voy a colocar la imagen var limites_imagen = new GLatLngBounds(x1. En este caso utilizaremos el sitio web de Panoramio para incluir las fotos dadas de alta.html © Los manuales de DesarrolloWeb.google. superponer una imagen es algo relativamente sencillo. No reproducir sin autorización. Panoramio es un servicio de Google donde los usuarios pueden enviar fotos de cualquier parte del mundo. A addOverlay() le tenemos que pasar la instancia de la capa que queremos mostrar. Este artículo es muy sencillo. Artículo por Miguel Angel Alvarez Incluir las fotos de Panoramio en un mapa de Google Como debemos saber. x2). que Manual del API de Google: desarrolloweb. //coloco la imagen o ground overlay en el mapa map.all").panoramio. Los identificadores posibles están en el documento ese al que hacía referencia. //Creo un ground overlay var imagen = new GGroundOverlay("lasrozas. que ya hemos visto anteriormente en el manual de desarrollo web . Para crear una capa con GLayer hacemos lo siguiente: var capa_panoramio = new GLayer("com. sobreponer una capa con las fotos de la base de datos de Panoramio. para hacer que el layer se muestre en un mapa de Google utilizamos un método. de una manera muy rápida. limites_imagen). En este artículo veremos cómo incluir dichas fotos para enriquecer nuestros mapas con contenido actualizado y de utilidad. pero también se puede utilizar GLayer para incluir información de la Wikipedia. 41 .desarrolloweb. Esta clase GLayer sirve para superponer capas con información geográfica de otros sitios web. Luego. Sólo vamos a utilizar una nueva clase que no habíamos visto hasta ahora que es la clase Glayer.com tienen el copyright de sus autores. A través del API de Google Maps podemos. En el documento http://spreadsheets.com/manuales/desarrollo-con-api-de-google-maps.addOverlay(capa_panoramio). al menos así les parecerá a todos los que hayan seguido el Manual de programación del API de los Mapas de Google que venimos publicando en DesarrolloWeb.com. map.

com hemos creado al llamar al constructor de GLayer. Artículo por Miguel Angel Alvarez Manual del API de Google: desarrolloweb.panoramio.onload=load Podemos ver el ejemplo en marcha en una página aparte.com/manuales/desarrollo-con-api-de-google-maps.002. map.addOverlay(capa_panoramio).com tienen el copyright de sus autores. var capa_panoramio = new GLayer("com. map.-4.setCenter(new GLatLng(40. No reproducir sin autorización.8).getElementById("map")). 42 . 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.html © Los manuales de DesarrolloWeb.desarrolloweb.12). } } window.Tu mejor ayuda para aprender a hacer webs www.all").

Sign up to vote on this title
UsefulNot useful