Descargar Google Earth

Incrustación de mapas en un sitio web

 

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

 

Introducción

Probablemente querrás incrustar el mapa directamente en tu sitio web. Para En este tutorial, utilizaremos tanto Google Page Creator como Blogger para enseñarte a incrustar un mapa en un sitio web y en un blog. Si quisieras editar tu sitio web directamente, en la primera parte de este tutorial encontrarás todas las instrucciones que necesitas. 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 Google Page Creator y Blogger.

1. Accede a Google Maps. Abre el mapa que vas a incrustar en tu sitio web. Puedes incrustar un mapa con indicaciones para viajar en coche, una búsqueda local o un mapa que hayas creado con la ficha "Mis mapas". Si quieres ver los mapas que tienes guardados, accede a tu cuenta de Google. Si no tienes cuenta de Google, entra aquí.

Vamos a utilizar la página "Limpieza Retiro" que creamos en el tutorial Creación de mapas con la ficha "Mis mapas".

2. Haz clic en "Enlazar con esta página" y copia el código del campo "Pegar HTML para incrustar en el sitio web". Para cambiar el tamaño y abrir una vista previa del mapa, haz clic en "Personalizar y obtener vista previa del mapa incrustado". No olvides que no podrás incrustar mapas de tráfico, imágenes de vista de la calle, 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 Google Page Creator y 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 mira el mapa que acabas de incrustar.

mis mapas

 

Uso de Google Page Creator

1. Dirígete a Google Page Creator y accede con los datos de tu cuenta de Google, si no lo hubieras hecho ya.

2. Haz clic en "Create a new page" (Crear página nueva).

3. Escribe un título para tu página y haz clic en "Create and Edit" (Crear y editar).

mis mapas

4. Haz clic en el área en la que quieres que aparezca el mapa y abre "Edit HTML" (Editar HTML) en la esquina inferior derecha.

mis mapas

5. Toma el texto que copiaste del campo "Pegar HTML para incrustar en el sitio web" y pégalo en la ventana.

6. Haz clic en "Update" (Actualizar). Ten en cuenta que es posible que sólo puedas ver el mapa si ves la página "Preview" (Vista previa) o "Published" (Publicado).
La página terminada deberá tener un aspecto similar a este, aunque la plantilla difiera:

mis mapas

¡Y ya está! Ahora dispones de las herramientas para compartir tu mapa con el resto del mundo y desde tu propio dominio.

 

Uso de Blogger

1. Dirígete a Blogger y abre el panel 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 panel, abre la ficha "Creación de entradas" y selecciona "Crear".

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 incrustar en el sitio web". Como queremos dar indicaciones de cómo llegar 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 mira si te gusta. Después, haz clic en el botón "Publicar entrada".

mis mapas

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

 

Corre la voz a favor de tu causa

Ahora que te has familiarizado con la incrustació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 un mapa con la ficha "Mis mapas", debiste seleccionar un 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 "Lugares de interés".

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 incrustar una 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 sobre Google Earth Solidario para hablar del tema con otros usuarios.

 

¿Y después qué?

Este tutorial te ha enseñado a incrustar un mapa en tu sitio web. A continuación, puedes aprender a mejorar tu mapa 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: