Google Earth
Cambiar idioma:

Inserción de mapas de Google Maps en un sitio web

En el tutorial Creación de mapas con la pestaña "Mis mapas" te mostramos varias maneras de utilizar los mapas en tu organización. Ahora te mostraremos cómo insertar un mapa en tu sitio web o en tu blog (dependiendo de tu ubicación). Puedes insertar en tu sitio web un mapa sencillo, rutas en coche, un mapa que hayas creado tú mismo con la pestaña "Mis mapas", un mapa de una búsqueda local o mapas creados por otros usuarios.

Este vídeo demuestra cómo se puede colaborar con Mis mapas de Google.

Contenido del tutorial:

Probablemente querrás insertar el mapa directamente en tu sitio web. En este tutorial utilizaremos Blogger para enseñarte a insertar un mapa en un sitio web y en un blog. Si no tienes tu propio sitio web o si quieres aprender a añadir mapas a tus entradas en blogs, en este tutorial encontrarás instrucciones sobre cómo hacerlo con Blogger.

Requisitos previos

  • No es necesario tener ningún conocimiento de programación.

Empecemos

1. Accede a Google Maps. Abre el mapa que deseas insertar en tu sitio web. Puedes insertar un mapa con una ruta en coche o una búsqueda local, o bien un mapa que hayas creado a través de la pestaña "Mis mapas". Si quieres ver los mapas guardados, accede a tu cuenta de Google. Si no tienes una cuenta de Google, consigue una aquí.

Vamos a utilizar la página de limpieza del Retiro que creamos en el tutorial Creación de mapas utilizando la pestaña "Mis mapas".

2. Haz clic en Enlazar y copia el código que aparece en el campo Pegar HTML para insertar en sitio web. Para cambiar el tamaño y abrir una vista previa del mapa, haz clic en Personalizar y obtener vista previa del mapa que se va a insertar. No olvides que no podrás insertar mapas de tráfico, imágenes de Street View, ni mapplets.

3. Dirígete a tu aplicación de edición de páginas web y localiza el mejor lugar para el mapa dentro del sitio web. (A continuación tienes algunos ejemplos de cómo usar Blogger).

4. Pega el código del mapa que has copiado en el código HTML del sitio web donde te gustaría colocar el mapa.

5. Guarda tu página web y realiza una vista previa del mapa que acabas de insertar.

mymaps

Inserción de un mapa en Blogger

1. Dirígete a Blogger y abre el escritorio de tu blog. Si no tienes un blog, crear uno es muy fácil. Accede a tu cuenta de Google y sigue los sencillos pasos necesarios para crear un blog.

2. Cuando te encuentres en el escritorio, abre la pestaña "Creación de entradas" y selecciona "Nueva entrada".

3. Escribe el título de la entrada y el texto que acompañará al mapa. Haz clic en la pestaña "Edición de HTML".

4. Vuelve a Google Maps, copia el texto del campo Pegar HTML para insertar en sitio web. Como queremos dar indicaciones de cómo llegar en coche a "Limpieza Retiro", utilizaremos el código HTML del resultado de esa búsqueda.

 

Deberías estar aquí:

blogger

5. Abre una vista previa del mapa en la entrada y comprueba si te gusta. Después, haz clic en el botón "Publicar entrada".

mymaps

¡Enhorabuena! Has insertado correctamente un mapa en tu entrada de blog.

Da a conocer tu causa

Ahora que te has familiarizado con la inserción de mapas directamente en tu sitio web o en tu blog, los visitantes que accedan a tu sitio podrán ver tu trabajo.

Si creaste el mapa con la pestaña "Mis mapas", debiste seleccionar el botón "Público" o "Publicación restringida". Si seleccionaste "Público", todos los usuarios de Google Maps podrán ver el mapa. También puedes buscar los mapas de otros. Aquí puedes ver cómo:

1. Abre Google Maps y haz clic en la pestaña "Mis mapas". Acerca la imagen a un área que te interese.
2. Mira bajo "Contenido destacado" y haz clic por ejemplo en "Examinar los mapas más populares".

Igualmente, si encuentras un mapa que te guste, lo puedes guardar en "Mis mapas".

Más información sobre Google Maps y sobre cómo insertar un API de Google Maps en tu sitio web con JavaScript

Debates y comentarios

¿Tienes alguna pregunta acerca de este tutorial o algún comentario? Visita el grupo de debate de Google Earth Solidario para hablar del tema con otros usuarios.

¿Qué más?

Este tutorial te ha enseñado a insertar un mapa en tu sitio web. A continuación puedes aprender a mejorar tus mapas o tus marcas de posición de Google Earth con vídeos de YouTube.

También puedes aprender a crear marcas de posición personalizadas en Google Earth en este tutorial: