Manual API Google

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Manual del API de

Google Maps
Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Javier Chaure Miguel Angel Alvarez Gema Maria Molina Prados
Desarrollador freelance Director de DesarrolloWeb.com Equipo DesarrolloWeb.com
http://www.xski.net/ http://www.desarrolloweb.com http://www.desarrolloweb.com/
(2 capítulos) (23 capítulos) (1 capítulo)
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 1

© Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorización.
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.

Tendremos que darle el nombre y descripción del mapa.
Además, a la derecha tenéis el mapa que se va a crear. En este momento están disponibles las
opciones para edición del mapa y creación de marcas, líneas, etc. Podréis ver en la esquina
superior derecha del mapa una serie de iconos con los que podréis colocar los distintos
elementos sobre el mapa.
Experimentar con cada tipo de dibujo que se puede colocar. Además, luego podemos
personalizar cualquier cosa, como cambiar el color a las líneas o formas, o poner varios tipos
de marcas sobre el mapa. Al crear cualquier elemento o señal sobre el mapa, nos abre una
pequeña ventana para colocar las propiedades de este elemento.

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

Entonces se abrirá una ventana aparte donde dar las propiedades del mapa que vamos a crear
para nuestra página web.
En esta página tenemos que indicar: 1) El tamaño del mapa, 2) centrar el mapa donde lo
queremos y ponerle el zoom deseado y 3) copiar el código que nos dan.
8) Pegar el código del mapa en nuestra página web
Pues ya está! Una vez pegado el mapa de Google aparecerá tal cual lo hemos personalizado en
la página web que deseemos.
Yo he pegado a continuación este mapa de Google de prueba, para que se pueda ver en este
artículo de DesarrolloWeb.com.

Eso es todo. Podemos haber tardado un poco más para aprender a crear el mapa, pero una
vez sepamos, nos llevará menos de 5 minutos incorporar un mapa de Google en una página
web.
Object 1
Ver mapa más grande
Artículo por Miguel Angel Alvarez
Crear mapas de Google con el asistente de Google Maps

Vamos a ver uno de los modos de creación de mapas de Google para personas que no tienen
conocimientos sobre Javascript y el API de Google Maps, o bien que no desean gastar su
tiempo en aprender a crear mapas personalizados. Se trata de un asistente muy sencillo que
permite escribir varios datos en un formulario sobre nuestro mapa y nos ofrece luego el código
que debemos copiar y pegar en nuestra página web en el lugar donde queremos que aparezca.
En realidad el asistente que vamos comentar en este artículo es para realizar un mapa con el
Ajax Search API para búsqueda local. El resultado que obtendremos consiste en un mapa, con
un punto señalado en él y además un sistema de búsqueda de direcciones y rutas para llegar a
ese punto. Así que será un mapa con alguna utilidad extra para la localización de un nuestro
negocio o local.
Sobra decir que este sistema, aunque es muy sencillo y útil para hacer mapas sencillos, no va
a permitir todas las posibilidades que ofrece el API de Google Maps que relatamos en el
manual de creación de mapas de Google. No obstante para quien quiera hacer un mapa
sencillo para señalar un punto geográfico y ponerlo en su web, sin complicarse la vida, es una
herramienta ideal.
El asistente para la creación de un mapa de Google está en la URL:
http://www.google.com/uds/solutions/wizards/mapsearch.html

Como veremos, tiene un formulario para introducir varias informaciones. Primero nos pide
varios datos sobre el mapa que queremos realizar, como anchura y altura del mapa y el nivel
de zoom. Luego nos pide información sobre el elemento que queremos marcar con una flecha
dentro del mapa. En el mapa, al pulsar la flecha aparecerá una ventana con informaciones
sobre el punto geográfico localizado, que también debemos indicar nosotros en el formulario,
por medio de los siguientes datos: el nombre del lugar que queremos localizar (por ejemplo
"Cine Big"), la URL con la que queremos enlazar (si alguien pulsa sobre el link que aparecerá
en la ventana de información), y la dirección completa de lo que queremos enlazar.
Nota: la dirección completa, para que la entienda Google Maps y la pueda localizar en el mapa, hay que
ponerla desde lo más particular a lo más general, separado por comas. Por ejemplo. Gran Vía 45, Madrid,
España.
Como segundo paso tenemos que introducir la URL del sitio web donde se va a colocar este
mapa, para conocimiento de Google. Este sistema no requiere que nos registremos para
obtener una clave para trabajar con el API, lo que simplifica algo las cosas, pero debemos
indicar la web donde lo vamos a utilizar y el mapa que creemos sólo se verá en el sitio web
donde hayamos indicado (podemos poner sólo la URL principal del dominio como
http://www.desarrolloweb.com).
Luego podemos pasar al tercer paso, donde simplemente tenemos que generar el código
fuente que colocar en la página web. Lo copiamos y sólo tenemos que pegarlo en el lugar de la
página donde deseemos que aparezca el mapa de Google.
Referencia: Por si nos interesa, existe otra manera de crear fácilmente un mapa de Google en una página
web, que ya relatamos en otro artículo de DesarrolloWeb.com: Crear un Mapa de Google sin saber
programación.
Para acabar, dejamos aquí una muestra de un mapa de Google que hemos preparado para
probar este asistente.
Lo básico para empezar a desarrollar con Google Maps I

Uno de los últimos servicios del gigante Google que más ha dado que hablar es Google Maps.
En un navegador, y a golpe de clic el usuario puede darse una vuelta virtual por el mundo,
disfrutando de fotos aéreas de gran calidad en algunas zonas, y del mapeado vectorial
completo de otras. Pero lo interesante del servicio es que Google ofrece una API (Application
Programming Interface) para todos aquellos interesados en usar este servicio e integrarlo en
su propia página, de forma simple y gratuita. A lo largo de este artículo veremos los
fundamentos para integrar Google Maps en nuestro website y a través de un ejemplo
crearemos un primer mapa usando las funcionalidades más básicas de la API.
La característica que sin duda más llama la atención del funcionamiento de Google Maps es su
interactividad. Podemos pinchar una y otra vez en el mapa para movernos por el mundo, hacer
zoom y elegir el tipo del mapa sin necesidad de recargar la página, todo ello de forma fácil e
intuitiva. Este tipo de aplicación web se encuadra dentro de la tecnología que Adaptive Path ha
dado por denominar AJAX (Asynchronous Javascript + XML). No vamos a profundizar en este

artículo en el planteamiento AJAX, sin embargo es conveniente hacer una breve reseña para
conocer a grandes rasgos su funcionamiento.
AJAX no es una nueva tecnología, sino una combinación de tecnologías ya existentes para
ofrecer una nueva visión a la hora de crear aplicaciones web. Siguiendo un planteamiento
AJAX, usaremos CSS y DHTML para la presentación de los datos, el DOM (Document Object
Model) para tratar dinámicamente la presentación de estos datos, XML y XSLT para el correcto
intercambio y manipulación de la información, XMLHttpRequest para obtener la información de
manera asíncrona (cuando nos lo pida el usuario) y Javascript para coordinar a todos estos
agentes a nuestro gusto dependiendo de nuestras necesidades. De este modo, tenemos un
"motor" javascript entre la presentación y el servidor, que nos hará peticiones de información
de forma asíncrona para incorporarla inmediatamente a la presentación de nuestra página, sin
necesidad de recargarla y hacer una nueva petición de página completa al servidor.
A grandes rasgos esta es la filosofía de funcionamiento de AJAX, un planteamiento que sin

duda ofrece grandes posibilidades, como las que podemos ver en práctica con Google Maps.
Podemos ver otros ejemplos de aplicaciones AJAX en Google Suggest y Gmail.
Como vimos anteriormente en la introducción de este artículo, Google nos permite usar Google
Maps en nuestra página web de forma gratuita. A continuación veremos cómo hemos de
proceder para realizar nuestro primer mapa, viendo los fundamentos de la API que Google nos
ofrece.
Los requisitos para empezar a trabajar son realmente escasos. Con un simple editor de html y
un servidor público podemos empezar a crear mapas en nuestro dominio. Es importante
reseñar que el servidor donde alojemos nuestros scripts para Google Maps ha de ser público,
entre otras razones porque Google monitorizará el uso que hagamos del mapa, de acuerdo con
sus términos y condiciones de uso.
El primer paso para empezar a usar Google Maps es obtener una clave (key) que se nos
concede cuando nos damos de alta en el servicio. Esta clave es única para cada usuario de
Google Maps y es restrictiva en lo que se refiere a su uso, ya que sólo nos permite usar los
scripts en uno de los directorios de nuestro servidor.
Una vez que tenemos nuestra clave ya estamos en condiciones de crear nuestro primer mapa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Introducción a Google Maps - Desarrolloweb</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=AÑADE_TU_CLAVE_AQUÍ"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));

map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);
</script>
</body>
</html>
Ejecutando este código en un servidor público obtenemos como resultado el siguiente mapa,
que nos muestra una vista aérea de Madrid centrada en la Puerta de Alcalá:
Como se puede ver en el código, hemos creado una única capa con id="map" destinada a
contener nuestro Google Map. El script que viene a continuación de la declaración de esta capa
es el que genera el mapa. Veamos sentencia a sentencia qué hace el código:
• var map = new GMap(document.getElementById("map"));
Esta sentencia genera el mapa especificando como destino el id="map" que hemos
asignado previamente para nuestra capa contenedora. Nótese que el mapa se adaptará
al tamaño que hayamos especificado para esta capa.
• map.setMapType(G_SATELLITE_TYPE);
setMapType nos permite especificar el tipo de mapa que queremos visualizar. Como
puede verse en los selectores situados arriba a la derecha en el mapa, podemos elegir
entre las vistas "Map" (mapa vectorial), "Satellite" (fotografía de satélite) y "Hybrid"
(combina ambas vistas). En nuestro caso, ya que Google todavía no dispone de mapas
vectoriales para España, hemos elegido la vista de satelite que nos muestra la
fotografía aérea de la zona.
• map.addControl(new GLargeMapControl());
addControl nos permite incorporar elementos de control al mapa, tal y como son el

control de zoom que vemos a la izquierda y el selector de tipo de mapa. Dependiendo

de nuestras necesidades podemos incorporar estos controles, o incluso versiones de
menor tamaño (GSmallMapControl) para mapas en tamaño reducido. Por defecto el
mapa se muestra sin controles.
• map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);
Con esta sentencia indicamos a nuestro GMap qué lugar queremos que muestre,
mediante el método centerAndZoom. Los parámetros son un GPoint (que generamos a
continuación a partir de su latitud y longitud) y el nivel de zoom que queremos mostrar,
de 1 a 16, siendo el nivel 1 el más cercano y el 16 el más alejado.
Google Maps ubica los puntos en los mapas a partir de su latitud y longitud. Esta
información debemos suministrarla nosotros, y para ello lo más adecuado es usar
alguno de los servicios de geocoding disponibles en la red. Uno de ellos es por ejemplo
el de InfoSports, en el que con simplemente pulsar en cualquier punto del mapa
obtendremos la latitud y longitud deseadas para ese punto. Existen otros servicios de
geocoding disponibles de forma gratuita en la red que no exigen buscar el punto físico
en el mapa, tales como Geocoder.us y geonames.org, en los que podemos realizar
búsquedas a partir del nombre de la ubicación que buscamos.
Nota: El artículo continua en Desarrollar con Google Maps II. Pero atención, que estos ejemplos de Mapas
de Google están explicados para el API 1 de Google Maps. Pero si queremos ver explicaciones
actualizadas, siguiendo el API 2 de Google Maps, podemos consultar el artículo: Mapas de Google API 2.
Artículo por Javier Chaure

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

