Como integrar Google Maps en tu web
Escrito por Mauro Rondinelli el Martes 15 de Agosto de 2006 a las 00:00hs
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...
<!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>
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...
<script src="http://maps.google.com/maps?file=api&v=2&key=TU-API-KEY" type="text/javascript"></script>
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.
Lo que queda es crear el <div> sobre el cual se dibujara el mapa...
<div id="map2" style="width: 500px; height: 300px"></div>
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 ...
comentarios
-
Gracias man!
-
Quiero desarrollar un software para monitoreo de vehículos. Concretamente, desde un GPS se emiten las señales de latitud longitud y hora. En un servidor recibo esa información, levanto el mapa correspondiente y voy haciendo el seguimiento de vehículos, dejando el trazado para verlo al final del día también sobre el mapa. Puedo usar los mapas de Google? Se te ocurre algo mejor? Saludos
-
Si utiliza mappoint es offline y se puede programar directamente a través de visual basic
-
Esta genial, felicidades por tu articulo. Me durgen algunas dudas; por ejemplo como integrar una pagina web a Google Maps conociendo unicamente la Poblacion, Codigo Postal y/o la direccion de un lugar. Como convierto esa informacion en Latitudes para pasar los parametros a tu rutina ??
Saludos -
Al igual que Jorge estoy en monitoreo de vehiculos, puedo usar la api de google maps para eso y hacer un pagina web que me los muestre? En realidad ya lo tengo hecho, lo que quiero saber es la legalidad.
Gracias -
Excelente articulo, la verdad hace muchas cosas y es genial, pero al igual que los demas tengo dugas respecto a trazar un secuencia de puntos en el mapa, es decir, el recorrido que hace el vehiculo en un rango de fechas establecido, como le puedo hacer para graficar esos puntos?
Gracias de antemano. -
Hola,
estoy interesado en incluir en mi web valderredible.iespana.es, un enlace a google earth para observar a vista de pájaro la topografía de una zona concreta, la situación de las localidades y carreteras y caminos de comunicación, así como las fotografías que le gente va realizando e incluyendo en Panoramio.
Muchas gracias por las molestias.
Un saludo -
En mi pàgina he trabajado con ASP, usando una pàgina principal y otras externas, usando INCLUDES de ASP pero usandolos desde la solapa HTML icono/boton Script, el SSI para finalizar el CSS es la vida del documento HTML, sin el CSS, todo seria mucho mas complicado y tardariamos horas en lograr algo.
-
excelente nota, muchas gracias.
ahora una preguntilla que me ronda desde hace un tiempo, como obtener las coodenadas de una dirección, existe algún método facil para llegar a las coordenadas de nuestra casa p.ej. -
Hola, es la primera vez que pongo un comentario en internet, pues he visto que la pregunta de como poner el mapa google en tu web se hace mucho.
Lo MAS FACIL ES : te vas directamente a google map, buscas lo que quieres poner el tu web, Al lado del mapa te sale un enlace que pone: ENLAZAR CON ESA PAGINA, te sales dos codigos y copias el de abajo, lo pegas en tu web donde quieras y ya esta. Es cosa de dos minutos y no tienes que saber nada de HTML. Asi quedara en tu web: http://www.barcelonanights.net/mapa.html
Ahhh, lo puedes poner como opcion satelite o como calles.
Espero que os haya servido de ayuda!!!! -
Gracias por el tutorial, Mauro. Perfecto.
Me pregunto cómo hacer para evitar que aparezcan caracteres extraños en las etiquetas de "Satélite" e "Híbrido" cuando tienes el charset de la página definida como iso-8859-1.
Si alguien tiene alguna pista...
Saludos! -
os recomiendo mirar esta pagina que esta hecha en español y habla muy bien y desde el nivel basico hasta el avanzado, de google maps poniendolo en tu propia web.
http://mapsapi.campus.googlepages.com/home2