Índice
Antes de empezar
Lo primero que hay que hacer es registrarse en google para conseguir una clave. Para el registro es necesario tener una cuenta gmail.
Una vez conseguida la clave podemos empezar a programar. En la cabecera de nuestra página web ponemos (sustituyendo ABCD por la clave obtenida anteriormente):
<script src= "http://maps.google.com/maps?file=api&v=2&key=ABCD"
type="text/javascript"></script>
Para dibujar el mapa añadimos el siguiente código en la parte de la página que queramos que aparezca el mapa (no olvides darle un tamaño al mapa o no se verá nada):
<div id="map" style="width: 300; height: 300 "></div>
Por último, modificamos el tag <body> para que cargue el mapa de google al cargar la página y lo descargue al cerrar la página:
<body onLoad="load()" onUnload="GUnload()">
La función GUnload es propia de google y no necesitamos definirla, pero la función load sí que debemos escribirlas nosotros. Dependiendo de lo que pongamos en ésta función, nuestro mapa será más o menos complejo. Una vez implementada la función, ya tendremos el mapa en nuestra página web.
Crear un mapa simple
Crearemos un mapa lo más sencillo posible. Para esto añadiremos en la cabecera de nuestra web el siguiente código:
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(0,0), 0);
}
}
</script>
Este código define la función load, que será llamada cuando se cargue la página. La función comprueba si el navegador web es compatible con google maps (GBrowserIsCompatible()), asigna el mapa al objeto definido como map y establece el centro del mapa. De momento no es necesario saber cómo funciona la función setCenter.
Con esto ya tenemos un mapa que se puede arrastar con el ratón. El resultado lo podéis ver aquí.
Añadir controles
Podemos añadir varios tipos de controles a nuestro mapa. Para esto sólo hace falta añadir la siguiente línea de código en nuestra función:
map.addControl(new tipo_de_control());
donde tipo_de_control puede ser uno de los siguientes:
GLargeMapControl: control expandido para modificar el zoom y la posición del mapaGSmallMapControl: control para modificar el zoom y la posición del mapaGSmallZoomControl: control reducido para modificar el zoomGScaleControl: leyenda con la escala actual del mapaGMapTypeControl: control para cambiar el tipo de mapa (mapa, satélite o híbrido)GOverviewMapControl: crea un minimapa en la esquina inferior derecha. Este mapa se moverá en relación al mapa principal y viceversa
Esta línea se puede añadir una o varias veces dentro de nuestra función, como se puede ver en el siguiente ejemplo.