Como se puede ver en el artículo anterior sobre la creación de mapas de Google, crear un
mapa y centrarlo en un punto es realmente simple. Sofistiquemos un poco nuestro mapa
añadiéndole unos marcadores, de tal forma que podamos ubicar determinados puntos de
interés en el mapa. El mapa con nuestros puntos de interés añadidos nos quedará de la
siguiente manera:
Lo primero que necesitamos son las coordenadas de los nuevos puntos, en este caso la Plaza
de Cibeles y la Plaza de Neptuno. A continuación asociaremos un marcador a cada uno de los
puntos y lo mostraremos en el mapa. El código que muestra este segundo mapa es el
siguiente:

strict.dtd">

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

</head>
<body>

//Puerta de Alcalá
var point = new GPoint (-3.688788414001465, 40.41996541363825);

var marker = new GMarker(point);

map.addOverlay(marker);
//Plaza de Neptuno
//Plaza de Cibeles
map.centerAndZoom(point, 3);
</script>
</body>
</html>
Como puede verse, declaramos una variable point a partir de la cual creamos el marcador para
posteriormente mostrarlo en el mapa con addOverlay. En esta ocasión hemos centrado el
mapa en el último punto declarado, el correspondiente a la Plaza de Cibeles.
Estupendo, ya tenemos un mapa creado con una serie de puntos señalados sobre él, pero no
aportan ninguna información al visitante. Lo apropiado sería satisfacer la curiosidad del usuario
proporcionándole algo de información asociada a ese punto. Añadamos pues algo más de
información a nuestros marcadores mostrando unas ventanas informativas que nos indiquen el
nombre de la ubicación física sobre la que nos encontramos:

strict.dtd">

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

</head>
<body>

function createMarker(point, nombre) {

GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(nombre);
});
return marker;
}
//Puerta de Alcalá
var nombre = "Puerta de Alcalá";
var marker = createMarker (point, nombre);
//Plaza de Neptuno


var nombre = "Plaza de Neptuno"
//Plaza de Cibeles
var nombre = "Plaza de Cibeles"
map.centerAndZoom(point, 3);
</script>
</body>
</html>
Este código nos genera el siguiente mapa, en el que al pulsar sobre el punto de la Plaza de
Cibeles…
Efectivamente se muestra la ventana informativa con los datos asociados a ese punto. En este
ejemplo hemos creado una función que nos crea los markers y sus correspondientes
infoWindows para ahorrar algo de código. Esta pequeña función recibe como parámetros el
GPoint donde queremos ubicar el marker, y un parámetro "nombre" que contiene la
información que queremos mostrar en la ventana informativa asociada.
Hay que reseñar que para asociar la aparición de la ventana con el clic del usuario sobre
nuestro punto tenemos que asociarle tal evento, que es lo que se hace en la sentencia:

marker.openInfoWindowHtml(nombre);
});
De esta manera cada vez que se hace un clic sobre el marker se muestra en la infoWindow la
información especificada en el parámetro "nombre". Nótese que hemos usado
openInfoWindowHtml, que toma su parámetro como código html, de modo que podríamos
incluir una maquetación al contenido de nuestra nueva infoWindow.

A lo largo de este artículo hemos visto las funciones más básicas de Google Maps, que
proporcionan las herramientas más rudimentarias para manejar el servicio. Pese a no haber
profundizado sobre la verdadera potencialidad del servicio, residente en el uso de XML, con lo
aquí aprendido tenemos ya el bagaje necesario para empezar a profundizar en la API de
Google Maps y empezar a crear scripts más avanzados.
Nota: Hemos visto aquí explicada el API 1 de Google Maps. Ahora estos códigos deben actualizarse
siguiendo el API 2 de Google Maps. Para ello podemos consultar el artículo Mapas de Google API 2.
Artículo por Javier Chaure
Mapas de Google API 2

Seguramente ya conozcamos los Mapas de Google, un sistema que permite acceder a fotos de
satélite de todo el mundo que ha tenido bastante éxito entre los Internautas. Si estamos
leyendo este artículo hasta podremos saber que los Mapas de Google tienen un API a través de
la cual podemos integrarlos como servicio en una página web. Esto permite que en una página
web desarrollada por nosotros podamos colocar mapas y vistas satélite de distintos puntos del
planeta, todo de manera gratuita.
Bueno, pues en DesarrolloWeb.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.
• Lo básico para empezar a desarrollar con Google Maps I
• Desarrollar con Google Maps II
Pero estos dos artículos utilizaban una API que Google ha actualizado, por lo que se hacía
necesaria una revisión para mostrar códigos de integración de Google Maps que sean
compatibles con el API que se utiliza ahora.
Sin embargo, los artículos anteriores siguen siendo muy interesantes para leer, porque
explican algunas cosas básicas como obtener una llave (Key) de Google, registrándonos en el
sitio de Google Maps, para poder utilizar los mapas en nuestro sitio.
Ahora vamos a ver un código para crear un mapa conforme a las especificaciones del Google
Maps API 2.
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#"
//<![CDATA[
//función para cargar un mapa de Google.

//Esta función se llama cuando la página se ha terminado de cargar. Evento onload
function load() {
//comprobamos si el navegador es compatible con los mapas de google
if (GBrowserIsCompatible()) {
//instanciamos un mapa con GMap, pasándole una referencia a la capa o <div> donde queremos mostrar el
mapa
var map = new GMap2(document.getElementById("map"));

//centramos el mapa en una latitud y longitud deseadas

map.setCenter(new GLatLng(40.407,-3.68), 5);
//añadimos controles al mapa, para interacción con el usuario
map.addControl(new GOverviewMapControl()); ;
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
</body>
</html>
El código está comentado para una mejor comprensión. Ahora a dar unas explicaciones
adicionales:
Primero, aunque esté más tarde en el código, vamos a ver lo que hay en el body de la página.
Hay que ver que hemos definido un evento onload="load()", que sirve para llamar a la función
que genera el mapa, una vez se ha terminado de cargar la página.
Dentro del cuerpo de la página nos fijamos en la etiqueta div donde se mostrará el mapa:
El tamaño definido con estilos a esta capa es importante, porque será el tamaño de
visualización del mapa. El API de Google Maps reconocerá la anchura y altura del contenedor
para mostrar un mapa justamente ocupando ese espacio.
Ahora nos fijamos en el código Javascript.
Primero se incluye la librería donde está el API Javascript para los mapas de Google.
<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#"

Si nos fijamos, este código necesita que indiquemos nuestra propia Key del API de Google
Maps, que hemos conseguido al registrarnos. La tendremos que poner sustituyendo el texto
=#TU LLAVE GOOGLE MAPS#.
Luego podemos pasar a la función que genera el mapa, que se carga cuando se termina de
mostrar la página (la llamamos por el evento onload).
Esa función está bastante comentada y además quiero dejar para artículos posteriores
distintos pormenores de la generación de mapas, pero es muy importante llamar la atención
sobre un punto crítico, que me dio un quebradero de cabeza cuando estaba probando los
mapas, hasta que conseguí dar con el error. Se trata del método de la clase GMap2
setCenter():
setCenter() se tiene que invocar justo después de instanciar el mapa!!!
Si intentamos instanciar el mapa y hacer cosas antes de centrarlo no funcionará. Esto es algo
que está muy claro en la documentación del API, pero que como es un poco larga de leer, es

fácil que no nos percatemos.
En mis pruebas me falló porque intentaba ponerle un tipo de mapa (vista satélite) y luego lo
centraba. El problema es que no sale ningún error específico y es difícil hallar el problema.
Tipos de mapa en Google Maps

Al desarrollar con Google Maps podemos escoger el tipo de mapa que verán los usuarios, entre
las distintas vistas predefinidas como son la vista satélite, vista de calles o vista híbrida
(satélite y calles en modo semi-transparente.
Para definir el tipo de mapa en un mapa de Google tenemos el método setMapType() de la

clase GMap2. El método setMapType() recibe el tipo de mapa que se desea ver. En principio
existen los siguientes tipos de mapa:
G_NORMAL_MAP
Es para un mapa normal, que es el mapa político, con los nombres de localizaciones. Este
mapa es el definido por defecto. En principio aparecen los distintos países, pero si ampliamos
veremos las ciudades importantes, carreteras, etc y si hacemos más zoom sobre una población
veremos los nombres de las calles, plazas, barrios, etc.
G_SATELLITE_MAP
Este mapa permite ver el mundo con imágenes tomadas desde satélite.
G_HYBRID_MAP
Este mapa combina la vista satélite y la vista normal. Sobre las fotos satélite se pintan encima
las distintas localizaciones, calles, etc.
Veamos un mapa de Google en el que definimos el tipo de mapa. Mostramos una vista satélite
en este caso.
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE" type="text/javascript"></script>
//<![CDATA[
//función para cargar un mapa de Google.
//La llamamos cuando la página se ha terminado de cargar. Evento onload
function load() {
//comprobamos si el navegador es compatible con los mapas de google
//instanciamos un mapa con GMap, pasándole una referencia a la capa o <div> donde queremos mostrar el mapa
//centramos el mapa en una latitud y longitud deseadas
map.setCenter(new GLatLng(41.375987390149106, 2.1778035163879395), 17);
map.setMapType(G_SATELLITE_MAP);
}
}
//]]>

</script>
</head>
</body>
</html>
Con este código tendremos una vista satélite de Barcelona centrada en la plaza donde está la
estatua de Colón señalando con el dedo. Un par de cosas que hay que ver:
• En la línea que carga el API de Google Maps tenemos que sustituir "AQUI-TU-CLAVE"
por la clave de usuario del API proporcionada en Google al registrarnos para usar sus
mapas en nuestro sitio web. http://maps.google.com/maps?file=api&v=2&key=AQUI-
TU-CLAVE
• La línea map.setMapType(G_SATELLITE_MAP); es donde cargamos el tipo de vista.
Nota: Existen otros artículos anteriores donde hemos explicado temas adicionales de los mapas de
Google que deberías conocer para entender este código.: Google Maps API 2
Ahora, si deseamos un mapa híbrido, sólo tendremos que cambiar la línea:
Por esta otra línea, donde especificamos otro tipo de mapa:
map.setMapType(G_HYBRID_MAP);
También podemos probar a quitar esa línea donde especificamos el tipo de mapa. Veremos
como sale entonces el mapa de calles. Es lo mismo que si especificásemos el tipo de mapa
normal.
map.setMapType(G_NORMAL_MAP);
Control para cambiar el tipo de mapa de Google

Se pueden incluir varios controles interactivos en los mapas de Google, por ejemplo para hacer
zoom sobre el mapa o para alternar entre distintos tipos de mapa.
Veremos ahora como hacer un mapa poniendo un control con tres botones, pinchando los
cuales el usuario puede seleccionar el tipo de vista que desea.
Esto se hace con el método addControl de la clase GMap2, pasando por parámetro una
instancia del tipo de control que se desea incluir. Habría que poner esta línea en el código,
después de centrar el mapa en la posición deseada.
Veamos el código completo de un mapa que tiene el control para cambiar el tipo de vista. El
mapa estará centrado en Peñíscola, provincia de Castellón, donde tenía la sede el Papa Luna.
<html>

<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE" type="text/javascript"></script>
//<![CDATA[
function load() {
}
}
//]]>
</script>
</head>
</body>
</html>
Incluir un mapa de tipo físico

En este artículo vamos a mostrar cómo trabajar con un tipo de mapa de Google especial,
presentado hace poco en el sistema de Google Maps. Se trata del mapa físico, que muestra la
tierra con un dibujo de su superficie que representa las montañas, ríos y otros accidentes
geográficos.
El mapa físico ha sido presentado hace relativamente poco tiempo. Al menos cuando iniciamos
este manual del API de Google Maps no existía. Por tanto, en los artículos publicados
anteriormente no habíamos hablado de la posibilidad de integrar un mapa físico. Lo veremos
ahora.
En el control de selección de tipo de mapa no aparece por defecto el tipo de mapa físico, con lo
que no se puede seleccionar por el usuario, a no ser que nosotros hagamos algo para
habilitarlo. Los tipos de mapas disponibles para el usuario por defecto a la hora de trabajar con
Google Maps son los que habíamos visto con anterioridad:
• G_NORMAL_MAP: es un mapa político, de países, ciudades con sus calles, etc.
• G_SATELLITE_MAP: mapa de imágenes de satélite.
• G_HYBRID_MAP: Un mapa que superpone la vista de calles encima de la vista satélite.
Por eso cuando colocamos el control para cambiar el tipo de mapa, nos aparecen tres botones,
para cambiar entre cualquiera de estos tipos de mapas.
Ahora bien, nosotros podemos aumentar la disponibilidad de tipos de mapas de Google, para
incluir nuevos mapas, como el mapa físico (G_PHYSICAL_MAP), otros mapas existentes,
cualquiera que puedan sacar en el futuro, o incluso mapas creados por nosotros mismos.
Para indicar el tipo de mapa que deseamos que se muestre se hace de esta manera:
map.setMapType(G_PHYSICAL_MAP);

Definir los tipos de mapa del control de selección de tipos de mapa
Ahora, para incluir otros tipos de mapas en el control de selección de tipo de mapa, debemos
utilizar el método addMapType() de la clase GMap2, indicando como parámetro el nombre del
tipo de mapa que queremos incluir. Por ejemplo:
map.addMapType(G_PHYSICAL_MAP);
Esto parece que no es un paso obligatorio para poder mostrar un tipo de mapa, sino para que
aparezca en el control y el usuario lo pueda seleccionar. Es decir, para hacer un mapa de
Google físico con map.setMapType(G_PHYSICAL_MAP) no es necesario que lo haya incluido
previamente con map.addMapType(G_PHYSICAL_MAP);
Ahora, para quitar un tipo de mapa del control, lo hacemos a través del método
removeMapType() de la clase GMap2, indicando un parámetro con el nombre del tipo de mapa
que queremos deshabilitar del control. Por ejemplo:
map.removeMapType(G_HYBRID_MAP);
Ejemplo de mapa de Google con dibujo tipo físico
Para acabar voy a mostrar cómo crear un mapa de Google físico, que además tenga un control
que permita cambiar entre los tipos de mapa político, satélite y físico.
function load() {
map.setCenter(new GLatLng(40.201022,-3.8736677),6);
map.addMapType(G_PHYSICAL_MAP);
map.removeMapType(G_HYBRID_MAP);
map.setMapType(G_PHYSICAL_MAP);
}
}
El código que podemos ver incluye llamadas a los métodos: addMapType(G_PHYSICAL_MAP),

