-
Taller. Insertar Google Map en nuestra web.
Posted on enero 23rd, 2009 3 commentsQueridos suscriptores,
En esta ocasión vamos a jugar a insertar Google Maps en nuestra Web.
Siguiendo paso a paso las explicaciones dadas, seremos capaces de señalar una ubicación en nuestra página web, como por ejemplo "donde se encuentra nuestro negocio" o "indicar aquel paraje tan bonito que vimos haciendo aquella excursión" etc...
Algunos pensareis, que es mucho más facil buscar dicha ubicación desde Google Maps, hacer una captura de pantalla e insertar la imagen en nuestra propia página. En realidad si que es algo más fácil, pero ni por asomo es tan versatil como lo que nos ofrece el API de Google Maps.
En este taller, insertaremos un mapa de Google, el cúal tendrá unas cuantas funcionalidades muy interesantes:
- Podremos realizar Zoom In & Zoom out del plano mostrado.
- Podremos movernos libremente por el mapa utilizando el Drag&Drop (Arrastrar y soltar) del ratón.
- Tendremos 3 tipos de vistas: Mapa, Satélite, Híbrido
- Mostraremos un bocadillo, tipo comic, donde podremos insertar una fotografía o una imagen, incluyendo si deseamos, un texto descriptivo.
¿Qué os parece? ¿Empezamos ya?
En primer lugar, para poder incrustar Google Maps en tus páginas web, deberemos tener una cuenta Google. Si aún no tienes una cuenta, puedes crearla desde aquí.
Si ya tienes una cuenta de Google, el siguiente paso será pedir a Google una clave (key) que necesitaremos para poder utilizar el servicio de Google Maps en nuestra web. Pulsar aquí para realizar la petición de la clave, recordad que es indispensable tener una cuenta de google.
Deberemos aceptar las condiciones de uso y poner la URL de nuestro sitio web. Una vez obtenida la clave, podremos jugar con el API de Google Maps dentro de nuestra URL.La pantalla siguiente nos mostrará cual es nuestra key, la URL donde debe utilizarse, y un ejemplo de como realizar una página web mostrando un mapa.
¡ Bien !, ya tenemos todo lo necesario para poder utilizar los mapas de Google en nuestra web. Vereis que si cogemos el código del ejemplo y lo pegamos en un nuevo archivo con la extensión .html, obtendríamos el siguiente resultado.
Bueno, no es gran cosa el mapa del ejemplo, ya que la ubicación no es la que nosotros deseamos, ni posee las características descritas anteriormente, aunque tampoco hemos tenido que hacer gran cosa hasta el momento.
Si examinamos el código de ejemplo...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"http://www.w3.org/1999/xhtml"
"content-type""text/html; charset=utf-8"
Google Maps JavaScript API Example
"http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbahj3_n5aXq9RN3HFWi7vBQrTgs3w4GlFtd6jq4AtXcUcwn_TRTMBL9UPVqa2-cXAoWvf5tSlydXtA""text/javascript"
"text/javascript"//"map"
"load()""GUnload()"
"map""width:500px;height:300px"
...observamos que entre las etiquetas <head> ...</head> se define el script codificado en JavaScript haciendo referéncia a <script src="http://maps.google.com/maps... y vemos que es ahí donde se inserta la clave que antes nos ha sido proporcionada para poder hacer uso de Google Maps.
Seguidamente vemos otro Script, donde se define la función load().
Esta función comprueba que el navegador utilizado sea compatible con Google Maps. Si es así, se define el objeto map, creando una instancia de GMap2(elementoDondeSeRepresentaraElMapa). Una vez definido el mapa, lo centraremos en la posición geográfica deseada con la instrucción GLatLng(37.4419, -122.1419)
Dentro del cuerpo <body>...</body> se define una capa <div> con el id="map". Es ahí donde se insertará nuestro mapa.
Un punto muy interesante, es el evento onload y onunload. Estos eventos significan "al cargar la página" y "al descargarla". Vemos que al cargar la página, se invoca a la función load() de JavaScript, que contiene el código necesario para mostrar el mapa.
¿Agotados?, Si no teneis mucha experiencia en leer código XHTML y JavaScript, puede resultar duro al principio, pero recordad que es muy importante saber que es lo que hace en todo momento para poder llegar a una completa compresión de lo que estamos haciendo.
Ahora que sabemos como mostrar un mapa en una página web, construiremos un ejemplo donde mostraremos un mapa de Barcelona, más exactamente, un plano de situación de la "Sagrada Familia".
El ejemplo comparte la misma estructura de código que el ejemplo anterior, aunque en este caso agregaremos las funcinalidades descritas al principio de este taller. Definamos las instrucciones de la nueva función Load()
span style="color: #009900; font-style: italic;">// Crea un mapa nuevo dentro del contenedor HTML en cuestión, que generalmente suele ser un elemento DIV.
"map"));// Definimos las coordenadas en términos de Latitud y Longitud del plano que queremos mostrar,
// y lo dejamos centrado en la pantalla. El segundo parámetro del método <em>SetCenter</em> es el zoom aplicado.
// Crea un control en el mapa para seleccionar el tipo de mapa a mostrar. (Mapa, Satélite, Híbrido)
// Crea un control con botones para hacer desplazamientos en cuatro direcciones y para acercar y alejar la imagen.
// Crea una vista general de minimapa de resumen plegable en la esquina del mapa principal
// Este tipo de mapa (el predeterminado) muestra un callejero normal.
"Lo sentimos, Google Maps no es compatible con este navegador.");}
}Ahora crearemos una función llamada addTag (Donde he puesto {...Resto del código...}) la cual será responsable de marcar una posición en el mapa e insertar un bocadillo al estilo comic con una imagen y un texto. Veamos su sintaxis
span style="color: #009900; font-style: italic;">// Crea una marca en el mapa. En las coordenadas pasadas en el parámetro <em>point</em>
//Abre una ventana de información sencilla en el punto que se indique.
//Traslada el mapa de forma que la ventana de información que se abra
//quede totalmente visible. El contenido de la ventana de información se
//indica como texto HTML.
"click"Ahora definiremos, la imagen y texto que vamos a mostrar dentro del bocadillo.
// Posición geográfica de la Sagrda Familia
// Imagen y texto del bocadillo
'<img src="../../imagesBlog/sagradaFamilia.jpg" alt="" width="64" height="64" />
<h1>Sagrada Familia</h1>';// Invocamos a la función addTag, pasándole las coordenadas y el contenido del bocadillo.
//Activa un evento personalizado en el objeto de origen. Hace que se muestre el bocadillo de la información.
GEvent.trigger(marker,"click");Podemos ver el resultado final pulsando aquí.
Para ver el código fuente del ejemplo final, haced un click con el botón derecho del ratón sobre la página web del ejemplo y seleccionar "Ver código fuente".
Espero que os haya sido de gran utilidad.
Un abrazo
3 Respuestas to “Taller. Insertar Google Map en nuestra web.”
-
You may sue Google for it, thankx..
-
Gracie!
-
sonia abril 7th, 2009 at 13:55
Muchisimas gracias!!Muy bien explicado, y muy util.
Saludos
