Cómo usar los mapas de Google en tu web
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
Google Maps, Google, maps, API, personalización, web, webmasterRelacionadas , Google Earth 4 y la creación de mapas 3D, Mas mapas antiguos, Compara todos los mapas disponibles, Google Maps en 4D
127 Responses to “Cómo usar los mapas de Google en tu web”
Páginas: « 1 2 [3] Mostrar todos
Páginas: « 1 2 [3] Mostrar todos
Diciembre 15th, 2008 at 11:36 pm
gracias por tus indicaciones, me han sido de gran ayuda
http://www.mepartoelojete.blogspot.com
Diciembre 19th, 2008 at 5:12 am
Exelente aporte!! Mil gracias. Me sirvio muchisimo.
Diciembre 22nd, 2008 at 1:50 am
Eso de tanzania esta buenisimo GRACIAS!!!!!!!!!!!!!!!11
Diciembre 25th, 2008 at 11:41 am
Muy bueno y muchas gracia, da gusto encontrar personas que estan dispuestas ayudar los profanos como yo
Enero 26th, 2009 at 9:09 pm
Que tal Quiero poner el Google map con localizador de lugar y formulario para poner lugares especificos pero no logro hacerlo. Me podes dar una mano?
Desde ya gracias,
Saludos, Mario
Marzo 25th, 2009 at 5:32 am
Esta muy bueno tu tutorial Gracia, por otro lado queria consultarte tu nube de tag, puedes comentarme como lo has hecho , gracias nuevamente
Marzo 27th, 2009 at 12:27 am
No me esta saliendo las vinetas en los mapas de google , genere una clave para http://10.10.10.25/smta/ luego otra para http;//10.10.10.25/smta_map/ mi archivo donde pongo la clave esta en este sitio, por error volvi a generar otras claves para el mismo sitio solo se ve el mapa pero sin vinetas, Como Hago para que google maps me borre todas las claves creadas y yo pueda generar una sola para que me levante el google maps
Gracias
Nota: El IP dado es interno (servidor de pruebas pero me es importante que levante el google maps)
Marzo 27th, 2009 at 12:37 am
Luis, tiene que ser un DOMINIO, no una IP.
Create un dominio local, no hace falta ni que esté registrando, pero que tu servidor Web “escuche” un dominio, no sólo una IP
Abril 30th, 2009 at 9:40 am
interesante pagina.
pero tengo un host gratuito y abri un key de google maps asociado a ese espacio pero no sale ningun mapa. que puede estar fallando?????
a la hora de decir el host debo poner exactamente la direccion que me asignaron? el nombre generioc del proveedor??? ya intente con ambos y nada de nada.
alguien sabe????
y cuando trabajo en localhost como hago para ver ahi los mapas? abro una key con mi ip? solo con localhost????
Mayo 6th, 2009 at 7:39 pm
HOLA BUENAS TARDES, PERDON POR MOLESTARTE PERO NO PUEDO AGREGARLO A MI PAG, YA HISE LO QUE DICES Y NO SE VE NADA EN LA PAG PODRIAS AYUDARME PLISSSS, TE LO AGRADECERIA MUCHISISISIMO
Junio 4th, 2009 at 8:48 am
Wow que bien gracias… me sirvio mucho mucho,
Junio 29th, 2009 at 6:32 pm
no sale mi mapa sera, por que estoy usando una plantilla ccs?
Octubre 8th, 2009 at 5:57 pm
Gracias por los datos!!!
Octubre 10th, 2009 at 10:24 pm
De 10 . . . super sencillo y muy practico . . .
me funciono y por lo tanto estoy muy agradecido con tus explicaciones.
Ahora voy de molon . . . no encuentro la forma de habilitar la opcion para ver el mapa en satelital y no unicamente en la version de dibujitos !!!!
P.D. Yo lo integre a una plantilla CCS . . . asi que si funciona sin importar que platilla utilices, mietras sea html todo va bien !!!!
De nuevo mil gracias amigo !!!!
Noviembre 2nd, 2009 at 8:15 pm
Muchas gracias por tu aporte!!!! Ha facilitado mucho mi trabajo.
Mil Gracias !!!!!
Noviembre 25th, 2009 at 9:13 am
Muy bueno el documento.
Rápido y sencillo, no esperaba poner el mapa tan rapidamente, gracias.
Noviembre 27th, 2009 at 4:54 pm
Gracias mil… muy útil
me quedó de pelos!!!
Diciembre 2nd, 2009 at 2:47 am
mira para poner google maps no tienes que poner nada de nada solo tiennes que ir a Recursos y geoposiciones FreeWebMaps.com,a i te dan el codigo html para ponerlo en tu web o bLog, y te dan la posibilidad de ponerle etiquetas yo la puse en mi web es http://www.mikepani.supersitio.net/google-maps.html
VALLAN Y VERAN
Diciembre 8th, 2009 at 10:43 pm
Muchas gracias, simple e instructivo, será interesante ver como funciona en mi web.
Diciembre 10th, 2009 at 11:31 am
Hola, la verdad no me e enterado de nada, necesito ayuda para insertar un mapa en el web ke estamos creando. Gracias
Diciembre 11th, 2009 at 10:25 pm
que tal amigo se ve super sencillo, mi pregunta es si lo puedo usar en una pagina echa en flash??
gracias!!
Diciembre 28th, 2009 at 11:15 am
Necesito usar un mapa de google maps como indicas en el manual, pero yo no tengo ni la más mínima idea de html.
Estoy haciendo la página con el Incomedia Website X5, y no sé cómo añadir el mapa.
¿Pueden ayudarme?
Saludos.
Enero 4th, 2010 at 12:29 am
Muchas gracias!!!
Enero 7th, 2010 at 1:07 pm
window.onload = showMap;
4 años despues, me has salvado el culo, pues no era capaz de hacer funcionar esto en versiones antiguas de explorer y esa linea de codigo ha solucionado el problema!
Febrero 26th, 2010 at 9:42 pm
Hola que tal muy buena la explicacion, pero tengo una duda compañero, ya coloque el mapa en mi page pero quedo en el modo “mapa” y yo lo quiero en el modo “Satelite” si me puedes ayudar con eso te lo agradeceria.
Febrero 27th, 2010 at 3:16 pm
Muchas gracias por la explicación, al principio un poco lío, pero al final lo he conseguido. Gracias por compartirlo con tod@s!
Marzo 3rd, 2010 at 4:06 am
Muchas gracias me sirvio de mucho. Estoy trabajando en una aplicacion para ubicar posiciones.