para indicar que en el control de selección de tipo de mapa se debe incluir el mapa físico.
map.removeMapType(G_HYBRID_MAP), para eliminar del control de selección de tipos de
mapas el mapa híbrido. El método addControl(new GmapTypeControl()) para incluir en la
interfaz el control de usuario para cambiar el tipo de mapa. Y por último
setMapType(G_PHYSICAL_MAP), para definir que el mapa que debe mostrarse desde el
principio debe ser el mapa físico.
Podemos ver el ejemplo en marcha en una página aparte.
Puedes ver el código fuente de la página para ver el código del ejemplo completo.

Controles en mapas de Google

Como ya debemos de saber, los mapas de Google se pueden integrar en la página de cualquier
persona que desee, a través de un API en Javascript. En este caso vamos a ver cómo incluir
controles de usuario dentro de un mapa de Google, como funciona el API en este sentido y qué
tipos de controles hay disponibles.
Antes que nada decir que este artículo viene a ampliar la información del manual Desarrollo
con el API de Google Maps, por lo que muchas de las explicaciones para trabajar con los
mapas de Google la tenemos que consultar en otros capítulos del mencionado manual.
Tipos de controles de usuario
Los controles de usuario de los mapas de Google (controls en inglés) son interfaces desde
donde el usuario puede interaccionar con el mapa, para efectuar acciones como serían hacer
zoom, seleccionar entre tipos de mapa (satélite, mapa, híbrido), o moverse por un mapa
pequeño más general. Todos estos controles están ya creados y existen instrucciones y clases
para incluirlos fácilmente en un mapa de Google.
Aunque cualquier desarrollador podría crear sus propios controles, existen varios tipos de
controles de usuario en los mapas de Google ya creados de antemano:
• GLargeMapControl: Muestra una interfaz para hacer zoom y moverse por el mapa, con
una especie de regla donde se pueden escoger de las distintas aproximaciones de la
vista. Este control aparece en la parte superior izquierda.
• GSmallMapControl: Es otro control de usuario para hacer zoom y moverse por el mapa,
pero más pequeño, que también aparece en la esquina superior izquierda.
• GSmallZoomControl: Un control de usuario muy pequeñito, que aparece en la esquina
superior izquierda que simplemente tiene un botón para ampliar el zoom y otro botón
para reducirlo. Pero no tiene botones para moverse por el mapa.
• GScaleControl: Este es un control que simplemente informa sobre la escala actual del
mapa. Con este control no se puede interaccionar, es meramente informativo.
• GMapTypeControl: Este control incluye tres botones para cambiar entre distintos tipos
de mapa (mapa politico de calles y carreteras, mapa satélite y mapa híbrido -calles y
carreteras sobre el fondo de satélite)
• GOverviewMapControl: Con este control aparece un pequeño mapita en la esquina
inferior derecha donde aparece una vista general con menos zoom del mapa actual, a
través del cual también podemos movernos.
Añadir controles a un mapa de Google
Los controles de usuario para los mapas de Google que hemos visto se incluyen con una
sencilla instrucción Javascript a la hora de crear el mapa. Como los controles ya están
predefinidos en el API de Google Maps, simplemente tenemos que asociarlos al mapa que
estamos creando.
Para ello se utiliza un método de la clase GMap2 llamado addControl(). La clase GMap2 es la
que se utiliza para instanciar un mapa de google. Con ella creamos el objeto mapa y luego a
este objeto con addControl() le asociamos los controles deseados. El método addControl()
recibe una instancia del control de usuario que se desea crear.
Por ejemplo, si tenemos el mapa en un objeto llamado "map", ejecutaremos el método

addControl() de esta manera:

Podemos incluir todos los controles que deseemos haciendo varias llamadas al método
addControl(), pasando como parámetro distintas instancias de los controls que queremos
incluir.
Veamos un ejemplo completo de un mapa de Google que tiene una serie de controles de
usuario:
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&keyAQUI-TU-CLAVE-DEL-API"
//<![CDATA[
function load() {
map.addControl(new GSmallZoomControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
}
}
//]]>
</script>
</head>
</body>
</html>
Como habíamos dicho, el desarrollador puede crear sus propios controles para incluirlos en sus
mapas. Este es un tema que trataremos más adelante, pero por ahora podemos referiros a la
documentación del API Google Maps para obtener más información:
http://www.google.com/apis/maps/documentation/controls.html
Insertar una marca en un mapa de Google

Veamos rápidamente cómo insertar una marca en un mapa de Google, que nos sirve para
señalar un punto preciso en un mapa. Es un paso muy sencillo pero importante en el manejo
del API de Google Maps.
Este artículo está englobado dentro del manual de manejo del API de los mapas de Google, por
lo que muchas explicaciones nos las vamos a saltar porque ya las hemos presentado en
artículos anteriores.

Para insertar marcas tenemos un método, también de la clase GMap2, que sirve para insertar
un elemento sobre el mapa. El método en concreto se llama addOverlay() y recibe como
parámetro la marca que se quiere insetar.
En el código anterior el objeto map sería una instancia de la clase GMap2. La variable marker
contendrá la marca que se quiere insertar en el mapa.
Ahora veamos como crear la marca. Lo explicaremos en dos pasos.
1) Creamos un punto
La marca debe situarse en un punto concreto del mapa, que se define por una longitud y una
latitud (coordenadas x, y en el plano terrestre). Para crear un punto se tiene que utilizar la
clase GPoint, que recibe en el constructor la longitud y latitud de ese punto.
2) Creamos la marca
Para crear la marca simplemente utilizamos la clase GMarker, que en su constructor debe
recibir varios valores. Por ahora colocaremos sólo el único valor que es obligado indicar, que es
el punto sobre el que colocar la marca, creado en el paso anterior.
Ejemplo completo
Eso es todo lo que necesitamos saber por ahora. Aunque luego veremos otros detalles de
interés que se pueden personalizar en las marcas.
Veamos el código completo de un mapa de Google con una marca en la plaza "Puerta del Sol"
de Madrid.
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE-GOOGLE-MAPS"
//<![CDATA[
function load() {

}
}
//]]>
</script>
</head>

</body>
</html>
Cambiar el icono a una marca
La marca se crea con un icono por defecto, como una especie de chincheta roja, pero podemos
cambiarlo para personalizar el estilo de nuestros mapas.
Vamos a ver aquí como asociar un icono a una marca, cuando la instanciamos a partir de su
constructor.
El constructor de la marca recibe dos parámetros, el primero obligado es el punto geográfico y

el otro es el icono, que es opcional. En caso que no se especifique un icono se utiliza el
G_DEFAULT_ICON, que es una constante del API que contiene el icono por defecto.
var marker = new GMarker(point, miIcono);
la variable miIcono en este caso es un objeto de la clase GIcon, que puede crear así:
var miIcono = new GIcon(G_DEFAULT_ICON);

miIcono.image = "http://www.midominio.org/mapas-google/arrow_down.png";
En este caso, con la primera sentencia se crea un nuevo icono, a partir de G_DEFAULT_ICON.
Es decir, un icono nuevo pero con todas las carácterísticas cargadas del G_DEFAULT_ICON.
En la siguiente línea se modifica la imagen del icono, asignando un nuevo valor a su atributo
image.
Habría que hablar más sobre la creación y modificación de iconos, porque es un tema que
requiere mayor detenimiento para dominarlo, pero lo dejaremos para más adelante.
Personalizar iconos en los mapas de google

Crear y definir iconos para mapas de Google es algo que nos puede llevar un tiempo, porque
puede resultar minucioso ajustar los distintos parámetros para conseguir un icono con el
formato deseado. No obstante, vamos a dar aquí un pequeño ejemplo de cómo crear un icono
que podrá servir para los interesados en cambiar la imagen por defecto del icono.
Este artículo está englobado dentro del manual de Trabajo con el API de Google Maps.
Además, hay que decir que en este artículo vamos a realizar trabajos como crear marcas en
los mapas, que ya explicamos anteriormente y que conviene conocer.
Lo que tenemos que saber a la hora de crear un icono son las diferentes propiedades de la
clase GIcon, que son unas cuantas, porque los iconos se pueden personalizar en muchos
parámetros distintos. Las referencias completas de esta clase conviene leerlas en la propia
documentación del API de Google Maps. Pero nosotros vamos a explicar esos parámetros, al
menos los necesarios para crear iconos con la imagen personalizada.

Lo primero que tenemos que hacer es definir el icono personalizado. Luego podremos crear
marcas utilizando este icono. Crear un icono desde cero es complicado, porque requiere
ajustar muchos parámetros, pero el API nos permite crear iconos copiando las características
de otros iconos.
Entonces, por simplificar la tarea, vamos a crear un icono que es copia del icono que aparece
por defecto:
var iconoMarca = new GIcon(G_DEFAULT_ICON);
Esto crea una variable iconoMarca que es una instancia de la clase GIcon, donde hemos
utilizado G_DEFAULT_ICON como icono a copiar. G_DEFAULT_ICON es una constante del API
de Google Maps, que contiene el icono por defecto.
Luego vamos a definir la imagen del icono, alterando el atributo image de la instancia del
icono que había hecho antes. (Hablaré sobre formatos de las imágenes de los iconos más tarde
en este artículo)
iconoMarca.image = "/images/bandera-roja.png";
A continuación, a través del atributo iconSize, debemos de definir el tamaño de la imagen de

este icono. Los tamaños en el API se define con un objeto de la clase GSize.
var tamanoIcono = new GSize(17,17);

iconoMarca.iconSize = tamanoIcono;
Primero hemos creado el tamaño del icono y luego lo hemos asociado al atributo iconSize.
Del mismo modo, tendremos que definir la imagen que utilizaremos para la sombra y el
tamaño de la imagen utilizada.
iconoMarca.shadow = "/images/sombra-bandera2.png";
var tamanoSombra = new GSize(22,18);
iconoMarca.shadowSize = tamanoSombra;
Para acabar, sólo nos queda por editar el atributo iconAnchor. Este sirve para reposicionar el
lugar donde se colocan los iconos. Como se pueden hacer iconos con imágenes de distintos
tamaños, hay que ajustar bien donde queremos que queden, para que la imagen que
pongamos apunte al lugar correcto. Dicho de otra manera, como hemos cambiado el tamaño
de la imagen del icono por defecto (que habíamos copiado para crear el icono personalizado),
ahora hay que editar el atributo iconAnchor para que apunte al lugar correcto.
iconoMarca.iconAnchor = new GPoint(11, 16);
Al iconAnchor se les pasa un punto, que está formado por las coordenadas relativas a la
esquina superior izquierda de la imagen donde debe estar enlazado el icono. Es el punto de la
imagen que debe aparecer en el punto geográfico donde se coloca la imagen. En nuestro caso
el punto (11, 16), que es donde está la puntita de la bandera. (Ver imagen del ejemplo).
Ahora podemos hacer una marca con este icono que hemos creado así.
var marker = new GMarker(point, iconoMarca);
En el constructor de la clase GMarker indicamos el punto donde se debe colocar la marca y el

icono que que se desea.
Para acabar habría que señalar:
1) URLs de las imágenes que hemos utilizado en el ejemplo:

http://www.guiarte.com/images/bandera-roja.png
http://www.guiarte.com/images/sombra-bandera2.png
Los formatos de las imágenes los hemos creado como PNG de 24 bits con transparencia.
Hemos elegido ese formato porque permite una transparencia para las imágenes. Es una
transparencia avanzada con respecto a la que hemos utilizado otras veces con el formato GIF,
porque no hace halos blancos alrededor del dibujo. Este formato va a ser muy necesario
sobretodo para hacer la sombra de la marca, que tiene que ser forzosamente medio
transparente para que quede bien.
Podemos utilizar un formato PNG 24 bits con transparencia en los más habituales programas
de edición gráfica, como Photoshop. De hecho, nosotros hemos utilizado Photoshop para hacer
o retocar las imágenes utilizadas.
2) El enlace para ver el ejemplo:

http://www.guiarte.com/mapas-google/desarrolloweb/ej_icono.php
3) El código completo del ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAUnJY3ChJhF0YgyTSDJuVfBTqu-
zEVMasluaqfAe9FKyfKhfBExSs1s93Q7GOuBeSnaddg05sRmEGTs"
//<![CDATA[
function load() {
map.setCenter(new GLatLng(33,0),3);
//map.addControl(new GMapTypeControl());
//map.addControl(new GOverviewMapControl()); ;
//map.setMapType(G_SATELLITE_MAP);
//DEFINO EL ICONO
var iconoMarca = new GIcon(G_DEFAULT_ICON);
iconoMarca.image = "/images/bandera-roja.png";
var tamanoIcono = new GSize(17,17);
iconoMarca.iconSize = tamanoIcono;
iconoMarca.shadow = "/images/sombra-bandera2.png";
var tamanoSombra = new GSize(22,18);
iconoMarca.shadowSize = tamanoSombra;
iconoMarca.iconAnchor = new GPoint(11, 16);
function createMarker(point,nombre,continente,pais) {

//CREO LA MARCA EN EL PUNTO Y CON EL ICONO DESEADO

var marker = new GMarker(point, iconoMarca);

marker.openInfoWindowHtml("<span style='font-size: 8pt; font-family: verdana'>" + nombre + "<br><a
target='_parent' href='/destinos/" + continente + "/" + pais + ".html'>Ir al destino " + nombre + "</a></span>");
});
return marker;
}
var point = new GPoint (-4.0,40);

var nombre = "España";
var continente = "europa";
var pais = "espana";
var marker = createMarker (point,nombre,continente,pais);
var point = new GPoint (2,46);

var nombre = "Francia";
var pais = "francia";
var point = new GPoint (-5.0,32);

var nombre = "Marruecos";
var continente = "africa";
var pais = "marruecos";
var point = new GPoint (10.5,51.5);

var nombre = "Alemania";
var pais = "alemania";
}
}
window.onload=load
//]]>
</script>
<style type="text/css">
body{
margin:0px;
}
</style>
</head>
<body>

</body>
</html>

Eventos en mapas de Google

Para continuar el manual de desarrollo de mapas de Google, vamos a conocer el tratamiento
de eventos. El API de Google Maps tiene capacidad para tratar eventos. Esto no es nada
nuevo, porque Javascript también es un lenguaje de programación orientado a eventos y el API
de los mapas de Google está basado en Javascript.
Pero hay que señalar que el API de Google Maps incorpora unos cuantos eventos que son
propios de los mapas de Google y que no forman parte de los eventos básicos de Javascript.
Además, así como las peculiaridades de cada navegador pueden hacer el tratamiento de
eventos distinto entre distintas plataformas, el API de los mapas de Google es único y funciona
en cualquier navegador de la misma manera, es decir, es lo que llamamos cross-browser.
Los eventos en el API se manejan usando funciones que se llaman escuchadores de eventos,
que se tienen que registrar dentro de espacio de nombres de GEvent. Cada objeto del API de
los mapas de google dispone de una serie de eventos ya definidos, que además se ejecutan
dentro de un contexto y pasan distintos parámetros para identificar tal contexto. Por ejemplo,
un mapa de Google tiene el evento click (la clase GMap2 tiene multitud de eventos distintos),
que se desata cuando el usuario hace clic sobre el mapa. Dicho evento pasa los argumentos
overlay y point, el primero para pasar una marca (si es que el usuario hizo clic en una marca)
y el segundo para pasar el punto geográfico donde se hizo clic, si pulsó sobre cualquier área
vacía del mapa.
Todos los eventos que soporta el API de Google Maps, para cada clase, están perfectamente
documentados en la referencia que ofrece Google.
Sacar el punto donde ha hecho clic el usuario
Vamos a mostrar un primer ejemplo de tratamiento de eventos, muy sencillo, para extraer el
punto donde el usuario ha hecho clic en el mapa.
Primero tendríamos que crear el mapa, tal como lo hemos hecho en anteriores ocasiones, y
añadirle a GEvent un escuchador de eventos (Event listener) para cuando se hace clic sobre el
mapa.
GEvent.addListener(map, "click", tratamiento_clic);
La línea que tenemos que ver ahora es la última, donde se añade el escuchador de eventos.
GEvent es la clase a la que añadimos el event listener. Al añadir un evento para ser escuchado
tenemos que proveer de tres parámetros:
1. El objeto del API sobre el que se tiene que escuchar el evento
2. El nombre del evento que queremos detectar y hacer acciones cuando se haya captado
3. El nombre de la función que se encargará de tratar el evento.
En este caso se ha añadido un escuchador de evento, para realizar acciones cuando se hace
"clic" sobre el objeto map, que es el propio mapa de google. Las acciones son simplemente
ejecutar la función tratamiento_clic (fíjate que sólo ponemos el nombre de la función, sin los
paréntesis). Ahora tenemos que codificar el comportamiento de nuestro mapa cuando se hace
clic en él, es decir, codificar la función tratamiento_clic().
function tratamiento_clic(overlay,point){
alert ("Hola amigo! Veo que estás ahí porque has hecho clic!");
alert ("El punto donde has hecho clic es: " + point.toString());

Como vemos, la función recibe un par de parámetros, que son el contexto en el que se ha
detectado el evento. Estos dos parámetros son:
• overlay: No lo vamos a utilizar ahora. Tiene que ver cuando el usuario hace clic en una
marca de un mapa.
• point: que es el punto o coordenadas geográficas donde el usuario ha hecho clic.
El código de la función es simplemente un par de alert, para mostrar mensajes al usuario. El
primer alert simplemente está para dar un saludo al visitante y el segundo muestra las
coordenadas (x e y - latitud, longitud) donde se ha hecho clic. Dichas coordenadas se extraen
del parámetro point que hemos recibido como contexto del evento, al que hemos pasado el
método toString() para que extraer su codificación en cadena de caracteres.
El ejemplo puede verse en marcha en una página aparte.
Manejar un evento en un mapa de Google para reposicionar

una marca
En el anterior capítulo del manual de desarrollo con el API de mapas de Google vimos los
primeros detalles sobre el tratamiento de eventos. Ahora vamos a seguir con otro ejemplo de
desarrollo en el que vamos a hacer un mapa que tiene una marca. Pulsando en cualquier parte
del mapa reposicionaremos la marca a la posición donde se ha hecho clic.
El evento que vamos a ver es el click en el objeto map, de la clase GMap2. En este caso,
recuperaremos el punto donde se ha hecho click para colocar la marca en ese punto.
Primero veamos el código para crear el mapa con una marca:

map.setCenter(new GLatLng(40,-4),3);
var point = new GPoint (-4,40);

Este mapa, centrado en España, tiene una marca también en España. Ahora veamos el sencillo
código para detectar un evento de tipo click sobre el mapa:
GEvent.addListener(map, "click", function (overlay,point){

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

En la función empezamos con un if(point) que sirve para saber si hemos recibido un punto
(Sólo recibimos el punto si se ha pulsado sobre un área vacía del mapa), porque sólo entonces
queremos recolocar la marca. Entonces llamamos al método de la marca setPoint(point) para
reposicionar la marca al punto recibido por parámetro.
Es bien simple ¿no? Podemos ver el ejemplo en marcha en este enlace.
Para acabar, os dejo el código completo de este ejercico:

<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=llave"
//<![CDATA[
function load() {


if (point){
}
});
}
}
window.onload=load
//]]>
</script>
</head>
<body>
</body>
</html>

Crear una marca y mostrar una ventana de información con

sus coordenadas
En este artículo vamos a ver como insertar una marca en un mapa de Google al hacer clic
sobre el mapa, y a su vez, que se muestre una ventana de información con las coordenadas
donde se ha situado la marca.
Es un ejemplo sencillo en el que veremos cómo tratar un evento clic sobre el mapa, la
colocación de una marca y posteriormente la presentación de una ventana de información.
También trataremos con la clase GLatLng para extraer las coordenadas de un punto.
Puedes hacerte una idea exacta de lo que se va a explicar en este artículo accediendo a una
página con ejemplo en funcionamiento.
Esta nueva guía para el trabajo con los mapas de Google se engloba dentro del Manual del Api
de Google Maps que estamos publicando en DesarrolloWeb.com.
En un artículo anterior aprendimos a colocar una marca en un mapa de Google como respuesta
al clic de un usuario, por lo que esta parte la daremos por conocida.
Primero podemos crear una marca, aunque todavía no la mostremos en el mapa de Google,
puesto que sólo querremos que aparezca en el momento que el usuario haga clic en el mapa.
Para crear una marca necesitamos un punto (objeto de la clase GLatLng), así que de momento
vamos a obtener un punto a partir del centro configurado en el mapa de Google. Cuando se
haga clic, antes de mostrar la marca, reposicionaremos ese punto para colocar la marca en el
lugar donde se ha hecho clic. Por tanto, de momento el punto donde creemos esta marca da
un poco igual.
var point;
point=map.getCenter();
Luego creamos la marca en el punto que habíamos guardado antes.

var marker = new Gmarker(point);
Después hay que añadir un evento al mapa para que, cuando se pulse, se reposicione la
marca, se muestre en el mapa y aparezca un bocadillo o ventana de información con las
coordenadas donde se ha colocado la marca.
marker.openInfoWindowHtml("<div style='font-size: 8pt; font-family: verdana'>Mi marca situada en<br>Latitud: "
+ point.lat() + "<br>Longitud: " + point.lng() + "</div>");
}); Comento algunas líneas de este código:
Con esto cambiamos la posición de la marca.

Con esa otra línea hacemos que la marca se muestre en el mapa (puesto que hasta ahora se
había creado la marca pero no se mostraba en ningún sitio)
Por último se incluye la siguiente linea dentro de la función del evento:
marker.openInfoWindowHtml("<div style='font-size: 8pt; font-family: verdana'>Mi marca situada en<br>Latitud: " +
point.lat() + "<br>Longitud: " + point.lng() + "</div>");
Esto es para que, a la vez que se muestra una marca, también aparezca una ventana de

información, con las coordenadas de la misma.

Al construir el bocadillo con la información utilizamos los métodos del punto donde hizo clic el
usuario point.lat() y point.lng() para conseguir las coordenadas del mapa, es decir, la latitud y
longitud.
Para terminar, vamos a mostrar el código completo para crear una marca en el mapa al hacer
clic.
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE-GOOGLE-MAPS "
function load() {
var point;
point=map.getCenter();
marker.openInfoWindowHtml("<div style='font-size: 8pt; font-family: verdana'>Mi marca situada
en<br>Latitud: " + point.lat() + "<br>Longitud: " + point.lng() + "</div>");
});
}
}
window.onload=load
//]]>
</script>
html,body{
margin:0px; height:100%;
}
</style>
</head>
<body>
<div id="map" style="height: 300px; width:500px"></div>
</div>
</body>
</html>
Puede verse el ejemplo en marcha en una página aparte.
Artículo por Gema Maria Molina Prados
Mostrar la posición de una marca de Google Maps en un

formulario
Ahora vamos a complicar un poco el ejemplo anterior de recolocar una marca en un mapa de
Google, para poner en un formulario en la propia página los valores de latitud y longitud. Esto

nos puede servir para saber el punto exacto donde se hace clic, para poder obtener la latitud y
longitud de cualquier punto geográfico.
En el ejemplo vamos a tener el mapa de Google y un formulario. El mapa de google, así como
el tratamiento del evento con el API de Google Maps ya lo vimos en el anterior capítulo, por lo
que no los voy a explicar.
Veremos entonces los nuevos elementos en este ejercicio. Primero el formulario:
<form action="#" id="posicion" name="posicion">

X: <input type="text" name="x" value="" />
<br />
Y: <input type="text" name="y" value="" />
</form>
Vemos el formulario, que es como cualquiera que hayamos utilizado en HTML, al que le hemos
puesto un name="posición", para podernos referir a él desde Javascript. Luego vemos los
campos X e Y, que son campos de texto normales, con sus respectivos name, para poder
actualizar sus valores desde el script.
Ahora el único cambio que hemos incorporado en el código de creación del mapa de Google, es
el manejo del evento click sobre el mapa.

if (point){
document.posicion.x.value=point.x
document.posicion.y.value=point.y
}
});
Simplemente hemos incluido un par de líneas adicionales para acceder al formulario y

actualizar los valores de los campos <input> de las coordenadas.
Eso es todo. Podemos ver el ejemplo en marcha en este enlace
El código completo del ejercicio es este:

<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=TU-GOOGLE-MAPS-KEY"
//<![CDATA[
function load() {



if (point){
}
});
}
}
window.onload=load
//]]>
</script>
</head>
<body>
<div id="formulario" style="margin: 10px">
<form action="#" id="posicion" name="posicion">
X: <input type="text" name="x" value="" />
<br />
Y: <input type="text" name="y" value="" />
</form>
</div>
<br />
<br />
Por <a href="http://www.guiarte.com">guiarte.com</a>
</body>
</html>
Averiguar el zoom en un mapa de Google Maps

Cuando generamos un mapa de Google, utilizando el API de los Google Maps, definimos el
zoom con el que tiene que comenzar el mapa. Esta es una tarea que hemos repetido
numerosas veces a lo largo del Manual de API de Google Maps. Pero el mapa es interactivo y el
usuario utilizándolo puede haber cambiado el zoom, para ampliar o reducir la definició. En este
artículo vamos a aprender a obtener el zoom actual de un mapa cuando se produzca un
evento, es decir, como respuesta a una acción de un usuario. Los eventos en mapas de Google
ya los hemos tratado anteriormente en este manual, de hecho, este artículo va a ampliar otro
que ya habíamos realizado: Mostrar la posición de una marca de Google Maps en un
formulario. En este caso mostraremos el zoom actual del mapa de google al hacer el usuario
clic en el mapa y lo escribiremos en un formulario en la propia página. En realidad saber el
zoom en un mapa es simple, sólo tenemos que utilizar el método getZoom() de la clase
GMap2. getZoom() devuelve un número entero, que es el zoom actual del mapa.
Pongamos que tenemos el objeto mapa en una variable llamada "map". Pues entonces el
método lo ejecutaremos con esto:
zoom_actual = map.getZoom();
Así habríamos guardado en una variable zoom_actual el valor entero del zoom del mapa.

Si queremos mostrar en un formulario en la página el zoom actual, como respuesta al evento

clic, haremos algo como esto:

if (point){
zoom_actual = map.getZoom();
document.posicion.zoom.value=zoom_actual
}
});
Recordar que para entender bien este código tendremos que leer el artículo anterior, así como
posiblemente los precedentes de este manual que tratan sobre eventos.
Bueno, además tendremos que colocar en el formulario un campo nuevo para escribir el zoom
del mapa:
zoom actual: <input type="text" name="zoom" value="" />
Esto es todo. Podemos ver el ejercicio en marcha en este enlace.
Para ver el código completo del ejercicio simplemente muestra el código fuente de la página
del ejemplo.
Evento zoom en un mapa de Google

Estamos en el manual de creación de Google Maps, tratando los eventos sobre mapas de
Google. En este caso vamos a ver un evento que se ejecuta en el momento en el que el
usuario cambia el zoom del mapa. Es el evento “zoomend”, que se desata en el momento que
el mapa cambia el zoom.
El tratamiento de eventos en mapas de Google ya lo explicamos en el artículo Eventos en
mapas de Google, en este caso vamos a ver otro ejemplo de trabajo con eventos, que servirá
para ilustrar mejor el tema.
Como se dijo, para crear un tratamiento de un evento producido por el usuario, se tiene que
añadir un escuchador de evento con el método addListener de la clase GEvent. Este método
tiene que recibir el objeto sobre el que se escuchará el evento, el tipo de evento y la función
que se ejecutará como respuesta al evento (el manejador de eventos). Para obtener más
explicaciones de este paso consultar el artículo donde se tratan los eventos de mapas de
google en general.
El manejador de evento zoomend, es decir, la función que se ejecuta cuando se produce el
evento, recibe dos variables. Una es el antiguo zoom que tenía el mapa y otra el nuevo zoom
que se ha colocado.
Suponemos que tenemos creado un mapa de google y que está declarado en el objeto map de
la clase GMap2. Entonces, si quisiéramos crear un evento para que nos mostrase en una caja

de alerta las dos variables con el antiguo zoom y el nuevo, haríamos algo como esto:
GEvent.addListener(map, "zoomend", function (antiguoZoom, nuevoZoom){
alert("Has cambiado el zoom del mapa.\nAntiguo Zoom: " + antiguoZoom + "\nNuevo Zoom: " + nuevoZoom);
});
Este simple ejercicio se puede ver en marcha aquí.

Volcamos el zoom en un formulario, cuando se produce el evento
Ahora, por complicarlo algo más, mostramos el zoom en un formulario, que se actualiza
cuando el usuario cambia el zoom en el mapa. Parte de este ejercicio lo hemos tratado
previamente en otro artículo: Averiguar el zoom en un mapa de Google Maps.
Anteriormente ya hacíamos un volcado del zoom en un formulario, pero si el zoom se
cambiaba no se actualizaba el valor hasta que no se cambiaba la marca pulsando el cualquier
parte del mapa. Podemos ver lo que estoy diciendo en esta página.
Como se puede ver, hay un formulario en la parte de abajo, que se actualiza cada vez que se
resitúa la marca. Ahora vamos a actualizarlo también cuando el usuario cambia el zoom. Para
ello tenemos que definir un escuchador del evento zoomend en el mapa.
Realmente, sólo hemos añadido estas líneas para que se produzca el comportamiento deseado
cuando se hace zoom en el mapa.
GEvent.addListener(map, "zoomend", function (antiguoZoom, nuevoZoom){
document.posicion.zoom.value=nuevoZoom
});
Podemos ver el ejemplo en marcha.

Viendo su código fuente podemos hacernos una idea del ejercicio completo. Pero recordamos
que para entenderlo tenemos que seguir el artículo Averiguar el zoom en un mapa de Google
Maps.
Maquetar una página con un mapa de Google, usando CSS

La maquetación con mapas de Google, que creamos con el API de Google Maps, es muy
sencilla, ya que el mapa ocupa el espacio disponible en la capa donde esté contenido. Así pues,
al incorporar un mapa a una página web, no tenemos que especificar el tamaño del mapa por
Javascript ni nada parecido, simplemente el mapa de Google tomará el los atributos de ancho
y alto de la capa (el <div> ) donde está contenido. Esto es dinámico, es decir, si cambia el
espacio disponible de la capa donde está el mapa -ya sea porque el usuario ha cambiado el
tamaño de la ventana o porque se han alterando los atributos width y height de la capa con
Javascript o por cualquier modo- cambiará automáticamente el tamaño del mapa para
ajustarse dinámicamente al espacio disponible.
Dicho esto, puede resultar poco revelador este artículo, porque no vamos a ver nada de
Javascript ni de creación de mapas de Google, sino que vamos a mostrar como maquetar con
CSS, teniendo en cuenta que en una de las capas hay un mapa de Google. No obstante,
seguro que algunas de las informaciones proporcionadas aquí no van a ser triviales para los
lectores.

En DesarrolloWeb.com ofrecemos un manual en el que puedes aprender a trabajar con el API

de Google Maps.
También recomiendo la lectura del material que ofrecemos en DesarrolloWeb.com sobre la

maquetación CSS, pues voy a dar por sabidos los aspectos sobre maquetación con hojas de
estilos y por tanto, no los voy a explicar.
Los atributos de altura y anchura de un mapa son la capa que lo contiene
El ejemplo más sencillo que podemos encontrarnos para maquetar un mapa de google es que
tenga dimensiones en ancho y alto fijas. Es como hemos colocado los mapas en el manual
hasta este momento:
En este ejemplo el mapa ocupa 765 píxel de ancho y 388 de alto. Esto no tiene ningún secreto.
¿Pero qué pasa si queremos que un mapa de Google Maps tenga el ancho de toda la ventana
del navegador? Porque sabemos que el navegador puede tener distintos tamaños, dependiendo
de la definición de pantalla del visitante y si la ventana está maximizada o dimensionada de
cualquier otra forma.
Entonces es muy sencillo, podemos colocar width:100% en la declaración de estilos css de la

capa donde está el mapa.
<div id="map" style="width: 100%; height: 388px"></div>
Este mapa ocuparía todo el área disponible de la ventana del navegador, o bien de la capa
donde estuviera contenido.
El ejemplo se complica si queremos que el mapa de Google ocupe además todo el alto
disponible en el navegador, que también, sabemos, puede ser variable dependiendo de las
características de pantalla o del estado de la ventana del browser. Lo normal es que
probásemos algo como esto:
<div id="map" style="height: 100%; width:100%;"></div>
Pero esto tal cual, sin hacer ninguna otra cosa, tiene un problema y es que misteriosamente el
mapa aparece vacío o con height = 0. Esto es porque los navegadores tienen problemas al
maquetar con height=100%. La idea para solucionarlo es colocar a todas las capas que
contengan al mapa height:100%, así como a las etiquetas <BODY> y <HTML> que también
deberían tener el height de 100%. Entonces nos debería funcionar y el mapa ocuparía todo el
alto y ancho de la ventana.
Referencia: Podemos ver una FAQ con explicaciones sobre utilización del height:100% en CSS.
Ahora veamos el ejemplo de un mapa de Google Maps que ocupa todo el ancho y alto del
espacio en una página aparte.
Maquetar un mapa de Google con width y height 100%, pero mezclado con otros
elementos

Para acabar veamos un ejemplo de maquetación de un Google Maps que ocupa el 100% del
espacio, pero que tiene una cabecera y una barra lateral. La cabecera y el lateral ocupan unos
espacios fijos y el mapa de google ocupará todo el sitio que dejan libre otros elementos de la
maquetación.
Para explicarlo lo más sencillo es ver directamente el ejemplo en una página aparte.
El ejercicio es simple, pero necesitaremos conocimientos de CSS sobre maquetación y

posicionamiento. El código es el siguiente:

<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=coloca-tu-llave"
//<![CDATA[
function load() {
}
}
window.onload=load
//]]>
</script>
html,body{
margin:0px;
height:100%;
}
</style>
</head>
<body>
<div id="contenedor" style="width:100%; height:100%;">
<div id="cabecera" style="background-color: #ffcc99; font-weight:bold; font-size: 110%; height: 23px; padding:
3px; margin-bottom:10px;">Esto es la cabecera!!</div>
<div id="lateral" style="float:right; width:200px; height:100%; background-color:#eeff99;">
<div id="contenidolateral" style="padding: 30px 10px 0 10px;">
Por <a href="http://www.guiarte.com">guiarte.com</a>
<br />
<br />
Esto son contenidos que colocamos en el lateral izquierdo. Resulta muy fácil maquetar con un mapa de Google en
una capa que toma el tamaño del contendor donde se encuentra.
</div>
</div>
<div id="map" style="height: 100%; margin-right:210px;"></div>
</div>
</body>
</html>

Dibujar líneas en mapas de Google

Seguimos estudiando la creación de mapas de Google con el API de Google Maps, en esta
ocasión para mostrar el proceso de creación de líneas sobre mapas de Google. Las líneas se
dibujan encima de los mapas y se muestran con una pequeña transparencia, para que se
pueda ver lo que hay debajo de ellas.
Dibujar líneas o polígonos es un modo muy interesante de marcar elementos o caminos en el

mapa y resulta muy sencillo. Sólo necesitamos conocer previamente unos cuantos conceptos
sobre la creación de mapas, que ya vimos en artículos anteriores, en el manual: Manual del
API de Google Maps.
Para ilustrar este ejemplo, vamos a crear una línea en un mapa de Google que va de Madrid a
Barcelona. Podemos ver el ejemplo en marcha en una página aparte.
Clase GPolyline
Esta clase sirve para dibujar líneas o polígonos en un mapa. Intenta hacer el trabajo utilizando
las características de dibujo con vectores de los navegadores y si no es posible superpone una
imagen al mapa.
Para construir un polígono se necesitan varios parámetros:

• Array con los vértices de las líneas, que se indica con los distintos puntos
• El color de las líneas, que es un RGB en hexadecimal, como los que utilizamos para
definir colores en HTML, comenzando por #. Ej: #ff8800.
• El ancho de las líneas, en pixels.
• La opacidad con un valor que va de cero a uno.
• Otras opciones.
El único parámetro que necesitamos indicar de manera obligada son los puntos de las líneas,
los otros parámetros son opcionales.
Para indicar los puntos de los vértices, se utiliza la clase GLatLng, que sirve para crear objetos
que tienen las dos coordenadas geográficas latitud y longitud. Por ejemplo, para definir los
puntos donde están Madrid y Barcelona:
var madrid = new GLatLng(40.4165020, -3.702564);

var barcelona = new GLatLng(41.38878, 2.15898);
Ahora que tenemos los puntos de la línea a crear, podemos hacer la llamada al constructor del
polyline:
var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4);
Como vemos, se ha definido una línea con dos puntos, con color #0000dd que es un azul, con
6 pixels de ancho y 0.4 de opacidad.
Pintar la línea en el mapa con addOverlay
Para que esta línea quede dibujada en el mapa se utiliza el método de GMap2 llamado
addOverlay() al que le pasamos por parámetro el polyline que habíamos construido.

map.addOverlay(polyline);
Todo el código
Este es el código completo para la configuración del mapa del ejemplo:
function load() {


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

map.addOverlay(polyline);
}
}
window.onload=load
Podemos ver el código completo del mapa accediendo al ejemplo y utilizando la funcionalidad
del navegador de "Ver código fuente".
Ejemplo completo en marcha en http://www.guiarte.com/mapas-

google/desarrolloweb/linea.php
Polígonos con líneas geodésicas en mapas de Google

Continuamos la explicación del artículo anterior sobre mapas de Google y polígonos.
Anteriormente vimos cómo crear una línea recta en un mapa de Google entre dos puntos
dados. Ahora vamos a ver cómo crear un polígono con varios puntos y líneas geodésicas.
Primero habrá que explicar qué son líneas geodésicas. Como sabemos, la tierra es esférica y
por tanto su superficie tiene una curvatura, a pesar que en los mapas aparece la tierra sobre
un plano recto. Por ello, para ir de un punto a otro en el mapa, realmente no vamos a ir en
línea recta, sino realizando esa forma de la curvatura de la tierra. Esto es porque la distancia
más corta entre dos puntos de la tierra se representaría con una curva geodésica.
Para decirle al API de mapas de Google que trace líneas geodésicas sobre el mapa tenemos
que especificarlo a la hora de instanciar el polígono. Para ello primero tenemos que definir una
opción adicional al polígono:
var opciones_poligono = {geodesic:true};
Ahora esas opciones las pasamos como último parámetro en el constructor del objeto de la
clase GPolyline.
Imaginemos que queremos construir un polígono que hace esta ruta: Madrid, Moscú,
Estambul, Roma, Túnez y Madrid. Primero crearíamos los puntos de esas ciudades:


var moscu = new GLatLng(55.7522222, 37.6155556);
var estambul = new GLatLng(41.0186111, 28.9647222);
var roma = new GLatLng(41.9, 12.4833333);
var tunez = new GLatLng(36.8027778, 10.1797222);
Y luego instanciaríamos el polígono, indicando que queremos líneas geodésicas, de esta forma:
var poligono = new GPolyline([madrid, moscu, estambul, roma, tunez, madrid], "#cccc00", 6, 0.6,
opciones_poligono);
Por último ordenamos que se pinte el polígono en el mapa con el método addOverlay().
map.addOverlay(poligono);
Podemos ver un ejemplo que hace este mapa con el polígono con líneas geodésicas.
Polígonos en mapas de Google

