Incluir un Mapa de Google en tu web en 5 minutos

  • Por
La manera más sencilla de incluir un mapa de Google personalizado en tu web, sin saber programación.
En DesarrolloWeb.com hemos publicado un Manual del API de Google Maps. Este manual trata sobre el desarrollo de aplicaciones utilizando los mapas de Google, enfocado para programadores que quieran aprovechar la potencia de Google Maps en sus desarrollos. Pero en este artículo voy a explicar una manera mucho más sencilla de incluir un mapa de Google en una página web, apta para todo tipo de personas, programadores o no, y que te llevará sólo unos minutos para integrar un mapa personalizado en cualquier web.

Quería aclarar antes que con el API de Google Maps podemos hacer todo tipo de aplicaciones para mostrar mapas de cualquier parte del mundo. Por ejemplo, imaginar que estamos haciendo una página de una inmobiliaria y queremos localizar cada una de las casas en venta, además de mostrar fotos y cualquier otro contenido de los inmuebles en el propio mapa. Para esto necesitaremos forzosamente trabajar con el API, que hemos explicado ya en DesarrolloWeb.com y combinar la base de datos de propiedades de la inmobiliaria, con la interfaz de mapas de Google Maps.

Pero imaginar un caso mucho más sencillo. Tenéis un cliente al que le estáis creando el sitio web y quiere que tenga un mapa de Google con la localización de sus oficinas y la forma de llegar a ellas. Para hacer este único mapa no es necesario utilizar el API de Google Maps, sino sería suficiente crear un único mapa estático e incrustarlo en la página del cliente. Esto se puede hacer fácilmente desde la propia página http://maps.google.com/ y no necesita ningún conocimiento de programación.

Voy a dar una receta por pasos:

1) Entrar en http://maps.google.com/

2) Pulsar sobre el enlace “Mis Mapas”

3) Ahora pulsar sobre “Crear Mapa nuevo”

Crear mapa nuevo

4) Nos pedirá que nos autentiquemos con nuestra cuenta Google. Una cuenta vale para todos los servicios de Google, incluido el de mapas.

5) Entonces podemos empezar a crear nuestro mapa.

Tendremos que darle el nombre y descripción del mapa.

Damos nombre y descripción al mapa de google

Además, a la derecha tenéis el mapa que se va a crear. En este momento están disponibles las opciones para edición del mapa y creación de marcas, líneas, etc. Podréis ver en la esquina superior derecha del mapa una serie de iconos con los que podréis colocar los distintos elementos sobre el mapa.

herramientas para creación del mapa

Experimentar con cada tipo de dibujo que se puede colocar. Además, luego podemos personalizar cualquier cosa, como cambiar el color a las líneas o formas, o poner varios tipos de marcas sobre el mapa. Al crear cualquier elemento o señal sobre el mapa, nos abre una pequeña ventana para colocar las propiedades de este elemento.

editar marcas y otros elementos del mapa

En la anterior imagen hemos marcado con flechas varios elementos: los datos de la marca, que tenemos que rellenar en la ventana de propiedades. Un icono que se puede pulsar para acceder a otras propiedades de la marca, como la forma, el color, etc. Cuando tengamos todo, podemos pulsar el botón de Aceptar.

6) Cuando esté el mapa creado, podemos dar al botón de Guardar y luego al botón marcado como “Listo”, que aparecen a la izquierda.

7) Obtener el código para incluir el mapa en cualquier web.

Este paso tiene varias maneras de hacerse, todas a través del enlace que pone “Enlazar”, situado a la derecha. La opción más versátil es incluir el mapa con un IFRAME, pero debemos personalizar el mapa antes, para que el IFRAME sea exactamente como nosotros queremos.

Primero, como decía, pulsamos sobre “Enlazar” y luego pulsamos sobre “Personalizar y obtener vista previa del mapa que se va a insertar”.

Enlazar el mapa en una página web

Entonces se abrirá una ventana aparte donde dar las propiedades del mapa que vamos a crear para nuestra página web.

Personalizar cómo se mostrará este mapa

En esta página tenemos que indicar: 1) El tamaño del mapa, 2) centrar el mapa donde lo queremos y ponerle el zoom deseado y 3) copiar el código que nos dan.

8) Pegar el código del mapa en nuestra página web

