Loading ...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
142 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
marzo 28th, 2007 at 8:12 am
Antes que nada agradecer los consejos que te has tomado el tiempo de exponer aquÃ. Muy buena explicación la cual no se encuentra en Google.
El problema es: luego de haber seguido los comentarios expuestos por diferentes personas aquà hemos colocado un bocadillo con el nombre del negocio, pero el “globo” del “bocadillo” donde se inserta lo escrito escrito se ve mal ya que unas zonas se ensanchan mas que otras y se ven lineas a traves que dejan ver el mapa.
Si alguien ha tenido la misma experiencia agradecerÃa sus comentarios.
abril 4th, 2007 at 5:18 am
Mil Gracias exelente tutorial
abril 10th, 2007 at 2:08 pm
Tengo una pregunta, hay alguna manera de saber si una coordenada (latitud,longitud) pertenece a tierra o mar ?
Gracias
Andrea
abril 11th, 2007 at 1:03 pm
Gracias por tu clara explicacion.
salud¡¡¡¡
abril 15th, 2007 at 6:46 pm
En la creacion del bocadillo…no se pueden hacer intros?? o algo asi para poder poner mas informacion que todo en una linia? lo he probado pero no me funciona…
abril 17th, 2007 at 11:55 am
Muchas gracias, es justo lo que andaba buscando.
abril 18th, 2007 at 6:58 pm
Excelente tutorial.
mayo 9th, 2007 at 8:50 am
Yo corto y pego lo que me da Google, pero me aparece en la página como si fuera texto¿Dónde hay que pegarlo?.
Trabajocon Front page.
mayo 9th, 2007 at 11:23 am
jose Eladio.. 1 vez lei que usar frontpage es como freir huevos con aceite del coche :p
yo tb agradecerte este tutorial pq me soluciono mis qebraderos d cabeza
mayo 14th, 2007 at 9:57 pm
hola,
cuando pongo el mapa todo correcto, pero una vez cambio las coordenadas y guardo el archivo HTML con Front Page, aparecen las letras cambiadas , osea no reconoce la Ñ o los acentos…
k pasa?
mayo 19th, 2007 at 7:39 pm
Hola:
Sabeis como convertir las coordenadas del tipo 38º 25′ N al tipo que usa google maps
mayo 23rd, 2007 at 5:48 pm
Gracias por la información, realmente me ha sido de gran ayuda…
mayo 30th, 2007 at 8:26 pm
Me has ahorrado un buen trabajillo!! Thankyouu!
junio 8th, 2007 at 10:30 am
Para carlos
Para no tener el problema de que no sean reconocidas las tildes y los caracteres especiales como la “Ñ”, sólo tienes que añadir esta etiqueta META después de la apertura del HEAD de tu archivo:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
junio 9th, 2007 at 2:33 am
Todo estuvo muy bien seguà los pasos y todo salió de maravilla, ahora sólo tengo un problema cuando abre mi página no aparece la imagen satelital sino el mapa, y como no hay mapa en esa área sale un fondo de color solamente y hay que clickear el botón de satélite, como le hago para que abra directamente con la imagen satelital?
junio 15th, 2007 at 11:49 pm
en mis mapas pone Satélite en lugar de Satélite, sabéis que tengo que cambiar para que salga bien.
Un Saludo y gracias.
junio 22nd, 2007 at 6:19 am
necesito saber como hacer para que el mapa que muestro en mi web salga prestablecido como tipo satelital, no puedo aplicar la funcion!!! alguien puede pasarme el codigo completo???
muchas gracias
julio 6th, 2007 at 10:45 am
Hola tengo una duda
Como tengo que hacer para poner 2 google maps en una misma pagina?
Saludos
julio 17th, 2007 at 3:20 pm
Hola Alex,
Buscando otras cosas para ajustar mi sitio Joomla! (Cómo cambiar URL´s absolutas a relativas -si sabes algo me lo cuentas-), he encontrado este blog que me parece super util. Enhorabuena!!
Os pego aqui el código que he puesto en una de las páginas de mi Web (http:/www.vistaalmar.es) para el mapa de google.
Tengo otra página donde el mapa funciona perfectamente, pero quiero añadir otra para que se vea también por satélite (esta que os pego).
Hay una lÃnea que os detallo abajo que no funciona. ¿Dónde tengo que colocarla?
Google Maps JavaScript API Example
//
}
//]]>
Ampliando o reduciendo con los controles de la izquierda puedes visualizar vuestra calle o cualquier lugar del mundo !!!
Gracias y saludos !!!
julio 17th, 2007 at 3:23 pm
Parece que era demasiado largo. aquà os dejo el scrip:
//
}
//]]>
julio 17th, 2007 at 3:25 pm
haber ahora :
//
}
//]]>
–>
julio 17th, 2007 at 3:28 pm
Nada no sale el código !!!
la lÃnea es la que dice más arriba “Spielberg” (si sale ahora la última de todas script type=”text/javascript”>
//
julio 21st, 2007 at 4:25 am
Excelente tutorial, te pasaste!!
saludos de chile
julio 22nd, 2007 at 6:46 pm
muy buen articulo facil y practico.
julio 22nd, 2007 at 8:11 pm
Hola buenas tardes. Entiendo el funcionamiento del google Map. Mi pregunta es :una vez tenidas la longitud y latitud de una calle ¿Cómo puedo escribir su nombre sobre el mapa?.no quiero usar el bocadillo pues son nombres que no están.
GRACIAS
UN SALUDO
julio 25th, 2007 at 6:36 pm
Despues de marearme mucho la cabeza y poder conseguirlo por el tema de las coordenadas que no se si esta muy bien explicado porque yo no lo consegui.
Me doy cuenta que que google te ofrece este servicio mediante un asistente muy facil de usar.
Aquà pongo el enlace:
http://gmodules.com/ig/creator?synd=open&url=http://ralph.feedback.googlepages.com/googlemap.xml
agosto 9th, 2007 at 6:48 pm
neowuj qckwbdpxf yzulxjamf ybxjk mbpjtz takl piqzb
agosto 9th, 2007 at 6:48 pm
neowuj qckwbdpxf yzulxjamf ybxjk mbpjtz takl piqzb
agosto 11th, 2007 at 1:41 am
Si queréis el código del Google maps por satélite, completo y funcionando en un sitio Joomla! enviarme un mail a :
webmaster@vistaalmar.es , aqui no me deja pegarlo completo.
Saludos,
Http://www.vistaalmar.es
agosto 20th, 2007 at 7:17 pm
¿Sabeis como se pone un video de Youtube en un marador? Gracias
septiembre 11th, 2007 at 2:56 pm
Current timestamp is 3f82479e06c27f0429e2ff46505c5425
octubre 25th, 2007 at 12:31 am
Ahora el mismo Google facilita el código HTML para pegar en vuestras páginas.
He desarrollado un pequeño tutorial para Joomla!, lo podeis ver aqui:
-http://www.vistaalmar.es/content/view/103
Los que no desarrolléis páginas con Joomla! seguir sólo el apartado 2) del manual.
Saludos.
diciembre 11th, 2007 at 8:08 pm
La clave de API de Google Maps que utiliza en este sito web se ha registrado para otro sitio. Para generar otra clave de este sitio web dirigete a …etc. He intentado poner http://www.Leganes.tk ..www.piczo.com/ioshicumine .. y ninguna clave va..no se que podria hacer..me podeis ayudar?
diciembre 12th, 2007 at 3:28 pm
Como puedo meter un video en el bocadillo, lo he visto en algunos sitios, pero no lo consigo hacer
diciembre 13th, 2007 at 12:13 am
Venga!!!! a aprender a Salamanca.. Leer los post!!!!
diciembre 14th, 2007 at 3:58 am
Para meter un video en un bocadillo (XD) yo lo que hice fue coger y encerrar el codigo del video con la etiqueta y poner esto donde vaya el contenido del bocadillo
Ej:
enero 28th, 2008 at 10:29 am
Ahora el mismo Google facilita el código HTML para pegar en vuestras páginas.
He desarrollado un pequeño tutorial para Joomla!, lo podeis ver aqui:
http://www.vistaalmar.es/content/view/103
Los que no desarrolléis páginas con Joomla! seguir sólo el apartado 2) del manual.
Saludos.
enero 31st, 2008 at 9:07 pm
Veo que en lugares como Estados unidos marco desde aqui hasta aqui y me establece una ruta perfecta en color morado y la distancia entre ambos puntos lo trato de hacer en mi pais (Costa Rica) y solo me pone unos numeros de latitudes. ejemplo No hemos podido calcular la distancia para dirigirte de 10.044585, -84.306335 a 10.100022,-83.982239 en coche.
febrero 10th, 2008 at 6:31 pm
HOLA CUATES
marzo 27th, 2008 at 11:54 pm
Hola Carlos,
Antes que nada felicitarte por el sitio, es excelente y realmente eres un referente para eso del google maps.
Por mi parte solo tengo un problema, y es que he seguido todos los consejos publicados en este sitio y al igual que al colega Nuncio (publicado el 15/06/2007 ), me sucede que en mis mapas aparece Satélite en lugar de Satélite y HÃbrido en lugar de Hibrido, etc.
¿Alguien puede indicar por favor que modificación debe hacerse o publicar el código para que podamos corregirlo nosotros?
abril 21st, 2008 at 3:16 am
Buenas, quisiera ponerme en contacto con Álex, que parece que es el que domina el tema, o en su defecto, si alguien puede ayudarme con la siguiente duda…bienvenida será cualquier pista.
No quiero mapas en mi página, te las convierte en algo lento y tediosas de cargar, por otro lado creo que necesitará la API de Google Maps, pero es ya que quiero tomar el dato de la distancia que hay desde un punto a otro, sabe alguien si eso es posible de hacer de algún modo?
Ejemplo: La calle Pepito de los Palotes está a 700 m. de donde vive Juana la Loca, sabéis si puedo conseguir de alguna manera los 700 m. dichos?
Muchas gracias.
abril 24th, 2008 at 12:19 pm
Un buen tutorial para un primer contacto con esta herramienta. A nosotros nos falta como a José como meter nombres de lugares y no las coordenadas… seguiremos investigando.
junio 21st, 2008 at 7:38 pm
Hola amigos
este manual o ayuda me ha servido mucho, lo que les agradeceria si hay la posibilidad de que el “bocadillo” este activo siempre, y no esperar al darle el click para verlo.
Muchas Gracias
junio 21st, 2008 at 7:39 pm
Hola amigos
este manual o ayuda me ha servido mucho, lo que les agradeceria si hay la posibilidad de que el “bocadillo” este activo siempre, y no esperar al darle el click para verlo.
Espero que me puedan solucionar este problema.
Muchas Gracias
junio 27th, 2008 at 5:06 pm
Alguien sabe como hacer saltos de linea en los bocadillos???
Gracias
agosto 1st, 2008 at 9:42 pm
estoy haciendo mi pagina en flash, como recien empiezo todo me cuesta mas, gracias por el tutorial, y te hago una preguta… como pongo esto en flash. gracias
agosto 2nd, 2008 at 6:08 pm
Así si que es facil…
Gracias mostruo!
agosto 28th, 2008 at 4:38 pm
[...] Ir al tutorial: 86400.es – Cómo usar los mapas de Google en tu web [...]
octubre 13th, 2008 at 7:54 pm
Excelente explicación, gracias.
diciembre 15th, 2008 at 11:34 pm
gracias por tus indicaciones, me han sido de gran ayuda