El API de Google Maps permite dibujar varios tipos de elementos para superponer sobre los
mapas de Google. En nuestro manual sobre el desarrollo con el API de Google Maps ya
explicamos la manera de colocar marcas y líneas. Ahora le toca el turno a los polígonos.
Los polígonos en mapas de Google se colocan de manera similar a como se hacen las líneas,
indicando los puntos o vértices, con sus correspondientes coordenadas de latitud y longitud. En
el caso de los polígonos, tenemos que indicar los puntos desde el primero hasta el último,
siendo el último punto el mismo que el primero, para que se pueda cerrar el polígono.
La parte novedosa con respecto a las líneas es que en los polígonos se puede indicar no sólo el
color del borde, sino también el color del relleno con el que queremos pintar la parte interna
del polígono.
La clase GPolygon es la encargada de dar soporte a la implementación de polígonos en los
mapas. Para crear un polígono tenemos que utilizar el constructor de la clase GPolygon, que
recibe una serie de parámetros para la configuración del mismo. La instanciación de un
polígono se realiza de la siguiente manera:
var objeto_poligono = new GPolygon([punto1, punto2, …, punto1], color_borde, tamaño_borde, opacidad_borde,
color_relleno, opacidad_relleno);
Voy a listar y explicar los parámetros del constructor de GPolygon para que queden claros:
Puntos de los vértices: Como se puede ver, puede generarse un polígono con un número
indeterminado de vértices. Lo único es que el recorrido de vértices tiene que estar cerrado, es
decir, empezar y acabar en el mismo punto, para que no se produzcan comportamientos
indefinidos a la hora de pintar el polígono. Todos los puntos o vértices tienen que ser indicados
con un objeto GLatLng, que se compone de las coordenadas de latitud y longitud.
Color del borde: Una cadena con un color RGB en hexadecimal, tal como de definen en HTML.
Tamaño del borde: Un número entero, que es el número de píxeles del borde.

Opacidad del borde: Un número entre 0 y 1. Cuanto más bajo, más transparente y cuanto
más alto más opaco.
Color_relleno: Un valor de tipo cadena con el color RGB en hexadecimal.
Opacidad del relleno: También un valor entre 0 y 1, igual que la opacidad del borde.
Para dar la orden a un mapa de Google que dibuje un polígono generado se utiliza el método
addOverlay() del objeto mapa, de la clase GMap2, de manera similar a como hicimos al dibujar
líneas:
map.addOverlay(objeto_poligono);
Ejemplo de creación de un polígono en un mapa de Google Maps

Ahora veamos un ejemplo de creación de un polígono. En este caso hemos realizado uno cuyos
lados se superponen a la muralla de Ávila y cuyo interior sería la ciudad amurallada. Primero
hemos tenido que obtener y generar los puntos (latitud y longitud, con la clase GLatLng) de los
vértices de la muralla:
var muralla1 = new GLatLng(40.65627360348711, -4.707534313201904);
Luego creamos el polígono utilizando estos puntos y las configuraciones deseadas:

var polygon = new GPolygon([muralla1, muralla2, muralla3, muralla4, muralla5, muralla6, muralla1], "#669933", 5,
0.7, "#996633", 0.4);
Esto creará un polígono sobre los vértices sacados de la muralla de Ávila, con color de borde
#669933, tamaño de borde 5 píxel, opacidad del borde 0.7 (tirando a opaco), con color del
relleno #996633 y opacidad del relleno 0.4 (tirando más a transparente).
Por último, mostraríamos el polígono con addOverlay().
map.addOverlay(polygon);
Podemos ver el ejemplo en marcha en: http://www.guiarte.com/mapas-google/desarrolloweb/

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

Para desarrollar alguna funcionalidad adicional de los polígonos en los mapas de Google vamos
a programar un añadido al script que crea un polígono, que vimos en el artículo anterior, para
ocultar y mostrar el polígono por respuesta a un evento de usuario.
Esta funcionalidad de mostrar y ocultar polígonos es común a las distintas overlays que hemos
tratado con anterioridad en el manual de mapas de Google (API de Google Maps).
El ejercicio se trata de colocar una marca y un polígono en un mapa de Google. Al pulsar la
marca se ocultará el polígono y al volverla a pulsar se mostrará de nuevo, y así sucesivamente.

Podemos ver el ejemplo en marcha para entender bien el objetivo de este taller de Google
Maps.
Como hemos dicho, en el artículo anterior vimos como colocar un polígono en un mapa de
Google. La única diferencia con este caso es que hemos definido la variable donde vamos a
colocar el objeto polígono, de la clase GPolygon, como global a toda la página. Esto es porque
este objeto polygon lo tendremos que acceder desde otras funciones para mostrarlo u ocultarlo
y si no está como variable global será imposible referenciarlo. (Para crear una variable glogal
basta con declararla fuera de ninguna función, mira el código fuente del ejercicio terminado
para ver cómo hacerlo.)
Hemos creado también, como decíamos, una marca:
var punto_marca = new GPoint (-4.702, 40.6570);
var marca = new GMarker(punto_marca);
map.addOverlay(marca);
Luego, tenemos que crear el evento "click" a la marca, para que cuando se hace clic sobre ella
se llame a una función que se encargue de mostrar u ocultar el polígono. Con el API de Google
Maps se define un evento de la siguiente manera:
GEvent.addListener(marca, "click", ocultar_mostrar_poligono);
Esto añade el escuchador de evento "click" asociado al objeto contenido en la variable marca.
Cuando y cuando se detecte el evento se ejecuta la función ocultar_mostrar_poligono(). Por
decirlo de otra manera, hemos definido un evento click sobre una marca, para ejecutar la
función ocultar_mostrar_poligono() cuando se produzca.
Nos quedaría ver el código de la función que muestra u oculta el polígono. Esta función hace
uso de la variable global donde hemos almacenado el objeto polígono, para acceder a los
métodos de dicho objeto.
function ocultar_mostrar_poligono(){
if (polygon.isHidden()){
//alert("Estaba oculto");
polygon.show();
}else{
//alert("Estaba mostrandose");
polygon.hide();
}
}
Lo primero que se hace es ver si el poligono esta o no oculto, con el método isHidden(), con
polygon.isHidden(), que devuelve true en caso que esté oculto y false en caso que esté
mostrándose.
En caso de estar oculto, llamamos al método que lo muestra, con polygon.show().
En caso que estuviera visualmente activo, llamamos al método para ocultarlo, con
polygon.hide().
Y no hay más misterios, que no hayamos visto con anterioridad en el manual del API de
Google Maps.
Dejo de nuevo el link para ver el ejemplo en marcha en una ventana aparte. Observar su
código fuente para obtener más información.

Superponer una imagen en un mapa de Google

En este artículo del manual de Google Maps vamos a explicar el modo de superponer una
imagen a un mapa, lo que en el API de desarrollo de mapas de Google llaman "Ground
Overlays". . Puede servirnos para ofrecer información gráfica del lugar que se está
visualizando, o añadir elementos para llamar la atención del usuario.
La tarea es muy simple, pues sólo necesitamos definir el lugar donde se tiene que pegar la
imagen que deseamos mostrar y la URL donde se localiza el archivo gráfico a superponer. La
imagen que coloquemos siempre aparecerá sobre el propio fondo, tapando lo que haya debajo
Las imágenes que se superponen se crean a través de la clase GGroundOverlay, cuyo

constructor recibe una URL o camino relativo de la imagen y los límites del mapa donde
colocarla.
var imagen = new GGroundOverlay("archivo-grafico.jpg", limites_imagen);
Los límites de la imagen son a su vez otra clase, llamada GLatLngBounds, que es como un
rectángulo formado por dos puntos geográficos, las coordenadas Sur-Oeste y Norte-Este,
definidas a su vez con los valores de latitud y longitud. Podemos ver la siguiente imagen, en la
que hemos marcado los dos puntos que necesitamos para definir los bordes o límites de la
imagen, que utilizaremos en el constructor de la clase GLatLngBounds.
En el constructor debemos especificar primero el punto X1 y luego el punto X2.
var limites_imagen = new GLatLngBounds(x1, x2);
A su vez, los puntos x1 y x2 son coordenadas latitud y longitud que debemos crear con la clase
GLatLng, de esta manera:
var x1 = new GLatLng(valor_latitud, valor_longitud);
Una vez tenemos el objeto imagen de la clase GLatLngBounds, tenemos que colocarlo en el
mapa con el método del mapa addOverlay(), que habíamos utilizado anteriormente para
superponer elementos en mapas de google como los polígonos.
map.addOverlay(imagen);
Vemos el código completo para hacer un mapa con una imagen superpuesta.

map.addControl(new GSmallMapControl());

//creo los puntos de los límites de la imagen

var x1 = new GLatLng(40.489259,-3.877358);
var x2 = new GLatLng(40.4923928,-3.8675308);
//defino los límites donde voy a colocar la imagen
var limites_imagen = new GLatLngBounds(x1, x2);
//Creo un ground overlay
var imagen = new GGroundOverlay("lasrozas.jpg", limites_imagen);
//coloco la imagen o ground overlay en el mapa
map.addOverlay(imagen);
Como se ha podido comprobar, superponer una imagen es algo relativamente sencillo, aunque
tenemos que definir bien los límites de la imagen para que el renderizado quede bien y no se
estire demasiado la foto.
El ejemplo en marcha lo podemos ver en una página aparte.
Incluir las fotos de Panoramio en un mapa de Google

Como debemos saber, Panoramio es un servicio de Google donde los usuarios pueden enviar
fotos de cualquier parte del mundo. A través del API de Google Maps podemos, de una manera
muy rápida, sobreponer una capa con las fotos de la base de datos de Panoramio. En este
artículo veremos cómo incluir dichas fotos para enriquecer nuestros mapas con contenido
actualizado y de utilidad.
Este artículo es muy sencillo, al menos así les parecerá a todos los que hayan seguido el
Manual de programación del API de los Mapas de Google que venimos publicando en
DesarrolloWeb.com. Sólo vamos a utilizar una nueva clase que no habíamos visto hasta ahora
que es la clase Glayer.
Esta clase GLayer sirve para superponer capas con información geográfica de otros sitios web.
En este caso utilizaremos el sitio web de Panoramio para incluir las fotos dadas de alta, pero
también se puede utilizar GLayer para incluir información de la Wikipedia, por ejemplo.
En el documento http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag
podemos encontrar una lista de las posibles capas que por ahora soporta el API de Google
Maps.
Para crear una capa con GLayer hacemos lo siguiente:
var capa_panoramio = new GLayer("com.panoramio.all");
Simplemente llamamos al constructor de GLayer y le pasamos como parámetro el identificador

de la capa que queremos mostrar. Los identificadores posibles están en el documento ese al
que hacía referencia.
Luego, para hacer que el layer se muestre en un mapa de Google utilizamos un método, que
ya hemos visto anteriormente en el manual de desarrollo web .com, de la clase GMap2:
addOverlay().

map.addOverlay(capa_panoramio);
A addOverlay() le tenemos que pasar la instancia de la capa que queremos mostrar, que
hemos creado al llamar al constructor de GLayer.
El código completo para crear un mapa de Google con las fotos de Panoramio sería el
siguiente:
function load() {
var capa_panoramio = new GLayer("com.panoramio.all");

map.addOverlay(capa_panoramio);
}
}
window.onload=load
Podemos ver el ejemplo en marcha en una página aparte.
Incluir referencias a la Wikipedia en mapas de Google