Pues ya está! Una vez pegado el mapa de Google aparecerá tal cual lo hemos personalizado en la página web que deseemos.

Yo he pegado a continuación este mapa de Google de prueba, para que se pueda ver en este artículo de DesarrolloWeb.com.

Eso es todo. Podemos haber tardado un poco más para aprender a crear el mapa, pero una vez sepamos, nos llevará menos de 5 minutos incorporar un mapa de Google en una página web.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

AbelQ

13/11/2008
Una pregunta, se pueden mostrar capas en formato shp sobre el api de google maps.
Muchas gracias

Abel

Dani Valverde

05/2/2009
Hola,
Cuando alineo el iframe a la derecha el texto de la izquierda del mismo me queda muy pegado al frame. Cómo puedo añadir un poco de margen entre el frame i el texto?
Saludos,

Dani

enriquemop

20/4/2009
Gracias
Muchas gracias por este artículo me fué de gran ayuda.

Jorge Vera

19/5/2009
Mapa de Google Excelente
Muchas gracias por este articulo lo encontre EXCELENTE.

HT VIAJES

17/6/2009
Gracias por la información, muy ilustrativa
Muchas Gracias por la información de como insertar el mapa de google en la web, muy ilustrativa.

elias

17/6/2009
Marca Gamil
Incluir un Mapa de Google en tu web en 5 minutos

Jaime

20/7/2009
Mil Gracias
Excelente articulo, ya que todos los que he encontrado son como hacerlo con los API de google, mil gracias

deinon

20/10/2009
Zoom
Una pregunta

*Es posible cambiar el zoom simple por el otro que es mas completo en una linea que puedes seleccionar mas rapidamente el nivel de zoom?

Saludos y gracias.

Obed

03/11/2009
Insertar google
que puedo hacer, si ya cree un mapa y no copie el enlace para pegarlo en mi web, que puedo hacer ya que no encuentro la opcion para hacerlo??

edmundo

26/1/2010
gracias
Excelente tutorial la verdad fue de mucha ayuda gracias

José

18/4/2010
Muy Bueno!!
Muchas gracias! muy simple, bien explicado, me fue muy útil, gracias de nuevo!

Roberto.c

20/4/2010
Gran utilidad.
Gracias miguel por el escrito muy bueno.

Jortx

07/7/2010
Esto tiene una pega
Todo genial, pero tiene una pega.
Precisamente para el caso que comentas (poner un mapa en la web de un cliente) resulta que estos mapas que creamos desde nuestra cuenta de Google tienen el inconveniente de que al pinchar sobre una marca se despliega el "globito" de información y aparece la información del autor (propietario de la cuenta de Google) cuando ese detalle queda muy feo en la web de un cliente, a mi entender.
Saludos.

Franciscounal

17/7/2010
Gracias
Tu receta funciona a las mil amravillas.
muchas gracias.

que bonito se ve un sitio web con la inclusion de un mapita interactivo :)

muchas gracias

María

16/8/2010
Mapas de Google
Muchas gracias....

Lola

23/8/2010
¿Se puede eliminar "Actualizado por"?
Este tutorial es estupendo, muchas gracias. ¿Se puede eliminar, como sugería Jortx, el "Actualizado por"? Es muy muy indiscreto =)

manuel garcia

23/8/2010
importante
el codigo que me muestra en donde ya indique la direccion de mi negocio de google maps me dice que se pegara en la pagina en donde tengo que entrar para que pueda pegar la codificacion

Marco Jimenez

29/9/2010
Agradecimiento
Te agradezco mucho la instrucción me sirvió bastante.

Jaime Urrutia

15/10/2010
Gracias
Fue de gran ayuda, ya inserte el mapa, saludos

ykurnat

25/12/2010
Impresionante, sin no lo sabia antes....
Muchas gracias! ...a uno que no lo sabia antes - es halucinante: sencillo, rápido, facil, y gran resultado en mi página (digo yo - ja-ja-ja). Pero la verdad es que en Editor de mi Servidor (que es Vistaprint) hay una función para colocar una mapa - y es fatal, además por eso te piden un poco más dinero. Entonces aqui nos ayudan, es todo gratis, y con mucha calidad. Gracias al autor y el director de esta WEB - imagino que es D.Miguel Alvarez.

