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>
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+
Usuarios que han visto este tema también han visto...
- Reordenar lista mediante mootools con Javascript
- Redirección con JavaScript
- Nivelando la altura de capas paralelas con JQuery
- Una Base de Datos sencilla, con ActiveX y JavaScript
- Creación de Objetos en JavaScript
- Versión imprimible de este documento
- Enviar por e-mail este documento
