Manual del API de Google Maps - Incluir un Mapa de Google en tu web en 5 minutos

Manual del API de Google Maps

Incluir un Mapa de Google en tu web en 5 minutos
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.

Ver mapa más grande

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:
 
     Introducción a Google Maps ‐Desarrolloweb
      
   var map = new GMap(document.getElementById("map"));
   map.setMapType(G_SATELLITE_TYP
 E); map.addControl(new
 GLargeMapControl());
 map.addControl(new
 GMapTypeControl());
 map.centerAndZoom(new GPoint
 (‐3.688788414001465,
 40.41996541363825), 3);
    
 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()); map.addControl(new GMapTypeControl());
         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.
 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:
 
     Introducción a Google Maps ‐Desarrolloweb
      
   var map = new
   GMap(document.getElementById("map"))
   ; map.setMapType(G_SATELLITE_TYPE);
   map.addControl(new
   GLargeMapControl());
   map.addControl(new
   GMapTypeControl());
   //Puerta de Alcalá
   var point = new GPoint (‐3.688788414001465, 40.41996541363825);
   var marker = new GMarker(point); map.addOverlay(marker); //Plaza de Neptuno var point = new
   GPoint (‐3.6941099166870117, 40.4154238545226); var marker = new GMarker(point);
   map.addOverlay(marker); //Plaza de Cibeles var point = new GPoint (‐3.693079948425293,
   40.41940998761056); var marker = new GMarker(point); map.addOverlay(marker);
    map.centerAndZoom(point, 3);
    
 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:
 
     Introducción a Google Maps ‐Desarrolloweb
      
     var map = new GMap(document.getElementById("map"));
     map.setMapType(G_SATELLITE_TYPE); map.addControl(new GLargeMapControl());
     map.addControl(new GMapTypeControl());
 function createMarker(point, nombre) { var marker = new GMarker(point);
 GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(nombre); }); return
 marker; }

//Puerta de Alcalá var point = new GPoint (‐3.688788414001465, 40.41996541363825); var
  nombre = "Puerta de Alcalá"; var marker = createMarker (point, nombre);
  map.addOverlay(marker); //Plaza de Neptuno
  var point = new GPoint (‐3.6941099166870117, 40.4154238545226); var nombre = "Plaza de
  Neptuno" var marker = createMarker (point, nombre); map.addOverlay(marker); //Plaza de
  Cibeles var point = new GPoint (‐3.693079948425293, 40.41940998761056); var nombre = "Plaza
  de Cibeles" var marker = createMarker (point, nombre); map.addOverlay(marker);
   map.centerAndZoom(point, 3);
   
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:
GEvent.addListener(marker, 'click', function() {
  marker.openInfoWindowHtml(no
mbre); });
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.

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.
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.
  
Ejemplo de Google Maps API  
  // 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 GLargeMapControl()); map.addControl(new GMapTypeControl());
      map.addControl(new GOverviewMapControl()); ;
    }}
  //]]>
       
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.

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.
  
Ejemplo de Google Maps API   // 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(41.375987390149106, 2.1778035163879395), 17);
     map.setMapType(G_SATELLITE_MAP);
  }}
//]]>

615px; height: 400px">  
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=AQUITU‐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:
map.setMapType(G_SATELLITE_MAP);
Por esta otra línea, donde especificamos otro tipo de mapa:
map.setMapType(G_HYBRID_MAP);
También podemos probar a quitar esa línea donde especificamos el tipo de mapa. 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.
map.addControl(new GMapTypeControl());
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.

Ejemplo de Google Maps API   //      
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() {
  if (GBrowserIsCompatible()) {
     var map = new GMap2(document.getElementById("map"));
     map.setCenter(new GLatLng(40.201022,‐3.8736677),6);
     map.addMapType(G_PHYSICAL_MAP);
     map.removeMapType(G_HYBRID_MAP);
     map.addControl(new GMapTypeControl());
     map.setMapType(G_PHYSICAL_MAP);
  }}
El código que podemos ver incluye llamadas a los métodos: addMapType(G_PHYSICAL_MAP), para
indicar que en el control de selección de tipo de mapa se debe incluir el mapa físico.
map.removeMapType(G_HYBRID_MAP), para eliminar del control de selección de tipos de mapas
el mapa híbrido. El método addControl(new GmapTypeControl()) para incluir en 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.
Artículo por Miguel Angel Alvarez
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:
map.addControl(new GMapTypeControl());

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:
  
Ejemplo de Google Maps API   //      
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.
map.addOverlay(marker);
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.
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 sólo 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
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.

Ejemplo de Google Maps API   //    

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.
Artículo por Miguel Angel Alvarez
Personalizar iconos en los mapas de google
Crear y definir iconos para mapas de Google es algo que nos puede llevar un tiempo, 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:
  
 Mapa de
Google 
 //   body{ margin:0px; }  

Artículo por Miguel Angel Alvarez

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.
var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(33,0),3);
map.addControl(new GLargeMapControl()); map.setMapType(G_NORMAL_MAP);
GEvent.addListener(map, "click", tratamiento_clic);
La línea que tenemos que ver ahora es la última, donde se añade el escuchador de eventos.
GEvent es la clase a la que añadimos el event listener. Al añadir un evento para ser 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:
 var map = new
 GMap2(document.getElementById("map"));
 map.setCenter(new GLatLng(40,‐4),3);
 map.addControl(new GLargeMapControl());
 map.setMapType(G_NORMAL_MAP);
 var point = new GPoint (‐4,40);
 var marker = new
 GMarker(point);
 map.addOverlay(marker);
 Este mapa, centrado en España, tiene una marca también en España. Ahora veamos el 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:
   
  Mapa de
 Google   //

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 //]]> 
 
 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.
 GEvent.addListener(map, "click", function (overlay,point){
   marker.setPoint(point);
   map.addOverlay(marker);
   marker.openInfoWindowHtml("Mi marca situada
   enLatitud: "
 + point.lat() + "Longitud: " + point.lng() +
 ""); }); Comento algunas líneas de este
 código:
 marker.setPoint(point);
 Con esto cambiamos la posición de la marca.
 map.addOverlay(marker);
 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("Mi marca situada
enLatitud: " + point.lat() + "Longitud: " + point.lng() + "");
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.
  
 Mapa de
Google   function load() {
  if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map"));
     map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl());
     map.setCenter(new GLatLng(40.41689826118782,‐3.7034815549850464), 5); var point;
     point=map.getCenter(); var marker = new GMarker(point); GEvent.addListener(map, "click",
     function (overlay,point){
       marker.setPoint(point); map.addOverlay(marker); marker.openInfoWindowHtml("Mi marca situada
enLatitud: " + point.lat() + "Longitud: " + point.lng() +
     ""); });
  } } window.onload=load //]]>   html,body{ margin:0px;
height:100%; }   
     
Puede verse el ejemplo en marcha en una página aparte.
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:

X:  
Y:  
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.
GEvent.addListener(map, "click", function (overlay,point){
if (point){ marker.setPoint(point); document.posicion.x.value=point.x
      document.posicion.y.value=point.y
   }
});
Simplemente hemos incluido un par de líneas adicionales para acceder al formulario y
actualizar los valores de los campos  de las coordenadas.
Eso es todo. Podemos ver el ejemplo en marcha en este enlace
El código completo del ejercicio es este:
  
 Mapa de
Google   // 

   X:  
   Y:    
 Por guiarte.com  
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.