feb 072006 Tagged with , , , , , ,

Cómo usar los mapas de Google en tu web


Mucha gente quiere poner mapas de , que ahora tanto se están poniendo de moda, en sus páginas , 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 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?

Map data ©2005 Tele Atlas – Terms of Use

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:

Map data ©2005 Tele Atlas – Terms of Use

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


Map data ©2005 Tele Atlas – Terms of Use

¡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

Traducción Libre del artículo de Exploration Age

, , , , , ,
142 Responses to Cómo usar los mapas de Google en tu web
  1. toni

    gracias por tus indicaciones, me han sido de gran ayuda

    http://www.mepartoelojete.blogspot.com

  2. Megcone

    Exelente aporte!! Mil gracias. Me sirvio muchisimo.

  3. Jorge Luis

    Eso de tanzania esta buenisimo GRACIAS!!!!!!!!!!!!!!!11

  4. Manu

    Muy bueno y muchas gracia, da gusto encontrar personas que estan dispuestas ayudar los profanos como yo

  5. Mario

    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

  6. Juan

    Esta muy bueno tu tutorial Gracia, por otro lado queria consultarte tu nube de tag, puedes comentarme como lo has hecho , gracias nuevamente

  7. luis

    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)

  8. Alex

    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

  9. fernando

    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????

  10. claudia

    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

  11. amg55g

    Wow que bien gracias… me sirvio mucho mucho,

  12. Arturo

    no sale mi mapa sera, por que estoy usando una plantilla ccs?

  13. Jorge

    Gracias por los datos!!!

  14. YAOS

    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 !!!!

  15. Toler

    Muchas gracias por tu aporte!!!! Ha facilitado mucho mi trabajo.

    Mil Gracias !!!!!

  16. Pedro

    Muy bueno el documento.

    Rápido y sencillo, no esperaba poner el mapa tan rapidamente, gracias.

  17. Sayaskywalker

    Gracias mil… muy útil
    me quedó de pelos!!!

  18. mikepani

    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

  19. Circe

    Muchas gracias, simple e instructivo, será interesante ver como funciona en mi web.

  20. poli

    Hola, la verdad no me e enterado de nada, necesito ayuda para insertar un mapa en el web ke estamos creando. Gracias

  21. miguel

    que tal amigo se ve super sencillo, mi pregunta es si lo puedo usar en una pagina echa en flash??
    gracias!!

  22. vicoco

    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.

  23. David

    Muchas gracias!!!

  24. jorge

    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!

  25. lewis

    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.

  26. lupico

    Muchas gracias por la explicación, al principio un poco lío, pero al final lo he conseguido. Gracias por compartirlo con tod@s!

  27. luis

    Muchas gracias me sirvio de mucho. Estoy trabajando en una aplicacion para ubicar posiciones.

  28. Fernando

    Hola! tengo una duda, la realidad es que yo quiero insertar multiples Pins o puntos dentro de mi mapa y cada uno con un comentario.

    Por ejemplo: Un usuario hace una busqueda de direccion, y el mapa cuando le da resultados le muestra muchos puntos y cuando hace click (o rollover sobre el) cada pin le da undato definido por mi (ej. Nombre del establecimiento marcado y cantidad de fans de el que es un parametro que le enviaría yo).

    Obviamente todo esto estaría generado a partir de consultas a la base de datos del sitio.

    Muchas gracias!!!

  29. viridiana

    Hola, Muchisimas gracias por esta información me ha sido de gran ayuda!!

  30. matias

    Emmmm… yo lo puse como Embed en la seccion de “Contacto” de mi web y anda muy bien…

  31. chapo

    Voy a tratar de insertar el mapa de google en pagina, basandome en tu guia que esta muy practica, saludos

  32. jgarridc

    como se puede añadir información al punto que añada en la web??, por ejemplo una imagen, un texto, etc…

  33. Jesus Lopez | Blog de peces

    Muy util muchas gracias.

  34. bryan

    uff viejo muy bueno gracias..!! quisiera saber si podria ayudarme con esto:
    necesito q señalando un punto a y un puno b m diga cual es la distancia uno de otro puede ser de bogota a barranquilla por ejemplo.. muchas gracias mi correo es brianpapi07@hotmail.com

  35. OnRetrieval

    Una articulo muy completo y muy bien explicado. Felicidades.!!!

  36. nerea

    Hola, muchas gracias por tu información, no sabía como hacerlo y este post me ha sido de gran ayuda, lo único que no consigo hacer es que salga la marca del sitio que quiero, cambio las coordenadas como indicas y me pone la marca en culaquier otro sitio, ¿Se te ocurre porqué?
    Gracias otra vez, saludos.

  37. Jose

    Muchas gracias por todo, me ha resultado muy util, pero lo del puntero, con un texto descriptivo no lo hago funcionar

  38. witcher

    Buenas que tal, estoy trrabajando en un proyecto de GPS por medio de un portal movil para controlar ciertos parametros en un vehiculo. Existe la posibilidad en estos mapas de, por ejemplo utilizando un javasrip o php, en vez de poner manualmente una ip, señalarle q obtenga la ip de una antena gps en un vehiculo? la antena ya por medio de un programa en java puedo preguntarle la latitud y longitud, puede redireccionar esta latitud y longitud al mapa para que me la traduzca y dibuje en el mismo de alguna forma?

  39. andres

    Hola! está muy bueno tu tutorial, mil gracias! sin embargo no se como hacer que también me permita la opción de satelite e hibrido, podrías contestarme a mi correo con asunto “CODIGO GOOGLE MAPS”, te lo agradecería infinitamente!! :D

    JAAP

  40. vetencourt

    buenas tardes tengo una empresa de GPS para monitoreo y rastreo de vehiculos, mande hacer una pagina web en donde me aparece el el mapa de google pero se ve un poco borroso, y me dijeron que tenia quie comprar el mapa con algun proveedor pero no conozco a nadie. me podrian ayudar por favor soy de venezuela quien vende los mapas de google maps. gracias

  41. Fonsi

    hola Alex,
    felicidades por el tutorial.
    Queria preguntarte? tu trabajaste en Zaragoza, en una web de oposiciones?
    Si es asi, contactame, tenemos intereses comunes y necesito un programador como tu.
    Saludos!!!

  42. RSCANO

    HOLAAAA A TODOS BUENO QUISIERA SABER SI ALGUIEN DE AQUI TIENE IDEA DE COMO PONER EL GOOGLE MAPS EN EL SERVIDOR WEB TENGO UNA PAGINA HECHA EN FLASH Y EN EL FORMULARIO CONTACTENOS TENGO LA UBICACION PERO ESTA NO ME SALE SOLO CUANDO LO EJECUTO DESDE FLASH SI ALGUIEN SABE COMO HACER QUE EN LA RED ME SALGA SE LO AGRADECERE MUCHO