canelo

30/12/2010
creador del mapa
es bastante fácil, sí. El problema que tengo es que una vez creado el mapa e insertado en la web si un usuario pincha en el marcador que pongo en el mapa en la viñeta de comentarios aparece mi nombre de ususario, es decir, algo así como "mapa creado por manolo" y a continuación el texto. Hay alguna opción para quitar lo del creador del mapa?
Gracias por el post y saludos

Trip

07/1/2011
Gracias...!
Hola, muchas gracias por el curso acelerado. Hace tiempo vengo buscando una forma de hacer lo que nos acabas de enseñar y me ha sorprendido gratamente, muy gratamente esta herramienta y la manera de orientarnos por tu parte.

Felicitaciones...!!!

Sigue así, un saludo;

Trip

P4tik0s

21/2/2011
Sobre la creación de mapas
Un tutorial por demás claro e inteligentemente bien explicado. Felicitaciones por ésta y por otras ayudas.
Un saludo cordial

lucia

08/3/2011
insertar mapa en pagina web
Sigo todos los pasos que das para insertarlo pero despues de pegar el codigo que me da, en mi pagina web aparece el codigo tal cual...no el mapa...¿que hago mal?

Fortinero

08/4/2011
GRACIAS
GRACIAS ERA MUY FACIL Y PENSAR KE YO ESTABA CON LAS APIS DE GOOGLE VOLVIENDOME LOCO AJAJAJA!
MUCHAS GRACIAS DE VERDAD!

JAIRO ROSERO YELAholagracais

01/5/2011
ultimo detalle
hola gracias por tu gran aporte
soy novato en lo de web, desearia saber como ubico el codigo en una web hecha en flash cs4, se ubica en cualquier parte del html????
gracias

jairo

francisco

19/5/2011
agradecimiento
Gracias gente!!!

Xavier

24/5/2011
insertar mapa en blog
Hola, la explicación está muy bien.
Mi problema es que he cambiado el servidor y ahora debo poner en Wordpress un mapa que tenía antes en mi blog con otro servidor ( fijo junto con enlaces, buscador, archivo y esas cosas) y no sé cómo hacerlo.
O sea el mapa está hecho y preparado y entro en el sitio que me da cosas en HTML para insertarlo, pero no sé dónde hacerlo. No sé en qué sitio de Wordpress debo ponerlo, no lo encuentro, no sé encontrarlo.
Si puedes ayúdame.

Muchísimas gracias.
Xavier

Carlos

09/6/2011
Gracias
Una explicación simplemente GENIAL. Una verdadera pena que Google, una empresa tan eficaz para muchas cosas, tenga tan poco de divulgativo en nuestro idioma. Es para mi, un elemento común en Google, a cada vez que empredo algo con él tengo gran dificultad en ponerlo en marcha. Una vez hecho queda perfecto, pero el tiempo es excesico cuando se ve la verdadera amplitud del trabajo realizado. Otra vez : muchas gracias!!

Víctor

11/6/2011
Texto del bocadillo
Hola, ya se ha dicho en algunos comentarios ¿existe alguna forma de eliminar el nombre del autor del mapa del bocadillo de información y de los datos del mapa? Como bien han dicho no queda elegante si preparas un mapa para un cliente y aparece - Actualizado por XXX hace un minuto -.
¿Alguien de desarrolloweb sabe cómo hacerlo?

Saludos!

Antonio Camacho

30/6/2011
Filtro de busqueda
tenfo un filtro de busqueda en mi pagina web, lo que quiero hacer es que cada que me envíe resultados mi filtro de busqueda (varios lugares) estos aparezcan señalados en el mapa

de antemano agradezco tu respuesta..

midesweb

30/6/2011
Lo del filtro de búsqueda y otras cosas...
Lo cierto es que este sistema para crear mapas es muy sencillo, pero igualmente limitado está para configurar algunas cosas. Claro que para usos específicos como el filtro de búsqueda y otras cosas que se han preguntado, siempre disponemos del API que nos ofrecen en Google Maps y que hemos explicado en el manual de DesarrolloWeb.com.

espinosa_jluis

01/7/2011
MUY bueno!!
Oye y si quiero poner poligonos en el mismo google maps se puede??? tengo instalado el google earth y hay una opcion de importar poligonoso con la extencion .KML y me funciona, pero como puedo hacerlo si lo quiero poner en una pagina WEB... AYuda por favor.......

