Una de las novedades por ahi que se ven muy a menudo en los sitios es la integracion de Google Maps; en algunos casos es de suma utilidad pero en muchos otros la verdad es que no le encuentro el sentido. Para aquellos que querramos tener disponible de este servicio en nuestra web; podremos hacerlo mediante el uso de la API de Google, la cual nos dará la posibilidad de integrar Google Maps ademas de poder interactuar con el mapa.
Para hacerlo primero deberemos conseguir una Key de la API (en este sitio); y luego ya podremos crear el mapa; aqui les dejo el codigo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Como integrar Google Maps en tu web</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=TU-API-KEY" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function cargar() {
if (GBrowserIsCompatible()) {
var map2 = new GMap2(document.getElementById("map2"));
map2.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="cargar()">
<div id="map2" style="width: 500px; height: 300px"></div>
</body>
</html>
Les explico un poco el codigo.
Lo primero que hacemos es incluir el script que nos da el acceso a la API de Google Maps; mediante la API Key que anteriormente habiamos soliciato.
<script src="http://maps.google.com/maps?file=api&v=2&key=TU-API-KEY" type="text/javascript"></script>
Por supuesto deberemos reemplazar la parte que dice TU-API-KEY por las que nos proporciono Google.
Una vez que tenemos esta linea de codigo, ya dispondremos de todas las funcionalidades del servicio; lo que nos queda hacer es dibujar el mapa en un div. Para eso escribiremos el siguiente codigo:
<div id="map2" style="width: 500px; height: 300px"></div>
..y cargar éste mediante el evento onload:
function cargar() {
if (GBrowserIsCompatible()) {
var map2 = new GMap2(document.getElementById("map2"));
map2.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
lo que verificar primero es si el Browser es compatible con Google Maps; si la condicion es TRUE entonces creamos un objeto GMap2 pasandole como parametro el div donde se dibujará.
if (GBrowserIsCompatible()) {
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 que pasa en esta funcion es el zoom ( en este caso 13).
De ésta manera tendremos un mapa ubicado en las coordenadas especificadas; y dibujado en el div que le habiamos dicho. Pero este es solo un mapa sin controles; si queremos agregar las funcionalidades de zoom, y poder cambiar las vistas (mapa, satelital, hibrido), tendremos que agregar 2 lineas de codigo a la ultima funcion que habiamos comentado:
map2.addControl(new GSmallMapControl());
esta linea agrega la posibilidad de movernos en el mapa y hacer zoom
map2.addControl(new GMapTypeControl());
y esta otra linea de codigo, nos da la posibilidad de elegir el tipo de vista del mapa (mapa, satelital, hibrido)
Agregando estas lineas a nuestra ultima parte del codigo, nos quedaria de la siguiente forma.
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);
}
Con esto ya tendremos Google Maps, en nuestro sitio, totalmente funcional.
Espero que les sirva, cualquier duda me escriben
Saludos
