Cómo insertar un mapa personalizado de Google en tu web

Una de las funciones de Google Maps es poder insertar un mapa personalizado en tu sitio web, blog o un CMS, con lugares, itinerarios y/o zonas diferentes por medio de un código HTML. En este artículo, te explicamos paso a paso cómo insertar un mapa personalizado de Google Maps en tu sitio web.

¿Cómo crear tu mapa de Google?

Para crear un mapa de Google con información específica, necesitas una cuenta Gmail. Tras iniciar sesión, sigue estos pasos:

1. Abre Google Maps haciendo clic en el enlace o introduce la URL google.com/maps en la barra de direcciones de tu navegador web.
2. Enseguida, verás tu foto de perfil en la esquina superior derecha de la pantalla. Entonces, haz clic en el botón de tres líneas horizontales en el menú lateral izquierdo.

   

3. Selecciona Tus lugares o Tus sitios en el menú que se despliega.

   

4. Luego, abre la pestaña Mapas y pulsa en Crear mapa:

   

5. Para personalizar el nuevo mapa que aparece, comienza por la información básica haciendo clic en Mapa sin nombre.

   

6. Escribe un título para tu mapa personalizado de Google y agrega una descripción en el segundo campo de texto. Luego, haz clic en Guardar.

   

¿Cómo personalizar tu mapa de Google Maps?

Un mapa personalizado en tu sitio web puede cumplir varios objetivos, como indicar lugares (oficinas, establecimientos o locales comerciales y sus horarios de atención), proponer un itinerario o ruta a los visitantes de tu página web o indicar áreas específicas. Para personalizarlo a tu medida, procede así:

Añadir marcadores

Puedes sugerir un lugar o una dirección al agregar un indicador o marcador, lo cual se puede realizar de las siguientes formas:

• Si tu empresa o sus locales comerciales tienen una dirección registrada en Google Maps, mediante Google My Business, puedes vincularla a tu mapa. Solo ingresa el nombre del lugar en la barra de búsqueda, selecciónalo en las opciones que se despliegan y, en el recuadro que aparece, haz clic en Agregar al mapa. Su marcador aparecerá en verde.

Nota: las direcciones registradas en Google Maps mediante Google My Business permiten añadir automáticamente los datos del lugar, como la geolocalización, opiniones, itinerarios, fotos y horarios.

• Importar una lista de direcciones. Para esto, haz clic en Importar y arrastra o selecciona un archivo en formato CSV, XLSX, KML o GPX.

• Seleccionar un punto en el mapa. Si conoces el lugar exacto en el mapa, simplemente pulsa en el ícono de Agregar marcador y haz clic en el punto del mapa en que se ubica el lugar que deseas señalar. Ingresar la información en la descripción, como un correo electrónico, un teléfono, los horarios de atención y pulsa en Guardar.

• Para editar o personalizar cada marcador, cambiar su color, el ícono y agregar fotos del lugar:

1. Haz clic en un marcador y selecciona el botón estilo (en forma de bote de pintura).

2. Elige el color de tu preferencia y alguno de los iconos en el recuadro o pulsa en Más íconos para ver otras opciones. Google Maps propone una serie de pictogramas, particularmente útiles para indicar puntos de interés de los internautas (restaurantes, distribuidores, estaciones, etc.). También, podrás importar un ícono propio al hacer clic en la opción Icono Personalizar y seleccionando una imagen de tu ordenador, internet o Google Drive.

3. Enseguida, haz clic en el ícono de la cámara y añade fotos y/o videos, ya sea desde el disco de tu computadora, internet, Google Drive, imágenes de Google, YouTube, etc. Así, al hacer clic sobre el marcador, la gente verá la imagen además de la información que hayas ingresado acerca del lugar. De esta forma, podrás personalizar cada uno de tus marcadores.

Agregar capas

Organizar los lugares en capas te puede facilitar agruparlos por tipo. Puede ser muy útil, por ejemplo, si quieres señalar locales comerciales en una capa y puntos de fábrica en otra.

1. Solo añade un título a la capa actual, haciendo clic en Capa sin título; luego, introduce el nombre que desees y pulsa en Guardar.

2. Crea una nueva capa haciendo clic en Agregar capa y cámbiale el nombre.

3. Arrastra los lugares entre una capa y otra como gustes. Puedes crear tantas capas y marcadores como desees.

Indicar una ruta o itinerario

1. Haz clic en el marcador del lugar de destino o punto de llegada y selecciona el ícono Muestra indicaciones para llegar aquí junto al botón en forma de bote de basura:

   

2. Enseguida, aparecerá una nueva capa de Indicaciones en la cual puedes seleccionar un medio de transporte. En el punto A, ingresa el punto de partida. Si es otro marcador, solo haz clic sobre el mismo o escribe una dirección.

   

3. La capa con la nueva ruta también será añadida al mapa registrado. Puedes crear itinerarios para diferentes tipos de rutas: en coche, a pie, en transportes públicos, en bicicleta, en metro y en avión.

Agregar una zona

1. Si necesitas señalar un área del mapa pulsa en el botón Trazar una línea debajo de la barra de búsqueda:

   

2. Haz clic en la zona del mapa que deseas mostrar. Cada clic es una arista o punto del área (polígono). Asegúrate de conectar la última línea con el punto inicial.

   

3. Escribe un nombre y una descripción para el área señalada. Esta se agregará a tu primera capa. Puedes organizarla en la que prefieras. Puedes cambiar su color de la misma forma que se realiza con los marcadores, pulsando el ícono de estilo, eligiendo un color, un nivel de transparencia y el ancho del borde.

   

¿Cómo insertar el mapa de Google en tu página web?

1. Para incluir tu mapa personalizado de Google maps en tu página web, pulsa el botón de los tres puntos en el panel izquierdo y selecciona Insertar en mi sitio:

   

2. Enseguida, obtendrás el código HTML del mapa, que podrás copiar y usar en un sitio web, en un CMS (sistema de gestión de contenido) o un blog. Es posible modificar las dimensiones del mapa para adaptarlas a tu web.
3. Solo modifica los números junto a width y height, que se refieren a las medidas de ancho y alto respectivamente.

   

4. Cuando modificas la información del mapa registrado en Google Maps, los cambios se reflejan en la versión de tu sitio web. Verifica la visualización del mapa una vez insertado, particularmente en dispositivos móviles.