Gabriel Gonzalez

06/7/2011
Gracias
esta muy bueno el tema y ya lo puse en practica en mi pagina.... Muchas gracias!!!!!

Ely David

24/7/2011
duda
Excelente tutorial, tengo una pregunta, como puedo colocar un enlace que me lleve dierectamente a una direccion especifica al darle Click? Gracias!

Salvador

06/8/2011
Excelente
Muy buen aporte

Kayni

29/8/2011
Excelente!!!
Muchas gracias por el dato, fue muy sencillo colocar el mapa en mi web.

www.i-magodesign.com

juan hernandez

07/11/2011
MIL GRACIAS
SALUDOS NO ME RESTA MAS KE AGRADECER Y PEDIR QUE SIGAN ADELANTE CON EL APOYO A LA COMUNIDAD,SALUDOS Y RECUERDEN AGREGARME www.faceboook.com/hernandezrevelo

Miguel Florido

28/11/2011
marketing online
Posiciona tu página web en Google. Estrategias de Marketing online ( seo, sem, redes sociales y reputación online), diseño web, manual corporativo y logo

Envagelina

17/1/2012
Thanks
Gracias por la explicación, muy facil de entender y aplicar.
Chao

juan

27/1/2012
GRacias
tu muy bien

Ricardo Ponce

02/3/2012
mapa de google
Muy bueno, habia insertado um mapa en la web que estoy desarrollando como imagen pero al ver este articulo lo cambie por un mapa y VOIL'A, mucho mas atractivo e interactivo, gracias!

Sergio A.

08/5/2012
Agradecimiento
Muchas gracias por tu articulo es de gran ayuda. me sirvio a la perfeccion.

nekaboy

16/5/2012
MI OPINION
ke chido y sin saber nada de progaramacion para web muy buen articulo

camcerbero

18/5/2012
mapa de comunidad de sistemas de vigilancia
Hola,

Tengo una web basada en una comunidad de usuarios con sistemas de videovigilancia desarrollados por los propias usuarios. Quiero incluir un mapa con la ubicación de las casas, pero no la dirección exacta. Tengo un listado en excel. Hay alguna forma de cargar el listado y no tener que picarlo??? El listado lo tengo por calle, sin numeró o por coordenadas a las que añado un margen de error para no dar demasiadas pistas.

La web es www.camcerbero.com

gmonterog

06/6/2012
Agradecimiento
Gracias por el ártículo. Sencillísimo de hacer con esta información.

Sdos.

Gustavo Viera

17/8/2012
Me ha ayudado muchas gracias
Me ha ayudado muchas gracias

neomar araujo

29/1/2013
excelente aporte
Muy buena explicación sencilla y nutritiva los felicito me abren el apetito al desarrollo

Diego

10/3/2013
Hey
Muy util tu comentario !!

miguel angel efren

03/5/2013
gracias me ayudo mucho
gracias me a ayudado en otro de mis modulos para mi pagina web, se les agradece...

Guillermo

19/7/2013
Perfecto
Mejor explicado imposible, he tardado menos de 5 minutos. Muchas gracias, os dejo el resultado.

http://cluwin.com/clubs/miniclub/

Un saludo!

jorge miranda candia

28/8/2013
crear web
tengo un gps en el auto, necesito tener una pagina de google map city para ver mi auto en el mapa de google, como puedo obtener la pagina.
quiero registrarme como usuario de google, me pueden explicar como hacerlo, gracias, jorge

salvador

21/10/2013
muy buen aporte
muy buen aporte muchas gracias !

Fredy

19/11/2013
Agradecimientos
Hola. Gracias por el aporte. Aprendí a hacer los mapas para insertarlos en mi pagina.<br />
:D

Lucas

14/12/2013
Gracias
la verdad que es bastante sencillo y si ya tenés las posiciones bajadas del GPS importas la tabla y listo... gracias de nuevo

Flavia

11/2/2014
Mapa en mi web
Los mapas de google han cambiado por ende desde el punto de modificar la imagen del mapa en adelante no se puede realizar. Por ende si salteo eso y pongo el codigo html en mi web NO se visualiza nada. AYUDA por favor....salds