Vida en la Luna

Hay varias formas de incluir mapas en tus webs. La mas usada actualmente por todos es usar los mapas de Google Maps. Puedes hacerlo de forma sencilla copiando y pegando el código que proporcionan cuando buscamos un lugar o utilizando el API, un poco mas complicado pero con mucha mas potencia.

Sin usar el API

Es la forma mas sencilla de incluir un mapa. Sigue estos pasos:

• Buscar la dirección en la pagina de Google Maps. En nuestro ejemplo buscamos la Sagrada Familia.
• Pulsa sobre el texto “Enlazar”

• Copia y pega el código que hay debajo de “Pegar HTML para insertar en sitio web” en tu pagina web.

Con estos tres pasos ya tienes un mapa en tu pagina web.

Usando el API

Si por ejemplo quieres incluir mapas dinámicamente ( no tienes la dirección cuando escribes el código ) o quieres personalizar los textos de los puntos de interés tendrás que usar el API.

Lo primero que has de hacer para usar el API es tener una cuenta con Google y registrar en el API usando este enlace. Una vez tengas la clave para usar el API en tu web ya estas preparado para empezar a picar código.

Necesitas incluir en tu cabecera HTML el fichero javascript del API. Para ello:

<script src=”http://maps.google.com/maps?file=api&v=1&key=TU_CLAVE” type=”text/javascript”></script>

Substituye TU_CLAVE por la clave que te han proporcionado al registrarte.

En el lugar donde queramos ver el mapa pondremos un div como por ejemplo:

<div id=”div_map1″ style=”width: 425px; height: 350px”></div>

Para cargar el mapa lo haremos por javascript así que ya sabes que lo has de introducir dentro de las etiquetas correspondientes( <script type=”text/javascript”></script>  ). Vamos a ver un par de ejemplos.

Puedes ver los ejemplos en la pagina.

Ejemplo 1

var map = new GMap2(document.getElementById(“div_map1″));
map.setCenter(new GLatLng(41.405317,2.176829), 15);
map.setUIToDefault();

En la primera linea creamos una variable del tipo GMap2. Cada objeto de esta clase define un único mapa de la página. Como puedes ver le pasamos por parámetro el div donde queremos ver el mapa( div_map1 ).

En la segunda linea inicializamos el mapa. Para ello llamamos al método setCenter pasándole las coordenadas que deben centrarse en el mapa ( utilizamos la clase GLatLng ) y el nivel de zoom.

Si queremos ver en el mapa los botones típicos de google ( zoom, tipo de mapa… ) deberemos llamar al método setUIToDefault.

Ejemplo 2

var map2 = new GMap2(document.getElementById(“div_map2″));
map2.setCenter(new GLatLng(41.405317,2.176829), 15);
map2.setUIToDefault();
var point = new GLatLng(41.405317,2.176829);
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
var myHtml = “Texto <b>HTML</b> que quieres mostrar en el punto”;
map2.openInfoWindowHtml(point, myHtml); });
map2.addOverlay(marker);

En este ejemplo mostraremos el mapa igual que en el primero pero añadiremos un marcador. Al pulsar el marcador se mostrara un mensaje con información.

Las tres primeras lineas del código son iguales a las del ejemplo 1.

En la cuarta linea creamos un punto ya que lo utilizaremos varias veces. Después creamos un objeto del tipo GMarker que es el encargado de mostrar un punto en el mapa. Le pasamos como parámetro el punto donde debe apuntar.

Las lineas siguientes crearan el evento click sobre el marcador. Para ello llamamos a GEvent.addListener que se encargara de crear el evento. Pasamos como parámetro el marcador, que evento enlazamos y que debe hacer.

La última linea añade el marcador, incluyendo el evento, al mapa.

Ire añadiendo ejemplos practicos cuando tenga algo mas de tiempo. Si estas interesado en algo concreto comentalo y espero poder ayudarte.