Blogs e Internet Mejoras para tu PC

Cómo usar los mapas de Google en tu web

[su_wiloke_sc_rating_chart title="¿Te gusta el artículo? ¡Valóralo!"]0 media basada en 0 votos[/su_wiloke_sc_rating_chart]

[su_wiloke_sc_company_website]
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?

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 Google Maps

Traducción Libre del artículo de Exploration Age

[tags]Google Maps, Google, maps, API, personalización, web, webmaster[/tags]

[su_wiloke_sc_related_gallery][/su_wiloke_sc_related_gallery]

Alex

Ciudadano del mundo. Me encanta llevarme mi cámara fotográfica para inmortalizar esencias y experiencias en lugares diferentes, donde la gente vive diferente, pero donde todos disfrutamos cada día de puestas de un mismo Sol.

Vistos recientemente...

Observatorio cumple 20 años traduciendo imagenes de la NASA día a día

El rostro del viaje de McCurry

Los juegos no son un juego… but business!

Memozzle, un gimmasio para las neuronas

Memozzle supera las 50.000 descargas en menos de 3 meses

142 Comments

  1. Jota

    ¡Chapeau, Alex!

    7 de febrero de 2006
  2. Oopsh!

    Mil gracias!!!
    ereuncrack

    8 de febrero de 2006
  3. Gari

    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/

    8 de febrero de 2006
  4. Ethereal

    Mucho gracias! Esto es exactamente que necisito para un amigo que tiene una inmobiliaria.

    9 de febrero de 2006
  5. THOR

    informacion interesante, gracias

    12 de febrero de 2006
  6. Josep

    ¿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.

    23 de febrero de 2006
  7. Alex

    Josep, todo sería cuestión de usar el Zoom y ponerlo lo menos posible :)

    23 de febrero de 2006
  8. Javier

    Gracias

    9 de marzo de 2006
  9. Spielberg

    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

    10 de marzo de 2006
  10. Ignasi

    Hola!

    Muchas gracias por este tutorial, ha sido de mucha utilidad :D

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

    26 de mayo de 2006
  11. Martin

    Muchas Gracias !!! Muy bueno el tutorial !!!
    Saludos cordiales !!!!

    19 de septiembre de 2006
  12. Xavier

    gracias por la documentacion

    1 de octubre de 2006
  13. jose

    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!

    5 de octubre de 2006
  14. angel alvarez

    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

    13 de octubre de 2006
  15. angel alvarez

    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

    13 de octubre de 2006
  16. marcelo

    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.

    13 de octubre de 2006
  17. Yo mismo

    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

    20 de octubre de 2006
  18. Yo mismo

    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!

    20 de octubre de 2006
  19. Lidia

    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.

    12 de noviembre de 2006
  20. islacomputer.com

    Enormes gracias compañero, ya lo estoy incluyendo en mi web.

    15 de noviembre de 2006
  21. islacomputer.com

    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

    15 de noviembre de 2006
  22. juan

    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

    27 de noviembre de 2006
  23. muriel

    wojkoij ijosi90wmh8n jdwiwnij iowji wo oij

    3 de enero de 2007
  24. Broki

    para poner esto en una página de mi inmobiliaria debo pagar algo a Google ? Gracias

    12 de enero de 2007
  25. JUANI DOMINGUEZ

    aplicaciones de pintura y estucco especializado en montaje de pladur y parqué impermeabilizaciones.

    699 60 31 37 pida presupuesto sin compromiso

    16 de enero de 2007
  26. MikiBroki

    menuda caradura juani… pa que alguien te ponga el número ése en algún foro de gays xD

    16 de enero de 2007
  27. Simo

    Un buen trabajo amigo.
    Gracias

    19 de enero de 2007
  28. Fernando

    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

    19 de enero de 2007
  29. Alex

    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 :)

    20 de enero de 2007
  30. Ester

    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

    25 de enero de 2007
  31. Elenotes

    Gracias por haber escrito esto, me ha abierto nuevas posibilidades.

    30 de enero de 2007
  32. Elenotes

    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.

    30 de enero de 2007
  33. Alex

    has puesto los numeros con decimales americanos ?
    si no nos pones lo que escribes es difícil ayudarte

    30 de enero de 2007
  34. Elenotes

    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!

    30 de enero de 2007
  35. Elenotes

    //

    30 de enero de 2007
  36. jelu

    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)

    6 de febrero de 2007
  37. Norberto

    como puedo extraer el nombre de la calle en google map, partiendo de unas coordenadas

    15 de febrero de 2007
  38. Shakimania

    Y yo que pensaba que esto era complicadísimo. Gracias por el artículo.

    23 de febrero de 2007
  39. Francisco

    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

    26 de febrero de 2007
  40. albertico

    hola como puedo implementar mis propios iconos sobre el mapa , que pasos debo de seguir, al guien me puede ayudar, ,il gracias.

    28 de febrero de 2007
  41. webmaster de Almassera X el CIudadano

    Muchas gracias por el tutorial.
    Me sirvio de gran ayuda.
    Saludos!

    http://www.AlmasseraXelCiudadano.com

    1 de marzo de 2007
  42. anyeli

    GRACIAS :-)

    2 de marzo de 2007
  43. Janete M. C. Silva

    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…

    3 de marzo de 2007
  44. Dalton

    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

    4 de marzo de 2007
  45. Dj_juas

    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

    9 de marzo de 2007
  46. Javi

    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!

    14 de marzo de 2007
  47. Farraloca

    Estoy con un proyecto que debe usar google maps. Me gustaría conseguir un manual mas extenso sobre como trabajar con google maps

    14 de marzo de 2007
  48. pijose

    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.

    21 de marzo de 2007
  49. Alejandro

    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.

    28 de marzo de 2007
  50. Tabaré

    Mil Gracias exelente tutorial

    4 de abril de 2007
  51. Andrea

    Tengo una pregunta, hay alguna manera de saber si una coordenada (latitud,longitud) pertenece a tierra o mar ?

    Gracias
    Andrea

    10 de abril de 2007
  52. ines

    Gracias por tu clara explicacion.

    salud¡¡¡¡

    11 de abril de 2007
  53. irlin

    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…

    15 de abril de 2007
  54. Tomas

    Muchas gracias, es justo lo que andaba buscando.

    17 de abril de 2007
  55. Alberto

    Excelente tutorial.

    18 de abril de 2007
  56. José Eladio

    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.

    9 de mayo de 2007
  57. xyra

    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 :)

    9 de mayo de 2007
  58. carlos

    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?

    14 de mayo de 2007
  59. alfonso

    Hola:

    Sabeis como convertir las coordenadas del tipo 38º 25′ N al tipo que usa google maps

    19 de mayo de 2007
  60. David

    Gracias por la información, realmente me ha sido de gran ayuda…

    23 de mayo de 2007
  61. Gael

    Me has ahorrado un buen trabajillo!! Thankyouu!

    30 de mayo de 2007
  62. Oullack777

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

    8 de junio de 2007
  63. Marcelo

    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?

    9 de junio de 2007
  64. Nuncio

    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.

    15 de junio de 2007
  65. ale

    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

    22 de junio de 2007
  66. felipe

    Hola tengo una duda
    Como tengo que hacer para poner 2 google maps en una misma pagina?
    Saludos

    6 de julio de 2007
  67. Chupi

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

    17 de julio de 2007
  68. Chupi

    Parece que era demasiado largo. aquí os dejo el scrip:

    //
    }

    //]]>

    17 de julio de 2007
  69. Chupi

    haber ahora :

    //
    }

    //]]>
    –>

    17 de julio de 2007
  70. Chupi

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

    //

    17 de julio de 2007
  71. Marco antonio fuentes

    Excelente tutorial, te pasaste!!
    saludos de chile

    21 de julio de 2007
  72. Ignacio Fayol

    muy buen articulo facil y practico.

    22 de julio de 2007
  73. ARACELI

    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

    22 de julio de 2007
  74. Diseñador Web

    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

    25 de julio de 2007
  75. woiux ozrqiksn

    neowuj qckwbdpxf yzulxjamf ybxjk mbpjtz takl piqzb

    9 de agosto de 2007
  76. woiux ozrqiksn

    neowuj qckwbdpxf yzulxjamf ybxjk mbpjtz takl piqzb

    9 de agosto de 2007
  77. chupi

    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

    11 de agosto de 2007
  78. farraloca

    ¿Sabeis como se pone un video de Youtube en un marador? Gracias

    20 de agosto de 2007
  79. Crow

    Current timestamp is 3f82479e06c27f0429e2ff46505c5425

    11 de septiembre de 2007
  80. Chupi

    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.

    25 de octubre de 2007
  81. raul

    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?

    11 de diciembre de 2007
  82. Neolo

    Como puedo meter un video en el bocadillo, lo he visto en algunos sitios, pero no lo consigo hacer

    12 de diciembre de 2007
  83. chupi

    Venga!!!! a aprender a Salamanca.. Leer los post!!!!

    13 de diciembre de 2007
  84. farraloca

    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:

    14 de diciembre de 2007
  85. Chupi

    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.

    28 de enero de 2008
  86. cesar dario

    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.

    31 de enero de 2008
  87. CXV

    HOLA CUATES

    10 de febrero de 2008
  88. Alberto

    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?

    27 de marzo de 2008
  89. Enric

    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.

    21 de abril de 2008
  90. Mudanzas

    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.

    24 de abril de 2008
  91. Arturo

    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

    21 de junio de 2008
  92. Arturo

    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

    21 de junio de 2008
  93. Bocadillo

    Alguien sabe como hacer saltos de linea en los bocadillos???

    Gracias

    27 de junio de 2008
  94. natalia

    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

    1 de agosto de 2008
  95. Jose Manuel

    Así si que es facil…
    Gracias mostruo!

    2 de agosto de 2008
  96. Mexicano

    Excelente explicación, gracias.

    13 de octubre de 2008
  97. toni

    gracias por tus indicaciones, me han sido de gran ayuda

    15 de diciembre de 2008
  98. toni

    gracias por tus indicaciones, me han sido de gran ayuda

    http://www.mepartoelojete.blogspot.com

    15 de diciembre de 2008
  99. Megcone

    Exelente aporte!! Mil gracias. Me sirvio muchisimo.

    19 de diciembre de 2008
  100. Jorge Luis

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

    22 de diciembre de 2008
  101. Manu

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

    25 de diciembre de 2008
  102. 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

    26 de enero de 2009
  103. Juan

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

    25 de marzo de 2009
  104. 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)

    27 de marzo de 2009
  105. 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

    27 de marzo de 2009
  106. 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????

    30 de abril de 2009
  107. 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

    6 de mayo de 2009
  108. amg55g

    Wow que bien gracias… me sirvio mucho mucho,

    4 de junio de 2009
  109. Arturo

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

    29 de junio de 2009
  110. Jorge

    Gracias por los datos!!!

    8 de octubre de 2009
  111. 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 !!!!

    10 de octubre de 2009
  112. Toler

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

    Mil Gracias !!!!!

    2 de noviembre de 2009
  113. Pedro

    Muy bueno el documento.

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

    25 de noviembre de 2009
  114. Sayaskywalker

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

    27 de noviembre de 2009
  115. 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

    2 de diciembre de 2009
  116. Circe

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

    8 de diciembre de 2009
  117. poli

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

    10 de diciembre de 2009
  118. miguel

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

    11 de diciembre de 2009
  119. 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.

    28 de diciembre de 2009
  120. David

    Muchas gracias!!!

    4 de enero de 2010
  121. 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!

    7 de enero de 2010
  122. 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 de febrero de 2010
  123. 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 de febrero de 2010
  124. luis

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

    3 de marzo de 2010
  125. 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!!!

    17 de junio de 2010
  126. viridiana

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

    19 de julio de 2010
  127. matias

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

    9 de agosto de 2010
  128. chapo

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

    9 de agosto de 2010
  129. jgarridc

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

    26 de agosto de 2010
  130. Jesus Lopez | Blog de peces

    Muy util muchas gracias.

    24 de octubre de 2010
  131. 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

    11 de noviembre de 2010
  132. OnRetrieval

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

    19 de noviembre de 2010
  133. 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.

    4 de enero de 2011
  134. Jose

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

    20 de febrero de 2011
  135. 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?

    24 de marzo de 2011
  136. 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

    31 de marzo de 2011
  137. 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

    18 de julio de 2011
  138. 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!!!

    22 de julio de 2011
  139. 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

    5 de septiembre de 2011