Puedes ver los ejemplos en la pagina.

Ejemplo 3 – Tipos de mapas

En Google maps tenemos varias vistas diferentes de los mapas. Las mas comunes son

• Vista predeterminada: Es la vista clásica de los mapas de Google. El código es G_NORMAL_MAP.
• Vista satélite: Es la vista desde satélite. El código es G_SATELLITE_MAP.
• Vista híbrida: Es una mezcla de la vista satélite con calles y nombres. El código es G_HYBRID_MAP.
• Vista terreno: Es una mezcla de las tres vistas anteriores. Puedes ver el terreno en relieve pero continuas teniendo información de calles y situaciones importantes. El código es G_PHYSICAL_MAP.

Para cambiar de una vista a otra deberás llamar al método setMapType pasandole el código del tipo de mapa que quieres ver.

map.setMapType(G_NORMAL_MAP);

Ejemplo 4 – Zoom y mover el mapa

Hacer zoom y mover el mapa es muy sencillo.

Para hacer zoom tendrás que llamar a los métodos zoomIn o zoomOut segun quieras acercarte o alejarte.

map.zoomIn();
map.zoomOut();

Para mover el mapa a otro punto simplemente llama a panTo pasando por parámetro el punto donde quieres situarte.

map.panTo( new GLatLng(41.405317,2.176829) );

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.

Quien no conoce a Google? Es impresionante como Larry Page y Sergey Brin consiguieron que la web girara alrededor de un buscador, como han sabido crear todo un conjunto de servicios/aplicaciones alrededor de la web y rentabilizar todo esto al máximo.

Las “maquinas de marketing” de esta empresa nos han metido en la cabeza que se preocupan por la sociedad y por internet. No olvidemos que Google es una empresa y como tal lo que intenta es sacar el máximo beneficio posible. Ya sea por ayudar o por beneficio la verdad es que están ayudando a dar pasos de gigante en la web y cada día nos sorprenden con novedades muy interesantes. Es de agradecer.

En los siguientes post hablaré sobre algunos de los servicios creados por Google así como de todas las novedades que se nos vienen encima.

Trucos para el buscador, uso básico del API de Google Maps para crear mapas personalizados, Google Calendar, Google Docs y lo mas nuevo en la web, Google Wave……