En este artículo vamos a mostrar cómo se pueden incluir referencias a contenidos de la
Wikipedia en mapas de Google. Para quien llegue aquí y no sepa hacer mapas de Google
recomendamos leer el manual de programación de Google Maps.
La verdad es que los chicos de Google nos han puesto muy fácil la integración de la Wikipedia
con los mapas de Google y es de agradecer. El proceso para conseguirlo es muy similar -casi
idéntico- al utilizado para incluir las fotos de Panoramio, tratado anteriormente en
DesarrolloWeb.com. Por eso, recomendamos leer previamente el artículo Incluir fotos de
Panoramio en un mapa de Google, ya que hay cosas en este artículo que vamos a dar por
sabidas, por haber sido explicadas en el artículo mencionado.
Para que se vea qué son las referencias de la Wikipedia y cómo se integran con los mapas de
Google podemos acceder al ejemploque vamos a tratar en este artículo.
Así pues, pasamos a la acción. Lo primero que tenemos que saber es que existen diversos
servicios que pueden ser integrados como capas de contenidos externos en nuestros mapas.
En concreto, por lo que respecta a la Wikipedia, tenemos varias posibilidades de integración
que corresponden con los distintos idiomas en los que la enciclopedia trabaja. Para acceder a
un listado de todos los servicios que se pueden integrar, tenemos que entrar en:
http://spreadsheets.google.com/pub?key=p9pdwsai2hDN-cAocTLhnag
Veremos que existen distintos idiomas que podemos escoger. A nosotros de momento nos
interesará el español, por lo que tenemos que utilizar el identificador de capa org.wikipedia.es.

Ahora, para mostrar una capa (layer) con un contenido externo, haremos algo como esto:
function load() {
var capa_wikipedia = new GLayer("org.wikipedia.es");

map.addOverlay(capa_wikipedia);
}
}
window.onload=load
En el artículo sobre incluir las fotos de Panoramio ya quedó explicado este script por pasos,
pero podemos remarcar las siguientes particularidades:
var capa_panoramio = new Glayer("org.wikipedia.es");
Con esa línea se crea una nueva capa, como un objeto de la clase Glayer, pasando como
parámetro al constructor la referencia id de la capa que queremos mostrar, "org.wikipedia.es".
map.addOverlay(capa_wikipedia);
Así añadimos al mapa de Google la capa que acabamos de crear.
Eso es todo, ahora podemos añadir contenidos de interés a nuestro mapa, que explican los
puntos geográficos de los lugares que se han destacado en la Wikipedia. Es tan fácil la
integración con la Wikipedia que, después de leído este artículo de desarrollo web .com,
tardarás menos de un minuto en utilizarla en tus mapas. Además está disponible para todos
los idiomas más usados en el mundo.
El ejemplo realizado para ilustrar esta funcionalidad se puede ver en este enlace.
Colorear países en mapas de Google

En este artículo vamos a conocer una manera de colorear países en Google Maps. No es la
única pero quizás sí sea la más sencilla de conseguirlo. Para ello vamos a utilizar la clase
GPolygon, del API de Google Maps, que nos permite dibujar un polígono dadas una serie de
coordenadas. Los polígonos contienen una línea de contorno y además se les puede aplicar
color de relleno. Así pues, los utilizaremos para rellenar de color la superficie de los países y
pintar una línea que rodea la silueta del país.
En el Manual de Mapas de Google, que venimos publicando en DesarrolloWeb.com, ya

explicamos cómo crear y mostrar polígonos en los mapas, con lo que ya deberíamos dominar
los conocimientos necesarios para seguir este ejemplo.
Antes de continuar, tal vez te interese ver el efecto de coloreado sobre diferentes países que
vamos a explicar en este artículo.

La parte más laboriosa para la realización de los polígonos de cada país consiste en sacar todos
los puntos geográficos (latitud, longitud) que necesitaríamos para crear su contorno. Esto
representa un gran trabajo, porque tendríamos que ir, país por país, apuntando los puntos de
la silueta en arrays, y además, cuanto más detallistas queramos ser, más puntos tenemos que
extraer. Afortunadamente, otras personas ya se han tomado por nosotros la molestia de sacar
cada uno de los puntos geográficos de las siluetas de los países y además, han disponibilizado
su trabajo para con licencia copyleft, para que otros puedan utilizarlo en sus aplicaciones.
Hay un proyecto creado por Anieto2k que nos va a servir de manera excelente para obtener las
líneas de puntos, en una estructura de datos tipo array de coordenadas GLatLng, que se puede
utilizar directamente para la creación de los polígonos en mapas de Google. El proyecto
mencionado se llama CountryPoints y está en Google Code en la URL: http://code.google.com/
p/countrypoints/
CountryPoints consiste básicamente en un archivo con código Javascript donde se declaran una
serie de arrays con puntos geográficos, basados en latitudes y longitudes, para generar las
siluetas de cada país. Con esos puntos se pueden trazar los polígonos para dibujar los países.
Aunque en un principio podría parecer suficiente un polígono para cada país, hay que señalar
que muchos de ellos contienen islas o territorios separados del principal, que deben
especificarse en polígonos distintos. Así que en CountryPoints tenemos, para cada país, una o
más sucesiones de puntos para formar uno o más polígonos sobre la superficie.
Para ilustrar la forma de este archivo de puntos, vendrá bien mostrar aquí un extracto de los
puntos de varios países:
//primero se declara un objeto

var country = {};
//luego se definen propiedades con las coordenadas para cada país

//se utilizan códigos de dos letras para cada país
country.GU = {
desc: 'GUAM',
coord: [ [new GLatLng(13.235, 144.7094), new GLatLng(13.42778, 144.6552), new GLatLng(13.65229, 144.8761),
new GLatLng(13.235, 144.7094)]]
};
country.PT = {
desc: 'PORTUGAL',
coord: [ [new GLatLng(37.25319, -7.431854), new GLatLng(37.00889, -7.897779), new GLatLng(37.02631,
-8.9892369), new GLatLng(38.71722, -9.118473)], [new GLatLng(37.70555, -25.45611), new GLatLng(37.88389,
-25.85417), new GLatLng(37.70555, -25.45611)], [new GLatLng(32.6375, -16.94361), new GLatLng(32.6375,
-16.94361)]]
};
He escogido dos países para mostrar la sintaxis de declaración de puntos de sus siluetas,
aunque a Portugal le he quitado muchos puntos para que quepa bien en el texto de este
artículo de desarrolloweb .com. Observemos que los puntos se guardan en una propiedad
llamada "coord", que es un array de dos dimensiones. En la primera dimensión tiene cada uno
de los polígonos para cada uno de los territorios separados del país. En la segunda dimensión
tiene cada uno de los puntos para hacer el polígono, definidos con objetos GLatLng.
Así pues, para crear los polígonos de un país, por ejemplo Portugal, tendremos que hacer algo
como esto:
1) Incluir el array con los puntos de los países.

Para ello tendremos que incluir un código Javascript externo, que está en el proyecto
CountryPoints de Google Code. (podemos incluirlo desde el servidor de Google Code o
directamente descargarlo y subirlo a nuestro espacio de alojamiento.
<script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script>
2) Extraigo todos los puntos definidos para Portugal
var coordenadas_portugal = country.PT.coord;
Los códigos de países de dos letras son por ejemplo PT para portugal, ES para España y BR
para Brasil... Estos códigos están normalizados según normativa ISO 3166-1.
3) Recorrer las coordenadas para crear los polígonos
Con un bucle recorro los grupos de coordenadas para crear cada uno de los polígonos. (Porque
debemos recordar que el array de coordenadas era de dos dimensiones, para cada uno de los
territorios separados del país)
for (i=0; i<coordenadas_portugal.length; i++){

map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4));
}
Código completo para colorear países
A continuación pongo un código completo a utilizar para colorear varios países del mundo.
<script src="http://maps.google.com/maps?file=api&v=2&key=tu_lleva_api_google_maps"
<script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script>
//<![CDATA[
function load() {
map.addControl(new GSmallZoomControl());
//creo los polígonos de España

var coordenadas_espana = country.ES.coord;
for (i=0; i<coordenadas_espana.length; i++){
map.addOverlay(new GPolygon(coordenadas_espana[i],"#dd6600", 2, 0.7, "#993300", 0.4));
}
//creo los polígonos de portugal

var coordenadas_portugal = country.PT.coord;
for (i=0; i<coordenadas_portugal.length; i++){
map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4));
}
//creo los polígonos de francia

var coordenadas_francia = country.FR.coord;
for (i=0; i<coordenadas_francia.length; i++){
map.addOverlay(new GPolygon(coordenadas_francia[i],"#000099", 2, 0.7, "#000099", 0.4));
}
//creo los polígonos de Marruecos

var coordenadas_marruecos = country.MA.coord;

for (i=0; i<coordenadas_francia.length; i++){

map.addOverlay(new GPolygon(coordenadas_marruecos[i],"#990000", 2, 0.7, "#990000", 0.4));
}
}
}
window.onload=load
//]]>
</script>
El ejemplo anterior se puede ver en marcha en una página aparte.
Esperamos que se haya podido entender el proceso para pintar países. En el propio blog del
creador de CountryPoints hay otras explicaciones sobre la utilización de este sistema, que es
de donde me he guiado para hacer el ejemplo que vamos a publicar en DesarrolloWeb.com.
Colorear países puede venir muy bien para darle un poco de vida y mejor aspecto a nuestras
aplicaciones, pero además este ejemplo puede servir para aprender a crear un sistema por el
cual definir una serie de coordenadas de elementos, para colorear cualquier cosa que
necesitemos en mapas geográficos, como provincias de un país, ciudades, barrios, etc.


Manual API Google

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual API Google

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs

Manual del API de

Autores del manual

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 1

Incluir un Mapa de Google en tu web en 5 minutos

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 2

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

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 3

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 4

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 5

Ver mapa más grande

Artículo por Miguel Angel Alvarez

Crear mapas de Google con el asistente de Google Maps

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 6

Artículo por Miguel Angel Alvarez

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

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 7

A grandes rasgos esta es la filosofía de funcionamiento de AJAX, un planteamiento que sin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

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

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

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 8

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 9

control de zoom que vemos a la izquierda y el selector de tipo de mapa. Dependiendo

Artículo por Javier Chaure

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 10

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

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

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

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

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 11

var marker = new GMarker(point);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

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

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

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

function createMarker(point, nombre) {

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 12

var point = new GPoint (-3.6941099166870117, 40.4154238545226);

GEvent.addListener(marker, 'click', function() {

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 13

Artículo por Javier Chaure

Mapas de Google API 2

//función para cargar un mapa de Google.

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 14

//centramos el mapa en una latitud y longitud deseadas

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

Ahora nos fijamos en el código Javascript.

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

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

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 15

fácil que no nos percatemos.

Artículo por Miguel Angel Alvarez

Tipos de mapa en Google Maps

Para definir el tipo de mapa en un mapa de Google tenemos el método setMapType() de la

API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html 16

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

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

Artículo por Miguel Angel Alvarez

Control para cambiar el tipo de mapa de Google