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
febrero 7th, 2006 at 7:10 pm
[...] por Redacción el 7 de Febrero de 2006 19:15 · Noticias de: Google, Local / Maps Si te has preguntado siempre cómo hace la gente para incluir un mapa de Google en su sitio web, desde 86400 nos traen la solución, muy bien explicada y en español. [...]
febrero 7th, 2006 at 10:03 pm
¡Chapeau, Alex!
febrero 8th, 2006 at 1:08 am
Mil gracias!!!
ereuncrack
febrero 8th, 2006 at 12:12 pm
O si quieres hacerlo más simple, también puedes darte de alta en Tagzania, hacer tu mapa y pegarlo donde quieras:
http://www.tagzania.com/
febrero 9th, 2006 at 11:49 am
Mucho gracias! Esto es exactamente que necisito para un amigo que tiene una inmobiliaria.
febrero 12th, 2006 at 5:56 pm
informacion interesante, gracias
febrero 23rd, 2006 at 1:02 pm
¿Podemos hacer que se vea por defecto la vista de satélite? Lo comento porque hay muchas zonas fuera de EEUU que no tienen mapas detallados, pero sà que hay buenas imágenes de satélite detalladas.
De todas formas muy interesante la información.
febrero 23rd, 2006 at 1:07 pm
Josep, todo serÃa cuestión de usar el Zoom y ponerlo lo menos posible
marzo 9th, 2006 at 7:38 pm
Gracias
marzo 10th, 2006 at 11:29 am
Gracias por este manual que me ha servido a las mil maravillas. De cómo ponerl el satélite por defecto, debes añadir a la función showMap() la siguiente lÃnea;
map.setMapType(G_SATELLITE_TYPE); Un saludo desde Pamplona;
Spielberg
mayo 26th, 2006 at 12:24 am
Hola!
Muchas gracias por este tutorial, ha sido de mucha utilidad
Ya tengo en mi blog mi mapa, con sus opciones de zoom y el punto exacto que quiera.
Para ya rizar el rizo veo que si me pongo con el cursor encima del punto en el mapa, no sale nada. Se puede poner algun texto? Cuando el cursor esta encima en el explorador sale este codigo: javascript:void(0)
Muchas gracias!!
septiembre 19th, 2006 at 7:59 pm
Muchas Gracias !!! Muy bueno el tutorial !!!
Saludos cordiales !!!!
octubre 1st, 2006 at 7:08 pm
gracias por la documentacion
octubre 5th, 2006 at 2:52 pm
JEJEJE COMO SOYS LOS INFORMATICOS A VER, YO QUIERO ONER GOOGLE MAP, PERO NO SE LAS COORDENADAS Y NI QUIERO SABERLAS PQ ME VA MEJOR LA DIRECCION, NO SE SI ME EXPLICO QUIERO PASARLE A GOOGLE MAPS LA DIRECCION NO LAS COORDENADAS, A VER SI ALGUIEN ES PRACTICO COMO YO!
octubre 13th, 2006 at 3:41 am
estoy realizando mi tesis bajo el tema Los buscadores de mapas avance tecnologico o invasion a la privasidad. me gustaria tener literatura sobre las leyes de la privacidad. hasta que punto se violan la privasidad de los individuos cuando usamos el mapas para localizar la direccion de alguna persona sin que ella este enterada. por favor enviame informacion al respctos..
gracias
octubre 13th, 2006 at 3:47 am
donde podria conseguir los aspectos legales para el uso de buscadores de mapas satelital . para mi tesis , hasta donde legal mente se puede usar los buscadores de mapas para la busqueda de direcciones residenciales sin que la persona sepa que los estan buscando
octubre 13th, 2006 at 8:30 pm
Estuve probando los mapas de imagen satelital, ya que no tengo mapas donde quiero ver, y estuve viendo que no me muestra con la misma calidad que lo hace en la pagina de google
las coord que estoy probando son:
-64.29675157018755
-31.30481479867751
Alguien sabe si es posible que se pueda ver igual que en el sitio de google?
aca es donde pruebo y se ve bien:
http://local.google.com/maps?ll=-31.30481479867751,-64.29675157018755&spn=14.995994,21.972656&z=18&t=h
y cuando pongo esas mismas coord en mi mapa no se ve con esa calidad.
octubre 20th, 2006 at 2:04 pm
BuenÃsimo el tutorial, agradezco, creo que en nombre de todos, que te molestes en detallar tan bien como implementar un código en tu página. Muchas Gracias
octubre 20th, 2006 at 3:02 pm
Hola otra vez, he estado incluyendo el mapa en la web pero me pasa que no me aparecen las flechas de navegación, para hacer zoom, etc ¿y como se podrÃa señalar un punto concreto con un dibujito, una flecha, un nombre o algo en el mapa? He intoducido el código map.addOverlay(new GMarker(new GPoint(-122.499447, 45.484206))); pero no me hace nada. En fin, muchÃsimas gracias y perdón por tanta pregunta… Un saludo!
noviembre 12th, 2006 at 5:23 pm
Hola a todos, he hecho lo del google maps, y perfecto! pero sabe alguien como ponerle una flechita o algo para indicar q lugar de la calle es? me sale el plano pero no la flechita de google. No se si me entendeis. Un saludo.
noviembre 15th, 2006 at 1:33 am
Enormes gracias compañero, ya lo estoy incluyendo en mi web.
noviembre 15th, 2006 at 1:45 am
Por cierto para poner un ‘bocadillo’ con texto señalando al punto que querais. Añadir debajo de la linea última de este manual
map.openInfoWindow(map.getCenter(),document.createTextNode(“Hello, world”));
y cambia el texto por el que quieras
noviembre 27th, 2006 at 12:52 am
Bueno, que decir de tu explicación.
En un rato tengo mi mapa google gracias a tus notas, que por cierto son mas claras que las de google
gracias por tu ayuda
saludos de juan carlos
enero 3rd, 2007 at 8:58 pm
wojkoij ijosi90wmh8n jdwiwnij iowji wo oij
enero 12th, 2007 at 1:19 am
para poner esto en una página de mi inmobiliaria debo pagar algo a Google ? Gracias
enero 16th, 2007 at 12:02 am
aplicaciones de pintura y estucco especializado en montaje de pladur y parqué impermeabilizaciones.
699 60 31 37 pida presupuesto sin compromiso
enero 16th, 2007 at 12:07 am
menuda caradura juani… pa que alguien te ponga el número ése en algún foro de gays xD
enero 19th, 2007 at 12:50 am
Un buen trabajo amigo.
Gracias
enero 19th, 2007 at 10:30 pm
Hola, me gustaria poner google maps en una aplicacion web q estoy aciendo solo que no es una aplicacion que este subida en ningun sitio web esta en la direccion http://localhost/ABD/situacion.asp y no se como registrar esa direccion de forma q me de una clave valida xq poniendo esa directamente no funciona
Saludos
enero 20th, 2007 at 12:27 am
Fernando, supongo que tienes Windows.
Engaña a Windows con el archivo c:\windows\system32\drivers\etc\hosts y haz que tudominio.com vaya a 127.0.0.1 (localhost).
De esa forma tu pondrás tudominio.com en el navegador e irás a localhost
Por otra parte, que tudominio.com lógicamente es el nombre que tendrá tu proyecto cuando lo pongas en Internet, y saca la Key de google para ese dominio
enero 25th, 2007 at 5:38 pm
Muy bueno todo, pero a mi no me sale lo del zoon para acercar o alejar, ni tampoco las flechas de arriba ni abajo, me podeis ayudar?
Gracias
enero 30th, 2007 at 4:47 pm
Gracias por haber escrito esto, me ha abierto nuevas posibilidades.
enero 30th, 2007 at 5:56 pm
Hola!
Estoy intentando hacer esto del Google maps y en realidad me sale…pero no me sale…las coordenadas que me da Google Maps cuando he buscado la ubicacion que me interesa (Rep. Dominicana), al ponerlas en la pagina web me carga una imagen del Polo Sur!!! Y aparte de eso me dice que es un zoom demasiado cercano, con lo cual tengo que darle al zoom – para poder ver la imagen.
Alguien me puede echar una mano?
Gracias a todos, lo de las etiquetas va muy bien.
enero 30th, 2007 at 5:59 pm
has puesto los numeros con decimales americanos ?
si no nos pones lo que escribes es difÃcil ayudarte
enero 30th, 2007 at 6:31 pm
Hola a todos, ya resolvà el problema que tenia. Os mando el código por si sirve a alguien.
He tenido que cambiar el GPoint(X,Y) por GLatLng (X,Y) y poner las coordenadas que me daba el GoogleMaps (tal y como se explica en el manual de arriba)
//
Ahora si, mil gracias por todo!
enero 30th, 2007 at 6:33 pm
//
febrero 6th, 2007 at 5:05 am
soolo queria saber si wachupichu es una palabra que esta en el diccionario real de la lengua; por que si no lo esta deberia estarlo.
otra cosa es que mi hermana le gusta bricar la cuerda. HOLA SOY LA HERMANA QUE BRINCA LA CUERDA SOLO KIERO DECIR KE MIL GRACIAS. hola mi hermana me kito el teclas . PERO YA SO LE LO DE VOLVI.
YO NO DECIA DE ESA PALABRA, DECIA DE LA PALABRA (SO)
febrero 15th, 2007 at 5:41 pm
como puedo extraer el nombre de la calle en google map, partiendo de unas coordenadas
febrero 23rd, 2007 at 1:28 am
Y yo que pensaba que esto era complicadÃsimo. Gracias por el artÃculo.
febrero 26th, 2007 at 3:23 pm
Si esta todo esto muy bien felicidades, pero yo he visto otras webs en Internet que tienen esta misma función con visión satelite (igual que google.com/maps) para ver visión callejero o visión satelite.
Actualmente con esta explicación solo hay la primera versión (callejero) alguien me podria decir como hacer ambas?
Gracias
febrero 28th, 2007 at 5:45 am
hola como puedo implementar mis propios iconos sobre el mapa , que pasos debo de seguir, al guien me puede ayudar, ,il gracias.
marzo 1st, 2007 at 12:13 am
Muchas gracias por el tutorial.
Me sirvio de gran ayuda.
Saludos!
http://www.AlmasseraXelCiudadano.com
marzo 2nd, 2007 at 3:30 pm
GRACIAS
marzo 3rd, 2007 at 5:03 pm
Hola, he conseguido utilizar este código para poner el mapa en mi web, lo único que no entiendo y que no me funciona es la parte de los cuadraditos de cotroles que tiene el mapa de google como por ejemplo: Mapa – Satélite – HÃbrido, querÃa que estas funciones aparecieran. ¿Cómo puedo añadir estas funciones a mi mapa?
Que alguien me ayude por favor…
marzo 4th, 2007 at 11:48 pm
Hola, soy usuario de Mac. Tu tutorial me habÃa dado una alegrÃa tremenda pero algo no funciona.
He seguido tus instrucciones pero no aparece mapa alguno. A lo sumo un texto que dice Google maps API, example.(Este texto me permite cambiarlo) No se si se debe a que estoy añadiendo el código directamente en PLANTILLA, AÑADIR Y ORGANIZAR ELEMENTOS. Lo estoy introduciendo como JAVA script.
Y vaya, que ni mapa, ni Palo Alto. Solo frustación
¿Que hago mal?
GRACIAS POR TU TIEMPO PARA ESTE TUTORIAL
marzo 9th, 2007 at 6:42 pm
pues a mi no me van las cordenadas me lo pone en otro lado diferente :S y a demas me gustaria poner un bocadillo donde se situa mis apartamentos aver si alguien me puede ayudar gracias
marzo 14th, 2007 at 6:17 pm
Buenas, yo necesitarÃa algo mas avanzado, de el mapa que se carga, podrÃa sacar un JPG, GIF etc… y guardarlo? (no me vale un impr. paint).
Salu2!
marzo 14th, 2007 at 11:47 pm
Estoy con un proyecto que debe usar google maps. Me gustarÃa conseguir un manual mas extenso sobre como trabajar con google maps
marzo 15th, 2007 at 12:09 pm
[...] Â Como usar Google Maps en tu web [...]
marzo 21st, 2007 at 3:25 am
hola taradito sorete tu tutorial es una mierda quiero decirte q sos una puta barata y que todavia no le pague a tu vieja.
no veo las horas de que me acompañes al cine a ver una pelicula de stalone asi me imagino como acabar con tu vieja, acabar en el sentido de llenarla de leche.
como si fueramos vacas
ya me estoy frotando la pija con manteca asi me la agarras mas resbalosa,
jajaja mentira todo bien juan, nos vemos mañana en el trabajo chau, acordate de llevar guita asi comemos en la cantina de nestor.