Mucha gente quiere poner mapas de google, que ahora tanto se están poniendo de moda, en sus páginas web, pero parece complicado o no se sabe como hacerlo. Como está demandado, proponemos este manual que explica paso a paso como hacerlo, con un mínimo conocimiento de HTML, y en donde en unos minutos tendrás listo tu mapa de Google.
Veamos un ejemplo entonces de cómo añadir un mapa a una página de contacto fácil y rápido.
Primero necesitas una clave de Google Maps API key, que es gratis y con la que podrás disfrutar del servicio. Para conseguirla ve a http://www.google.com/apis/maps/. Guardate el enlace, ya que encontrarás también documentación muy interesante para más adelante.
Sigue las instrucciones de "Sign up for a google API key". Necesitarás una cuenta de gmail y poner el nombre del dominio donde usaras el mapa, ya que así Google nos da permiso para hacerlo. La clave puede ser sólo usada en páginas de ese dominio que pongas. Si vas a desarrollarlo en un servidor diferente, te aconsejo que cojas 2 claves, una para el de desarrollo y otra donde lo publicarás. Son gratis, no te preocupes.
Con la clave, Google te dará un código similar al siguiente (algunas líneas pueden estar cortadas por problemas de espacio. Asegurate que todos los SCRIPT estén en la misma línea).
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=
[LACLAVE]" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
//]]>
</script>
</body>
</html>Tendrás una clave diferente en SCRIPT, generado por Google para que coincida con tu nombre de dominio. Para añadir el mapa en tu página, tendrás que cortar y pegar los trozos de código del ejemplo que te dá Google. Primero,
<script src="http://maps.google.com/maps?file=api&v=1&key=
[TUCLAVE]" type="text/javascript"></script>Este script incluye 2 cosas . Primero, enlaza con el javascript que necesitas para ejecutar el mapa y segundo, le dice a Google que has metido correctamente la clave. Añade este SCRIPT en cualquier parte de tu página (encima del código que viene ahora.)
Después verás este DIV:
<div id="map" style="width: 500px; height: 400px"></div>Esto hace que el mapa aparezca en pantalla. Pon este DIV en cualquier parte de la página donde quieres que aparezca el mapa. Asegurate de actualizar los datos de anchura y altura para conseguir el tamaño que desees. Finalmente verás este javascript:
<script type="text/javascript">
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
//]]>
</script>El código de Google puede dar algún problemilla en Internet Explorer, así que haz esta pequeña modificación para que funcione mejor. Esencialmente, permite que cualquier cosa se cargue antes de dibujar el mapa (además de prevenir que el IE casque)
<script type="text/javascript">
//<![CDATA[
window.onload = showMap;
function showMap()
{
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
}
//]]>
</script>Este es el código que realmente pinta el mapa. Ponlo en tu código despues del DIV del mapa. La primera línea inicializa el mapa y asigna el mapa al DIV. La segunda añade los controles de zoom. Finalmente, la tercera centra el mapa en un punto y zoom determinados. Ahora tienes un mapa, pero está apuntando por defecto a las oficinas centrales de Google en Palo Alto. ¿Cómo entonces ponerlo en las coordenadas que yo quiero inicialmente? E incluso mejor aún, ¿cómo puedo poner esas marcas en el mapa?
Chupado. Primero necesitas la latitud y longitud del sitio donde quieres apuntar el mapa. Usa Google para ello, ve a http://maps.google.com y usa los controles y el zoom para llegar a tu lugar preferido. Una vez que lo encuentres, pulsa dos veces en el lugar para centrarlo bien. Pulsa en "link to this page", y eso te llevará a una URL directa del lugar en cuestión. Por ejemplo, verás en la barra de direcciones una dirección así…
http://maps.google.com/?ll=45.484206,-122.499447&spn=0.031833,0.069523
Como ves, contiene la latitud y longitud (ves lo de ll=45.48… esas son las coordenadas). Ahora necesitamos poner esas coordenadas en nuestro mapa para apuntarlo y centrarlo. Modifica la linea que pone map.centerAndZoom con las nuevas coordenadas, por ejemplo así:
map.centerAndZoom(new GPoint(-122.499447, 45.484206),8 );Ahora tu mapa apunta a las nuevas coordenadas. Además puedes jugar un poco con el último número (4) para cambiar el nivel de zoom por defecto. Intenta por ejemplo un 8 para acercarlo mucho:
Funalmente, podemos añadir puntos añadiendo una línea de javascript justo después de map.centerAndZoom.
map.addOverlay(new GMarker(new GPoint(-122.499447, 45.484206)));Date cuenta de que usamos el mismo tipo de coordenadas que en map.centerAndZoom
¡Voila! Tienes tu mapa personalizado e interactivo. Si quieres más puedes estudiar la documentación que comentabamos al principio y poner ahora más puntos o funcionalidades nuevas a tu mapa.
Disfruta de Google Maps
Traducción Libre del artículo de Exploration Age
[tags]Google Maps, Google, maps, API, personalización, web, webmaster[/tags]