Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Manual Api Google PDF
Manual Api Google PDF
www.desarrolloweb.com
Director de DesarrolloWeb.com
http://www.desarrolloweb.com
(23 captulos)
Equipo DesarrolloWeb.com
http://www.desarrolloweb.com/
(1 captulo)
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.
Adems, a la derecha tenis el mapa que se va a crear. En este momento estn disponibles las
opciones para edicin del mapa y creacin de marcas, lneas, etc. Podris ver en la esquina
superior derecha del mapa una serie de iconos con los que podris colocar los distintos
elementos sobre el mapa.
Experimentar con cada tipo de dibujo que se puede colocar. Adems, luego podemos
personalizar cualquier cosa, como cambiar el color a las lneas o formas, o poner varios tipos
de marcas sobre el mapa. Al crear cualquier elemento o seal sobre el mapa, nos abre una
pequea ventana para colocar las propiedades de este elemento.
En la anterior imagen hemos marcado con flechas varios elementos: los datos de la marca,
que tenemos que rellenar en la ventana de propiedades. Un icono que se puede pulsar para
acceder a otras propiedades de la marca, como la forma, el color, etc. Cuando tengamos todo,
podemos pulsar el botn de Aceptar.
6) Cuando est el mapa creado, podemos dar al botn de Guardar y luego al botn marcado
como Listo, que aparecen a la izquierda.
7) Obtener el cdigo para incluir el mapa en cualquier web.
Este paso tiene varias maneras de hacerse, todas a travs del enlace que pone Enlazar,
situado a la derecha. La opcin ms verstil es incluir el mapa con un IFRAME, pero debemos
personalizar el mapa antes, para que el IFRAME sea exactamente como nosotros queremos.
Primero, como deca, pulsamos sobre Enlazar y luego pulsamos sobre Personalizar y obtener
vista previa del mapa que se va a insertar.
Entonces se abrir una ventana aparte donde dar las propiedades del mapa que vamos a crear
para nuestra pgina web.
En esta pgina tenemos que indicar: 1) El tamao del mapa, 2) centrar el mapa donde lo
queremos y ponerle el zoom deseado y 3) copiar el cdigo que nos dan.
8) Pegar el cdigo del mapa en nuestra pgina web
Pues ya est! Una vez pegado el mapa de Google aparecer tal cual lo hemos personalizado en
la pgina web que deseemos.
Yo he pegado a continuacin este mapa de Google de prueba, para que se pueda ver en este
artculo de DesarrolloWeb.com.
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Eso es todo. Podemos haber tardado un poco ms para aprender a crear el mapa, pero una
vez sepamos, nos llevar menos de 5 minutos incorporar un mapa de Google en una pgina
web.
Object 1
Como veremos, tiene un formulario para introducir varias informaciones. Primero nos pide
varios datos sobre el mapa que queremos realizar, como anchura y altura del mapa y el nivel
de zoom. Luego nos pide informacin sobre el elemento que queremos marcar con una flecha
dentro del mapa. En el mapa, al pulsar la flecha aparecer una ventana con informaciones
sobre el punto geogrfico localizado, que tambin debemos indicar nosotros en el formulario,
por medio de los siguientes datos: el nombre del lugar que queremos localizar (por ejemplo
"Cine Big"), la URL con la que queremos enlazar (si alguien pulsa sobre el link que aparecer
en la ventana de informacin), y la direccin completa de lo que queremos enlazar.
Nota: la direccin completa, para que la entienda Google Maps y la pueda localizar en el mapa, hay que
ponerla desde lo ms particular a lo ms general, separado por comas. Por ejemplo. Gran Va 45, Madrid,
Espaa.
Como segundo paso tenemos que introducir la URL del sitio web donde se va a colocar este
mapa, para conocimiento de Google. Este sistema no requiere que nos registremos para
obtener una clave para trabajar con el API, lo que simplifica algo las cosas, pero debemos
indicar la web donde lo vamos a utilizar y el mapa que creemos slo se ver en el sitio web
donde hayamos indicado (podemos poner slo la URL principal del dominio como
http://www.desarrolloweb.com).
Luego podemos pasar al tercer paso, donde simplemente tenemos que generar el cdigo
fuente que colocar en la pgina web. Lo copiamos y slo tenemos que pegarlo en el lugar de la
pgina donde deseemos que aparezca el mapa de Google.
Referencia: Por si nos interesa, existe otra manera de crear fcilmente un mapa de Google en una pgina
web, que ya relatamos en otro artculo de DesarrolloWeb.com: Crear un Mapa de Google sin saber
programacin.
Para acabar, dejamos aqu una muestra de un mapa de Google que hemos preparado para
probar este asistente.
Artculo por Miguel Angel Alvarez
artculo en el planteamiento AJAX, sin embargo es conveniente hacer una breve resea para
conocer a grandes rasgos su funcionamiento.
AJAX no es una nueva tecnologa, sino una combinacin de tecnologas ya existentes para
ofrecer una nueva visin a la hora de crear aplicaciones web. Siguiendo un planteamiento
AJAX, usaremos CSS y DHTML para la presentacin de los datos, el DOM (Document Object
Model) para tratar dinmicamente la presentacin de estos datos, XML y XSLT para el correcto
intercambio y manipulacin de la informacin, XMLHttpRequest para obtener la informacin de
manera asncrona (cuando nos lo pida el usuario) y Javascript para coordinar a todos estos
agentes a nuestro gusto dependiendo de nuestras necesidades. De este modo, tenemos un
"motor" javascript entre la presentacin y el servidor, que nos har peticiones de informacin
de forma asncrona para incorporarla inmediatamente a la presentacin de nuestra pgina, sin
necesidad de recargarla y hacer una nueva peticin de pgina completa al servidor.
A grandes rasgos esta es la filosofa de funcionamiento de AJAX, un planteamiento que sin
duda ofrece grandes posibilidades, como las que podemos ver en prctica con Google Maps.
Podemos ver otros ejemplos de aplicaciones AJAX en Google Suggest y Gmail.
Como vimos anteriormente en la introduccin de este artculo, Google nos permite usar Google
Maps en nuestra pgina web de forma gratuita. A continuacin veremos cmo hemos de
proceder para realizar nuestro primer mapa, viendo los fundamentos de la API que Google nos
ofrece.
Los requisitos para empezar a trabajar son realmente escasos. Con un simple editor de html y
un servidor pblico podemos empezar a crear mapas en nuestro dominio. Es importante
resear que el servidor donde alojemos nuestros scripts para Google Maps ha de ser pblico,
entre otras razones porque Google monitorizar el uso que hagamos del mapa, de acuerdo con
sus trminos y condiciones de uso.
El primer paso para empezar a usar Google Maps es obtener una clave (key) que se nos
concede cuando nos damos de alta en el servicio. Esta clave es nica para cada usuario de
Google Maps y es restrictiva en lo que se refiere a su uso, ya que slo nos permite usar los
scripts en uno de los directorios de nuestro servidor.
Una vez que tenemos nuestra clave ya estamos en condiciones de crear nuestro primer mapa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Introduccin a Google Maps - Desarrolloweb</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=AADE_TU_CLAVE_AQU"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint (-3.688788414001465, 40.41996541363825), 3);
</script>
</body>
</html>
Ejecutando este cdigo en un servidor pblico obtenemos como resultado el siguiente mapa,
que nos muestra una vista area de Madrid centrada en la Puerta de Alcal:
Como se puede ver en el cdigo, hemos creado una nica capa con id="map" destinada a
contener nuestro Google Map. El script que viene a continuacin de la declaracin de esta capa
es el que genera el mapa. Veamos sentencia a sentencia qu hace el cdigo:
Esta sentencia genera el mapa especificando como destino el id="map" que hemos
asignado previamente para nuestra capa contenedora. Ntese que el mapa se adaptar
al tamao que hayamos especificado para esta capa.
map.setMapType(G_SATELLITE_TYPE);
setMapType nos permite especificar el tipo de mapa que queremos visualizar. Como
puede verse en los selectores situados arriba a la derecha en el mapa, podemos elegir
entre las vistas "Map" (mapa vectorial), "Satellite" (fotografa de satlite) y "Hybrid"
(combina ambas vistas). En nuestro caso, ya que Google todava no dispone de mapas
vectoriales para Espaa, hemos elegido la vista de satelite que nos muestra la
fotografa area de la zona.
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
addControl nos permite incorporar elementos de control al mapa, tal y como son el
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
Con esta sentencia indicamos a nuestro GMap qu lugar queremos que muestre,
mediante el mtodo centerAndZoom. Los parmetros son un GPoint (que generamos a
continuacin a partir de su latitud y longitud) y el nivel de zoom que queremos mostrar,
de 1 a 16, siendo el nivel 1 el ms cercano y el 16 el ms alejado.
Google Maps ubica los puntos en los mapas a partir de su latitud y longitud. Esta
informacin debemos suministrarla nosotros, y para ello lo ms adecuado es usar
alguno de los servicios de geocoding disponibles en la red. Uno de ellos es por ejemplo
el de InfoSports, en el que con simplemente pulsar en cualquier punto del mapa
obtendremos la latitud y longitud deseadas para ese punto. Existen otros servicios de
geocoding disponibles de forma gratuita en la red que no exigen buscar el punto fsico
en el mapa, tales como Geocoder.us y geonames.org, en los que podemos realizar
bsquedas a partir del nombre de la ubicacin que buscamos.
Nota: El artculo continua en Desarrollar con Google Maps II. Pero atencin, que estos ejemplos de Mapas
de Google estn explicados para el API 1 de Google Maps. Pero si queremos ver explicaciones
actualizadas, siguiendo el API 2 de Google Maps, podemos consultar el artculo: Mapas de Google API 2.
10
Lo primero que necesitamos son las coordenadas de los nuevos puntos, en este caso la Plaza
de Cibeles y la Plaza de Neptuno. A continuacin asociaremos un marcador a cada uno de los
puntos y lo mostraremos en el mapa. El cdigo que muestra este segundo mapa es el
siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Introduccin a Google Maps - Desarrolloweb</title>
<script src="http://maps.google.com/maps?file=api&v=1&key= AADE_TU_CLAVE_AQU"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//Puerta de Alcal
var point = new GPoint (-3.688788414001465, 40.41996541363825);
11
Como puede verse, declaramos una variable point a partir de la cual creamos el marcador para
posteriormente mostrarlo en el mapa con addOverlay. En esta ocasin hemos centrado el
mapa en el ltimo punto declarado, el correspondiente a la Plaza de Cibeles.
Estupendo, ya tenemos un mapa creado con una serie de puntos sealados sobre l, pero no
aportan ninguna informacin al visitante. Lo apropiado sera satisfacer la curiosidad del usuario
proporcionndole algo de informacin asociada a ese punto. Aadamos pues algo ms de
informacin a nuestros marcadores mostrando unas ventanas informativas que nos indiquen el
nombre de la ubicacin fsica sobre la que nos encontramos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Introduccin a Google Maps - Desarrolloweb</title>
<script src="http://maps.google.com/maps?file=api&v=1&key= AADE_TU_CLAVE_AQU"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.setMapType(G_SATELLITE_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
function createMarker(point, nombre) {
var marker = new GMarker(point);
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(nombre);
});
return marker;
}
//Puerta de Alcal
var point = new GPoint (-3.688788414001465, 40.41996541363825);
var nombre = "Puerta de Alcal";
var marker = createMarker (point, nombre);
map.addOverlay(marker);
//Plaza de Neptuno
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
12
Este cdigo nos genera el siguiente mapa, en el que al pulsar sobre el punto de la Plaza de
Cibeles
Efectivamente se muestra la ventana informativa con los datos asociados a ese punto. En este
ejemplo hemos creado una funcin que nos crea los markers y sus correspondientes
infoWindows para ahorrar algo de cdigo. Esta pequea funcin recibe como parmetros el
GPoint donde queremos ubicar el marker, y un parmetro "nombre" que contiene la
informacin que queremos mostrar en la ventana informativa asociada.
Hay que resear que para asociar la aparicin de la ventana con el clic del usuario sobre
nuestro punto tenemos que asociarle tal evento, que es lo que se hace en la sentencia:
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(nombre);
});
De esta manera cada vez que se hace un clic sobre el marker se muestra en la infoWindow la
informacin especificada en el parmetro "nombre". Ntese que hemos usado
openInfoWindowHtml, que toma su parmetro como cdigo html, de modo que podramos
incluir una maquetacin al contenido de nuestra nueva infoWindow.
13
A lo largo de este artculo hemos visto las funciones ms bsicas de Google Maps, que
proporcionan las herramientas ms rudimentarias para manejar el servicio. Pese a no haber
profundizado sobre la verdadera potencialidad del servicio, residente en el uso de XML, con lo
aqu aprendido tenemos ya el bagaje necesario para empezar a profundizar en la API de
Google Maps y empezar a crear scripts ms avanzados.
Nota: Hemos visto aqu explicada el API 1 de Google Maps. Ahora estos cdigos deben actualizarse
siguiendo el API 2 de Google Maps. Para ello podemos consultar el artculo Mapas de Google API 2.
Pero estos dos artculos utilizaban una API que Google ha actualizado, por lo que se haca
necesaria una revisin para mostrar cdigos de integracin de Google Maps que sean
compatibles con el API que se utiliza ahora.
Sin embargo, los artculos anteriores siguen siendo muy interesantes para leer, porque
explican algunas cosas bsicas como obtener una llave (Key) de Google, registrndonos en el
sitio de Google Maps, para poder utilizar los mapas en nuestro sitio.
Ahora vamos a ver un cdigo para crear un mapa conforme a las especificaciones del Google
Maps API 2.
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//funcin para cargar un mapa de Google.
//Esta funcin se llama cuando la pgina se ha terminado de cargar. Evento onload
function load() {
//comprobamos si el navegador es compatible con los mapas de google
if (GBrowserIsCompatible()) {
//instanciamos un mapa con GMap, pasndole una referencia a la capa o <div> donde queremos mostrar el
mapa
var map = new GMap2(document.getElementById("map"));
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
14
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
El cdigo est comentado para una mejor comprensin. Ahora a dar unas explicaciones
adicionales:
Primero, aunque est ms tarde en el cdigo, vamos a ver lo que hay en el body de la pgina.
Hay que ver que hemos definido un evento onload="load()", que sirve para llamar a la funcin
que genera el mapa, una vez se ha terminado de cargar la pgina.
Dentro del cuerpo de la pgina nos fijamos en la etiqueta div donde se mostrar el mapa:
<div id="map" style="width: 615px; height: 400px"></div>
El tamao definido con estilos a esta capa es importante, porque ser el tamao de
visualizacin del mapa. El API de Google Maps reconocer la anchura y altura del contenedor
para mostrar un mapa justamente ocupando ese espacio.
Ahora nos fijamos en el cdigo Javascript.
Primero se incluye la librera donde est el API Javascript para los mapas de Google.
<script src="http://maps.google.com/maps?file=api&v=2&key=#TU LLAVE GOOGLE MAPS#"
type="text/javascript"></script>
Si nos fijamos, este cdigo necesita que indiquemos nuestra propia Key del API de Google
Maps, que hemos conseguido al registrarnos. La tendremos que poner sustituyendo el texto
=#TU LLAVE GOOGLE MAPS#.
Luego podemos pasar a la funcin que genera el mapa, que se carga cuando se termina de
mostrar la pgina (la llamamos por el evento onload).
Esa funcin est bastante comentada y adems quiero dejar para artculos posteriores
distintos pormenores de la generacin de mapas, pero es muy importante llamar la atencin
sobre un punto crtico, que me dio un quebradero de cabeza cuando estaba probando los
mapas, hasta que consegu dar con el error. Se trata del mtodo de la clase GMap2
setCenter():
setCenter() se tiene que invocar justo despus de instanciar el mapa!!!
Si intentamos instanciar el mapa y hacer cosas antes de centrarlo no funcionar. Esto es algo
que est muy claro en la documentacin del API, pero que como es un poco larga de leer, es
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
15
16
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
Con este cdigo tendremos una vista satlite de Barcelona centrada en la plaza donde est la
estatua de Coln sealando con el dedo. Un par de cosas que hay que ver:
En la lnea que carga el API de Google Maps tenemos que sustituir "AQUI-TU-CLAVE"
por la clave de usuario del API proporcionada en Google al registrarnos para usar sus
mapas en nuestro sitio web. http://maps.google.com/maps?file=api&v=2&key=AQUITU-CLAVE
La lnea map.setMapType(G_SATELLITE_MAP); es donde cargamos el tipo de vista.
Nota: Existen otros artculos anteriores donde hemos explicado temas adicionales de los mapas de
Google que deberas conocer para entender este cdigo.: Google Maps API 2
Tambin podemos probar a quitar esa lnea donde especificamos el tipo de mapa. Veremos
como sale entonces el mapa de calles. Es lo mismo que si especificsemos el tipo de mapa
normal.
map.setMapType(G_NORMAL_MAP);
Veamos el cdigo completo de un mapa que tiene el control para cambiar el tipo de vista. El
mapa estar centrado en Pescola, provincia de Castelln, donde tena la sede el Papa Luna.
<html>
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
17
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 16);
map.addControl(new GMapTypeControl());
map.setMapType(G_SATELLITE_MAP);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
Por eso cuando colocamos el control para cambiar el tipo de mapa, nos aparecen tres botones,
para cambiar entre cualquiera de estos tipos de mapas.
Ahora bien, nosotros podemos aumentar la disponibilidad de tipos de mapas de Google, para
incluir nuevos mapas, como el mapa fsico (G_PHYSICAL_MAP), otros mapas existentes,
cualquiera que puedan sacar en el futuro, o incluso mapas creados por nosotros mismos.
Para indicar el tipo de mapa que deseamos que se muestre se hace de esta manera:
map.setMapType(G_PHYSICAL_MAP);
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
18
Esto parece que no es un paso obligatorio para poder mostrar un tipo de mapa, sino para que
aparezca en el control y el usuario lo pueda seleccionar. Es decir, para hacer un mapa de
Google fsico con map.setMapType(G_PHYSICAL_MAP) no es necesario que lo haya incluido
previamente con map.addMapType(G_PHYSICAL_MAP);
Ahora, para quitar un tipo de mapa del control, lo hacemos a travs del mtodo
removeMapType() de la clase GMap2, indicando un parmetro con el nombre del tipo de mapa
que queremos deshabilitar del control. Por ejemplo:
map.removeMapType(G_HYBRID_MAP);
19
GLargeMapControl: Muestra una interfaz para hacer zoom y moverse por el mapa, con
una especie de regla donde se pueden escoger de las distintas aproximaciones de la
vista. Este control aparece en la parte superior izquierda.
GSmallMapControl: Es otro control de usuario para hacer zoom y moverse por el mapa,
pero ms pequeo, que tambin aparece en la esquina superior izquierda.
GSmallZoomControl: Un control de usuario muy pequeito, que aparece en la esquina
superior izquierda que simplemente tiene un botn para ampliar el zoom y otro botn
para reducirlo. Pero no tiene botones para moverse por el mapa.
GScaleControl: Este es un control que simplemente informa sobre la escala actual del
mapa. Con este control no se puede interaccionar, es meramente informativo.
GMapTypeControl: Este control incluye tres botones para cambiar entre distintos tipos
de mapa (mapa politico de calles y carreteras, mapa satlite y mapa hbrido -calles y
carreteras sobre el fondo de satlite)
GOverviewMapControl: Con este control aparece un pequeo mapita en la esquina
inferior derecha donde aparece una vista general con menos zoom del mapa actual, a
travs del cual tambin podemos movernos.
20
map.addControl(new GMapTypeControl());
Podemos incluir todos los controles que deseemos haciendo varias llamadas al mtodo
addControl(), pasando como parmetro distintas instancias de los controls que queremos
incluir.
Veamos un ejemplo completo de un mapa de Google que tiene una serie de controles de
usuario:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&keyAQUI-TU-CLAVE-DEL-API"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.35868573007256, 0.4062795639038086), 12);
map.addControl(new GMapTypeControl());
map.addControl(new GSmallZoomControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.setMapType(G_SATELLITE_MAP);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
</body>
</html>
Como habamos dicho, el desarrollador puede crear sus propios controles para incluirlos en sus
mapas. Este es un tema que trataremos ms adelante, pero por ahora podemos referiros a la
documentacin del API Google Maps para obtener ms informacin:
http://www.google.com/apis/maps/documentation/controls.html
Artculo por Miguel Angel Alvarez
21
Para insertar marcas tenemos un mtodo, tambin de la clase GMap2, que sirve para insertar
un elemento sobre el mapa. El mtodo en concreto se llama addOverlay() y recibe como
parmetro la marca que se quiere insetar.
map.addOverlay(marker);
En el cdigo anterior el objeto map sera una instancia de la clase GMap2. La variable marker
contendr la marca que se quiere insertar en el mapa.
Ahora veamos como crear la marca. Lo explicaremos en dos pasos.
1) Creamos un punto
La marca debe situarse en un punto concreto del mapa, que se define por una longitud y una
latitud (coordenadas x, y en el plano terrestre). Para crear un punto se tiene que utilizar la
clase GPoint, que recibe en el constructor la longitud y latitud de ese punto.
var point = new GPoint (-3.7034815549850464, 40.41689826118782);
2) Creamos la marca
Para crear la marca simplemente utilizamos la clase GMarker, que en su constructor debe
recibir varios valores. Por ahora colocaremos slo el nico valor que es obligado indicar, que es
el punto sobre el que colocar la marca, creado en el paso anterior.
var marker = new GMarker(point);
Ejemplo completo
Eso es todo lo que necesitamos saber por ahora. Aunque luego veremos otros detalles de
inters que se pueden personalizar en las marcas.
Veamos el cdigo completo de un mapa de Google con una marca en la plaza "Puerta del Sol"
de Madrid.
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo de Google Maps API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE-GOOGLE-MAPS"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 17);
map.addControl(new GLargeMapControl());
map.setMapType(G_SATELLITE_MAP);
var point = new GPoint (-3.7034815549850464, 40.41689826118782);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 615px; height: 400px"></div>
22
</body>
</html>
la variable miIcono en este caso es un objeto de la clase GIcon, que puede crear as:
var miIcono = new GIcon(G_DEFAULT_ICON);
miIcono.image = "http://www.midominio.org/mapas-google/arrow_down.png";
En este caso, con la primera sentencia se crea un nuevo icono, a partir de G_DEFAULT_ICON.
Es decir, un icono nuevo pero con todas las carctersticas cargadas del G_DEFAULT_ICON.
En la siguiente lnea se modifica la imagen del icono, asignando un nuevo valor a su atributo
image.
Habra que hablar ms sobre la creacin y modificacin de iconos, porque es un tema que
requiere mayor detenimiento para dominarlo, pero lo dejaremos para ms adelante.
Artculo por Miguel Angel Alvarez
23
Lo primero que tenemos que hacer es definir el icono personalizado. Luego podremos crear
marcas utilizando este icono. Crear un icono desde cero es complicado, porque requiere
ajustar muchos parmetros, pero el API nos permite crear iconos copiando las caractersticas
de otros iconos.
Entonces, por simplificar la tarea, vamos a crear un icono que es copia del icono que aparece
por defecto:
var iconoMarca = new GIcon(G_DEFAULT_ICON);
Esto crea una variable iconoMarca que es una instancia de la clase GIcon, donde hemos
utilizado G_DEFAULT_ICON como icono a copiar. G_DEFAULT_ICON es una constante del API
de Google Maps, que contiene el icono por defecto.
Luego vamos a definir la imagen del icono, alterando el atributo image de la instancia del
icono que haba hecho antes. (Hablar sobre formatos de las imgenes de los iconos ms tarde
en este artculo)
iconoMarca.image = "/images/bandera-roja.png";
Primero hemos creado el tamao del icono y luego lo hemos asociado al atributo iconSize.
Del mismo modo, tendremos que definir la imagen que utilizaremos para la sombra y el
tamao de la imagen utilizada.
iconoMarca.shadow = "/images/sombra-bandera2.png";
var tamanoSombra = new GSize(22,18);
iconoMarca.shadowSize = tamanoSombra;
Para acabar, slo nos queda por editar el atributo iconAnchor. Este sirve para reposicionar el
lugar donde se colocan los iconos. Como se pueden hacer iconos con imgenes de distintos
tamaos, hay que ajustar bien donde queremos que queden, para que la imagen que
pongamos apunte al lugar correcto. Dicho de otra manera, como hemos cambiado el tamao
de la imagen del icono por defecto (que habamos copiado para crear el icono personalizado),
ahora hay que editar el atributo iconAnchor para que apunte al lugar correcto.
iconoMarca.iconAnchor = new GPoint(11, 16);
Al iconAnchor se les pasa un punto, que est formado por las coordenadas relativas a la
esquina superior izquierda de la imagen donde debe estar enlazado el icono. Es el punto de la
imagen que debe aparecer en el punto geogrfico donde se coloca la imagen. En nuestro caso
el punto (11, 16), que es donde est la puntita de la bandera. (Ver imagen del ejemplo).
Ahora podemos hacer una marca con este icono que hemos creado as.
var marker = new GMarker(point, iconoMarca);
24
25
26
La lnea que tenemos que ver ahora es la ltima, donde se aade el escuchador de eventos.
GEvent es la clase a la que aadimos el event listener. Al aadir un evento para ser escuchado
tenemos que proveer de tres parmetros:
1. El objeto del API sobre el que se tiene que escuchar el evento
2. El nombre del evento que queremos detectar y hacer acciones cuando se haya captado
3. El nombre de la funcin que se encargar de tratar el evento.
En este caso se ha aadido un escuchador de evento, para realizar acciones cuando se hace
"clic" sobre el objeto map, que es el propio mapa de google. Las acciones son simplemente
ejecutar la funcin tratamiento_clic (fjate que slo ponemos el nombre de la funcin, sin los
parntesis). Ahora tenemos que codificar el comportamiento de nuestro mapa cuando se hace
clic en l, es decir, codificar la funcin tratamiento_clic().
function tratamiento_clic(overlay,point){
alert ("Hola amigo! Veo que ests ah porque has hecho clic!");
alert ("El punto donde has hecho clic es: " + point.toString());
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
27
Como vemos, la funcin recibe un par de parmetros, que son el contexto en el que se ha
detectado el evento. Estos dos parmetros son:
overlay: No lo vamos a utilizar ahora. Tiene que ver cuando el usuario hace clic en una
marca de un mapa.
point: que es el punto o coordenadas geogrficas donde el usuario ha hecho clic.
Este mapa, centrado en Espaa, tiene una marca tambin en Espaa. Ahora veamos el sencillo
cdigo para detectar un evento de tipo click sobre el mapa:
GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
}
});
Se crea el escuchador de eventos, para el objeto map y el tipo de evento click, ejecutando una
funcin que recibe dos parmetros (overlay,point). Recordamos que overlay es la marca sobre
la que se ha pulsado, si es que se puls sobre una marca, y point es el punto donde se ha
hecho clic del mapa, si es que se puls sobre un rea vaca del mapa.
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
28
En la funcin empezamos con un if(point) que sirve para saber si hemos recibido un punto
(Slo recibimos el punto si se ha pulsado sobre un rea vaca del mapa), porque slo entonces
queremos recolocar la marca. Entonces llamamos al mtodo de la marca setPoint(point) para
reposicionar la marca al punto recibido por parmetro.
Es bien simple no? Podemos ver el ejemplo en marcha en este enlace.
Para acabar, os dejo el cdigo completo de este ejercico:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=llave"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40,-4),3);
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
var point = new GPoint (-4,40);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
}
});
}
window.onload=load
//]]>
</script>
</head>
<body>
<div id="map" style="width: 765px; height: 388px"></div>
</body>
</html>
29
Despus hay que aadir un evento al mapa para que, cuando se pulse, se reposicione la
marca, se muestre en el mapa y aparezca un bocadillo o ventana de informacin con las
coordenadas donde se ha colocado la marca.
GEvent.addListener(map, "click", function (overlay,point){
marker.setPoint(point);
map.addOverlay(marker);
marker.openInfoWindowHtml("<div style='font-size: 8pt; font-family: verdana'>Mi marca situada en<br>Latitud: "
+ point.lat() + "<br>Longitud: " + point.lng() + "</div>");
}); Comento algunas lneas de este cdigo:
marker.setPoint(point);
Con esa otra lnea hacemos que la marca se muestre en el mapa (puesto que hasta ahora se
haba creado la marca pero no se mostraba en ningn sitio)
Por ltimo se incluye la siguiente linea dentro de la funcin del evento:
marker.openInfoWindowHtml("<div style='font-size: 8pt; font-family: verdana'>Mi marca situada en<br>Latitud: " +
point.lat() + "<br>Longitud: " + point.lng() + "</div>");
Esto es para que, a la vez que se muestra una marca, tambin aparezca una ventana de
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
30
31
nos puede servir para saber el punto exacto donde se hace clic, para poder obtener la latitud y
longitud de cualquier punto geogrfico.
En el ejemplo vamos a tener el mapa de Google y un formulario. El mapa de google, as como
el tratamiento del evento con el API de Google Maps ya lo vimos en el anterior captulo, por lo
que no los voy a explicar.
Veremos entonces los nuevos elementos en este ejercicio. Primero el formulario:
<form action="#" id="posicion" name="posicion">
X: <input type="text" name="x" value="" />
<br />
Y: <input type="text" name="y" value="" />
</form>
Vemos el formulario, que es como cualquiera que hayamos utilizado en HTML, al que le hemos
puesto un name="posicin", para podernos referir a l desde Javascript. Luego vemos los
campos X e Y, que son campos de texto normales, con sus respectivos name, para poder
actualizar sus valores desde el script.
Ahora el nico cambio que hemos incorporado en el cdigo de creacin del mapa de Google, es
el manejo del evento click sobre el mapa.
GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
document.posicion.x.value=point.x
document.posicion.y.value=point.y
}
});
32
}
window.onload=load
//]]>
</script>
</head>
<body>
<div id="map" style="width: 765px; height: 278px"></div>
<div id="formulario" style="margin: 10px">
<form action="#" id="posicion" name="posicion">
X: <input type="text" name="x" value="" />
<br />
Y: <input type="text" name="y" value="" />
</form>
</div>
<br />
<br />
Por <a href="http://www.guiarte.com">guiarte.com</a>
</body>
</html>
As habramos guardado en una variable zoom_actual el valor entero del zoom del mapa.
33
Recordar que para entender bien este cdigo tendremos que leer el artculo anterior, as como
posiblemente los precedentes de este manual que tratan sobre eventos.
Bueno, adems tendremos que colocar en el formulario un campo nuevo para escribir el zoom
del mapa:
zoom actual:
34
de alerta las dos variables con el antiguo zoom y el nuevo, haramos algo como esto:
GEvent.addListener(map, "zoomend", function (antiguoZoom, nuevoZoom){
alert("Has cambiado el zoom del mapa.\nAntiguo Zoom: " + antiguoZoom + "\nNuevo Zoom: " + nuevoZoom);
});
35
En este ejemplo el mapa ocupa 765 pxel de ancho y 388 de alto. Esto no tiene ningn secreto.
Pero qu pasa si queremos que un mapa de Google Maps tenga el ancho de toda la ventana
del navegador? Porque sabemos que el navegador puede tener distintos tamaos, dependiendo
de la definicin de pantalla del visitante y si la ventana est maximizada o dimensionada de
cualquier otra forma.
Entonces es muy sencillo, podemos colocar width:100% en la declaracin de estilos css de la
capa donde est el mapa.
<div id="map" style="width: 100%; height: 388px"></div>
Este mapa ocupara todo el rea disponible de la ventana del navegador, o bien de la capa
donde estuviera contenido.
El ejemplo se complica si queremos que el mapa de Google ocupe adems todo el alto
disponible en el navegador, que tambin, sabemos, puede ser variable dependiendo de las
caractersticas de pantalla o del estado de la ventana del browser. Lo normal es que
probsemos algo como esto:
<div id="map" style="height: 100%; width:100%;"></div>
Pero esto tal cual, sin hacer ninguna otra cosa, tiene un problema y es que misteriosamente el
mapa aparece vaco o con height = 0. Esto es porque los navegadores tienen problemas al
maquetar con height=100%. La idea para solucionarlo es colocar a todas las capas que
contengan al mapa height:100%, as como a las etiquetas <BODY> y <HTML> que tambin
deberan tener el height de 100%. Entonces nos debera funcionar y el mapa ocupara todo el
alto y ancho de la ventana.
Referencia: Podemos ver una FAQ con explicaciones sobre utilizacin del height:100% en CSS.
Ahora veamos el ejemplo de un mapa de Google Maps que ocupa todo el ancho y alto del
espacio en una pgina aparte.
Maquetar un mapa de Google con width y height 100%, pero mezclado con otros
elementos
36
Para acabar veamos un ejemplo de maquetacin de un Google Maps que ocupa el 100% del
espacio, pero que tiene una cabecera y una barra lateral. La cabecera y el lateral ocupan unos
espacios fijos y el mapa de google ocupar todo el sitio que dejan libre otros elementos de la
maquetacin.
Para explicarlo lo ms sencillo es ver directamente el ejemplo en una pgina aparte.
El ejercicio es simple, pero necesitaremos conocimientos de CSS sobre maquetacin y
posicionamiento. El cdigo es el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=coloca-tu-llave"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(33,0),3);
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
}
}
window.onload=load
//]]>
</script>
<style type="text/css">
html,body{
margin:0px;
height:100%;
}
</style>
</head>
<body>
<div id="contenedor" style="width:100%; height:100%;">
<div id="cabecera" style="background-color: #ffcc99; font-weight:bold; font-size: 110%; height: 23px; padding:
3px; margin-bottom:10px;">Esto es la cabecera!!</div>
<div id="lateral" style="float:right; width:200px; height:100%; background-color:#eeff99;">
<div id="contenidolateral" style="padding: 30px 10px 0 10px;">
Por <a href="http://www.guiarte.com">guiarte.com</a>
<br />
<br />
Esto son contenidos que colocamos en el lateral izquierdo. Resulta muy fcil maquetar con un mapa de Google en
una capa que toma el tamao del contendor donde se encuentra.
</div>
</div>
<div id="map" style="height: 100%; margin-right:210px;"></div>
</div>
</body>
</html>
37
Array con los vrtices de las lneas, que se indica con los distintos puntos
El color de las lneas, que es un RGB en hexadecimal, como los que utilizamos para
definir colores en HTML, comenzando por #. Ej: #ff8800.
El ancho de las lneas, en pixels.
La opacidad con un valor que va de cero a uno.
Otras opciones.
El nico parmetro que necesitamos indicar de manera obligada son los puntos de las lneas,
los otros parmetros son opcionales.
Para indicar los puntos de los vrtices, se utiliza la clase GLatLng, que sirve para crear objetos
que tienen las dos coordenadas geogrficas latitud y longitud. Por ejemplo, para definir los
puntos donde estn Madrid y Barcelona:
var madrid = new GLatLng(40.4165020, -3.702564);
var barcelona = new GLatLng(41.38878, 2.15898);
Ahora que tenemos los puntos de la lnea a crear, podemos hacer la llamada al constructor del
polyline:
var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4);
Como vemos, se ha definido una lnea con dos puntos, con color #0000dd que es un azul, con
6 pixels de ancho y 0.4 de opacidad.
Pintar la lnea en el mapa con addOverlay
Para que esta lnea quede dibujada en el mapa se utiliza el mtodo de GMap2 llamado
addOverlay() al que le pasamos por parmetro el polyline que habamos construido.
38
map.addOverlay(polyline);
Todo el cdigo
Este es el cdigo completo para la configuracin del mapa del ejemplo:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.002,-4.12),5);
var madrid = new GLatLng(40.4165020, -3.702564);
var barcelona = new GLatLng(41.38878, 2.15898);
var polyline = new GPolyline([madrid, barcelona], "#0000dd", 6, 0.4);
map.addOverlay(polyline);
}
window.onload=load
Podemos ver el cdigo completo del mapa accediendo al ejemplo y utilizando la funcionalidad
del navegador de "Ver cdigo fuente".
Ejemplo completo en marcha en http://www.guiarte.com/mapasgoogle/desarrolloweb/linea.php
Artculo por Miguel Angel Alvarez
Ahora esas opciones las pasamos como ltimo parmetro en el constructor del objeto de la
clase GPolyline.
Imaginemos que queremos construir un polgono que hace esta ruta: Madrid, Mosc,
Estambul, Roma, Tnez y Madrid. Primero crearamos los puntos de esas ciudades:
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
39
var
var
var
var
var
Y luego instanciaramos el polgono, indicando que queremos lneas geodsicas, de esta forma:
var poligono = new GPolyline([madrid, moscu, estambul, roma, tunez, madrid], "#cccc00", 6, 0.6,
opciones_poligono);
Por ltimo ordenamos que se pinte el polgono en el mapa con el mtodo addOverlay().
map.addOverlay(poligono);
Podemos ver un ejemplo que hace este mapa con el polgono con lneas geodsicas.
Artculo por Miguel Angel Alvarez
Voy a listar y explicar los parmetros del constructor de GPolygon para que queden claros:
Puntos de los vrtices: Como se puede ver, puede generarse un polgono con un nmero
indeterminado de vrtices. Lo nico es que el recorrido de vrtices tiene que estar cerrado, es
decir, empezar y acabar en el mismo punto, para que no se produzcan comportamientos
indefinidos a la hora de pintar el polgono. Todos los puntos o vrtices tienen que ser indicados
con un objeto GLatLng, que se compone de las coordenadas de latitud y longitud.
Color del borde: Una cadena con un color RGB en hexadecimal, tal como de definen en HTML.
Tamao del borde: Un nmero entero, que es el nmero de pxeles del borde.
40
muralla1
muralla2
muralla3
muralla4
muralla5
muralla6
=
=
=
=
=
=
new
new
new
new
new
new
GLatLng(40.65627360348711, -4.707534313201904);
GLatLng(40.65884555247438, -4.706525802612305);
GLatLng(40.658715329592404, -4.70139741897583);
GLatLng(40.658259547503505, -4.697213172912598);
GLatLng(40.656680564044166, -4.696569442749023);
GLatLng(40.65399457849209, -4.697320461273193);
Esto crear un polgono sobre los vrtices sacados de la muralla de vila, con color de borde
#669933, tamao de borde 5 pxel, opacidad del borde 0.7 (tirando a opaco), con color del
relleno #996633 y opacidad del relleno 0.4 (tirando ms a transparente).
Por ltimo, mostraramos el polgono con addOverlay().
map.addOverlay(polygon);
41
Podemos ver el ejemplo en marcha para entender bien el objetivo de este taller de Google
Maps.
Como hemos dicho, en el artculo anterior vimos como colocar un polgono en un mapa de
Google. La nica diferencia con este caso es que hemos definido la variable donde vamos a
colocar el objeto polgono, de la clase GPolygon, como global a toda la pgina. Esto es porque
este objeto polygon lo tendremos que acceder desde otras funciones para mostrarlo u ocultarlo
y si no est como variable global ser imposible referenciarlo. (Para crear una variable glogal
basta con declararla fuera de ninguna funcin, mira el cdigo fuente del ejercicio terminado
para ver cmo hacerlo.)
Hemos creado tambin, como decamos, una marca:
var punto_marca = new GPoint (-4.702, 40.6570);
var marca = new GMarker(punto_marca);
map.addOverlay(marca);
Luego, tenemos que crear el evento "click" a la marca, para que cuando se hace clic sobre ella
se llame a una funcin que se encargue de mostrar u ocultar el polgono. Con el API de Google
Maps se define un evento de la siguiente manera:
GEvent.addListener(marca, "click", ocultar_mostrar_poligono);
Esto aade el escuchador de evento "click" asociado al objeto contenido en la variable marca.
Cuando y cuando se detecte el evento se ejecuta la funcin ocultar_mostrar_poligono(). Por
decirlo de otra manera, hemos definido un evento click sobre una marca, para ejecutar la
funcin ocultar_mostrar_poligono() cuando se produzca.
Nos quedara ver el cdigo de la funcin que muestra u oculta el polgono. Esta funcin hace
uso de la variable global donde hemos almacenado el objeto polgono, para acceder a los
mtodos de dicho objeto.
function ocultar_mostrar_poligono(){
if (polygon.isHidden()){
//alert("Estaba oculto");
polygon.show();
}else{
//alert("Estaba mostrandose");
polygon.hide();
}
}
Lo primero que se hace es ver si el poligono esta o no oculto, con el mtodo isHidden(), con
polygon.isHidden(), que devuelve true en caso que est oculto y false en caso que est
mostrndose.
En caso de estar oculto, llamamos al mtodo que lo muestra, con polygon.show().
En caso que estuviera visualmente activo, llamamos al mtodo para ocultarlo, con
polygon.hide().
Y no hay ms misterios, que no hayamos visto con anterioridad en el manual del API de
Google Maps.
Dejo de nuevo el link para ver el ejemplo en marcha en una ventana aparte. Observar su
cdigo fuente para obtener ms informacin.
Artculo por Miguel Angel Alvarez
42
Los lmites de la imagen son a su vez otra clase, llamada GLatLngBounds, que es como un
rectngulo formado por dos puntos geogrficos, las coordenadas Sur-Oeste y Norte-Este,
definidas a su vez con los valores de latitud y longitud. Podemos ver la siguiente imagen, en la
que hemos marcado los dos puntos que necesitamos para definir los bordes o lmites de la
imagen, que utilizaremos en el constructor de la clase GLatLngBounds.
A su vez, los puntos x1 y x2 son coordenadas latitud y longitud que debemos crear con la clase
GLatLng, de esta manera:
var x1 = new GLatLng(valor_latitud, valor_longitud);
Una vez tenemos el objeto imagen de la clase GLatLngBounds, tenemos que colocarlo en el
mapa con el mtodo del mapa addOverlay(), que habamos utilizado anteriormente para
superponer elementos en mapas de google como los polgonos.
map.addOverlay(imagen);
Vemos el cdigo completo para hacer un mapa con una imagen superpuesta.
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.491022,-3.8736677),15);
map.addControl(new GSmallMapControl());
API de Google Maps:www.desarrolloweb.com/manuales/desarrollo-con-api-de-google-maps.html
Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.
43
map.addControl(new GMapTypeControl());
//creo los puntos de los lmites de la imagen
var x1 = new GLatLng(40.489259,-3.877358);
var x2 = new GLatLng(40.4923928,-3.8675308);
//defino los lmites donde voy a colocar la imagen
var limites_imagen = new GLatLngBounds(x1, x2);
//Creo un ground overlay
var imagen = new GGroundOverlay("lasrozas.jpg", limites_imagen);
//coloco la imagen o ground overlay en el mapa
map.addOverlay(imagen);
Como se ha podido comprobar, superponer una imagen es algo relativamente sencillo, aunque
tenemos que definir bien los lmites de la imagen para que el renderizado quede bien y no se
estire demasiado la foto.
El ejemplo en marcha lo podemos ver en una pgina aparte.
Artculo por Miguel Angel Alvarez
44
map.addOverlay(capa_panoramio);
A addOverlay() le tenemos que pasar la instancia de la capa que queremos mostrar, que
hemos creado al llamar al constructor de GLayer.
El cdigo completo para crear un mapa de Google con las fotos de Panoramio sera el
siguiente:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.002,-4.12),8);
var capa_panoramio = new GLayer("com.panoramio.all");
map.addOverlay(capa_panoramio);
}
window.onload=load
45
Ahora, para mostrar una capa (layer) con un contenido externo, haremos algo como esto:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.41,-3.717),13);
var capa_wikipedia = new GLayer("org.wikipedia.es");
map.addOverlay(capa_wikipedia);
}
}
window.onload=load
En el artculo sobre incluir las fotos de Panoramio ya qued explicado este script por pasos,
pero podemos remarcar las siguientes particularidades:
var capa_panoramio = new Glayer("org.wikipedia.es");
Con esa lnea se crea una nueva capa, como un objeto de la clase Glayer, pasando como
parmetro al constructor la referencia id de la capa que queremos mostrar, "org.wikipedia.es".
map.addOverlay(capa_wikipedia);
46
La parte ms laboriosa para la realizacin de los polgonos de cada pas consiste en sacar todos
los puntos geogrficos (latitud, longitud) que necesitaramos para crear su contorno. Esto
representa un gran trabajo, porque tendramos que ir, pas por pas, apuntando los puntos de
la silueta en arrays, y adems, cuanto ms detallistas queramos ser, ms puntos tenemos que
extraer. Afortunadamente, otras personas ya se han tomado por nosotros la molestia de sacar
cada uno de los puntos geogrficos de las siluetas de los pases y adems, han disponibilizado
su trabajo para con licencia copyleft, para que otros puedan utilizarlo en sus aplicaciones.
Hay un proyecto creado por Anieto2k que nos va a servir de manera excelente para obtener las
lneas de puntos, en una estructura de datos tipo array de coordenadas GLatLng, que se puede
utilizar directamente para la creacin de los polgonos en mapas de Google. El proyecto
mencionado se llama CountryPoints y est en Google Code en la URL: http://code.google.com/
p/countrypoints/
CountryPoints consiste bsicamente en un archivo con cdigo Javascript donde se declaran una
serie de arrays con puntos geogrficos, basados en latitudes y longitudes, para generar las
siluetas de cada pas. Con esos puntos se pueden trazar los polgonos para dibujar los pases.
Aunque en un principio podra parecer suficiente un polgono para cada pas, hay que sealar
que muchos de ellos contienen islas o territorios separados del principal, que deben
especificarse en polgonos distintos. As que en CountryPoints tenemos, para cada pas, una o
ms sucesiones de puntos para formar uno o ms polgonos sobre la superficie.
Para ilustrar la forma de este archivo de puntos, vendr bien mostrar aqu un extracto de los
puntos de varios pases:
//primero se declara un objeto
var country = {};
//luego se definen propiedades con las coordenadas para cada pas
//se utilizan cdigos de dos letras para cada pas
country.GU = {
desc: 'GUAM',
coord: [ [new GLatLng(13.235, 144.7094), new GLatLng(13.42778, 144.6552), new GLatLng(13.65229, 144.8761),
new GLatLng(13.235, 144.7094)]]
};
country.PT = {
desc: 'PORTUGAL',
coord: [ [new GLatLng(37.25319, -7.431854), new GLatLng(37.00889, -7.897779), new GLatLng(37.02631,
-8.9892369), new GLatLng(38.71722, -9.118473)], [new GLatLng(37.70555, -25.45611), new GLatLng(37.88389,
-25.85417), new GLatLng(37.70555, -25.45611)], [new GLatLng(32.6375, -16.94361), new GLatLng(32.6375,
-16.94361)]]
};
He escogido dos pases para mostrar la sintaxis de declaracin de puntos de sus siluetas,
aunque a Portugal le he quitado muchos puntos para que quepa bien en el texto de este
artculo de desarrolloweb .com. Observemos que los puntos se guardan en una propiedad
llamada "coord", que es un array de dos dimensiones. En la primera dimensin tiene cada uno
de los polgonos para cada uno de los territorios separados del pas. En la segunda dimensin
tiene cada uno de los puntos para hacer el polgono, definidos con objetos GLatLng.
As pues, para crear los polgonos de un pas, por ejemplo Portugal, tendremos que hacer algo
como esto:
1) Incluir el array con los puntos de los pases.
47
Para ello tendremos que incluir un cdigo Javascript externo, que est en el proyecto
CountryPoints de Google Code. (podemos incluirlo desde el servidor de Google Code o
directamente descargarlo y subirlo a nuestro espacio de alojamiento.
<script src="http://countrypoints.googlecode.com/files/countrypoints.js" type="text/javascript"></script>
Los cdigos de pases de dos letras son por ejemplo PT para portugal, ES para Espaa y BR
para Brasil... Estos cdigos estn normalizados segn normativa ISO 3166-1.
3) Recorrer las coordenadas para crear los polgonos
Con un bucle recorro los grupos de coordenadas para crear cada uno de los polgonos. (Porque
debemos recordar que el array de coordenadas era de dos dimensiones, para cada uno de los
territorios separados del pas)
for (i=0; i<coordenadas_portugal.length; i++){
map.addOverlay(new GPolygon(coordenadas_portugal[i],"#669933", 2, 0.7, "#669933", 0.4));
}
48
window.onload=load
//]]>
</script>
49