Gracias al API de Google Maps cualquiera puede incorporar estos mapas en su web e interactuar con ellos (haciendo zoom, marcando puntos, etc) de la misma manera que lo hace Google Maps.
El sistema es sumamente sencillo y trabaja mediante JavaScript lo ?nico que necesitamos para empezar es conseguir una API Key, una ves que tenemos nuestra API Key es muy sencillo crear un mapa...
Lo que generara el siguiente mapa que ven en la imagen...
Explicaremos un poco el c?digo, lo primero que debemos hacer es incluir el script que nos dara el acceso a la API de Google Maps para eso utilizamos...
Recuerden reemplazar TU-API-KEY por la API Key que Google les dio al registrarse. Una ves ingresada esa l?nea de JavaScript ya disponemos de todas las funciones de Google Maps.
sobre el cual se dibujara el mapa...
y cargar el mismo mediante el evento onload...
function cargar() {
if (GBrowserIsCompatible()) {
??var map2 = new GMap2(document.getElementById("map2"));
??map2.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
GBrowserIsCompatible() nos devuelve verdadero si el navegador utilizado es compatible con Google Maps, a partir de ahi sabiendo que el navegador es compatible podes trabajar tranquilos con el API, a continuaci?n les dejo una lista de los navegadores compatibles...
- IE 6.0+
- Firefox 0.8+
- Safari 1.2.4+
- Netscape 7.1+
- Mozilla 1.4+
- Opera 8.02+
Una ves comprobada la compatibilidad creamos el objeto GMap2 pasandole como parametro el id del div donde se va a mostrar el mapa...
var map2 = new GMap2(document.getElementById("map2"));
Y por ultimo centramos el mapa en una latitud y longitud pasada como parametro por medio de GLatLng...
map2.setCenter(new GLatLng(37.4419, -122.1419), 13);
El ultimo parametro es el zoom. Puedes ver mas informaci?n sobre estas funciones en la Referencia del API de Google Maps.
Hasta aqu? ya creamos un mapa b?sico, a continuaci?n le agregaremos controles como el zoom y el tipo de vista, para ello modificamos el c?digo anterior de manera que quede as?...
if (GBrowserIsCompatible()) {
var map2 = new GMap2(document.getElementById("map2"));
map2.addControl(new GSmallMapControl());
map2.addControl(new GMapTypeControl());
map2.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
Veamos las dos l?neas nuevas de c?digo que agregamos son map2.addControl(new GSmallMapControl()); que agrega la funci?n de movernos y hacer zoom en el mapa y map2.addControl(new GMapTypeControl()); que agrega los distintos tipos de vista (satelital, h?brido, mapa) Veamos con una imagen como queda nuestro mapa...
Podes ver un ejemplo en vivo del mapa creado aqui.
Esto es solo una introducci?n a el API de Google Maps, las posibilidades que nos brinda son infinitas solo hay que investigar un poco la Referencia del API de Google Maps. Tambi?n les dejo algunos links de sitios webs que utilizan Google Maps en su aplicaciones ...
- Buscador de Aeropuertos
- Buscador de Viviendas
- Simulador de Vuelo
- Beatmaps
Saludos.
