Poner un mapa en tu sitio web es una buena idea para orientar correctamente a tus visitantes o clientes y que sepan exactamente dónde estás. Vamos a ver en el siguiente artículo la mejor manera de crear e insertar un mapa personalizado de Google paso a paso.

Índice de contenidos

• Mapas de Google
• Compartir un mapa genérico no personalizado
• Cómo crear tu propio mapa personalizado
• Hacer un mapa básico con Google my Maps (paso a paso)
• Cómo insertar el mapa en tu página web
• Resultado: Mapa insertado de «mi oficina»
• ¿Qué más puedo hacer?

Los mapas de Google

El servicio de mapas de Google o Google Maps lleva tiempo desarrollándose y se ha convertido con el tiempo en una herramienta muy poderosa. En un primer momento podemos pensar que se trata de un simple servicio cartográfico pero tiene muchas más utilidades y servicios asociados de los que puedas imaginar.

Compartir un mapa genérico no personalizado

Cualquiera puede compartir un mapa o una ubicación siguiendo los pasos correctos que explicamos a continuación. De todas formas nuestra recomendación para tu sitio web es compartir un mapa personalizado, creado expresamente para insertar en tu web.

Las instrucciones que encontrarás a continuación permiten compartir un mapa genérico.  Sigue leyendo más abajo para saber más de los mapas personalizados, cómo crearlos y compartirlos.

Insertar mapas no personalizados o indicaciones

Procedimiento paso a paso para insertar un mapa.

1. Abrir Google Maps.
2. Acceder a las indicaciones, al mapa o a la imagen de Street View que quieras insertar.
3. En la parte superior izquierda, haz clic en menú de las tres rayas horizontales.
4. Haz clic en Compartir o insertar el mapa.
5. Haz clic en Insertar un mapa.
6. A la izquierda del cuadro de texto, haz clic en el icono de la flecha hacia abajo para elegir el tamaño que desees, pequeño, mediano, grande o un tamaño de mapa personalizado.
7. Copia el texto (todo el código) en el cuadro y pégalo en el HTML de tu sitio web o blog.

Cómo crear tu propio mapa personalizado

Es mucho mejor compartir un mapa personalizado que uno genérico, pues podremos añadir detalles que nos interesan y en definitiva hacerlo a nuestra medida.

Para hacer un mapa propio en primer lugar tenemos que disponer de una cuenta en Google. Por ejemplo si tenemos una cuenta de correo de Gmail ya será suficiente. Entramos en Google Drive y hacemos clic en el símbolo más «+» que acompaña a la leyenda «Nuevo».

Se nos muestran en primera instancia las opciones de Documentos de Google, Hojas de cálculo de Google y Presentaciones de Google. La cuarta opción del menú, en la que pone «más» nos permite acceder al ítem del menú que buscamos y en el que haremos clic. Se trata de «Google my Maps».

En Google my Maps lo tenemos todo listo para preparar un mapa con un título y descripción, y diferentes capas por si deseamos ir añadiendo elementos. Cada punto agregado al mapa se puede personalizar, tanto su apariencia como las explicaciones asociadas a él.

Y el fondo del mapa también es susceptible de ser modificado. Hay hasta 9 opciones de lo que se denomina mapa base.

Hacer un mapa básico con Google my Maps

Imaginemos que tenemos un negocio físico y queremos incluir un mapa para los visitantes de nuestra web. Sin demasiados complicaciones podemos armar un mapa básico en el que geolocalizamos la dirección deseada y añadimos algunas características simples. Por ejemplo.

• Título y descripción del mapa
• Punto en el mapa que indica la localización exacta o marcador
• Explicaciones asociadas la marcador. Puede ser texto, fotografías y links.

Con estos tres elementos básicos podemos completar un sencillo mapa que vamos a compartir en nuestro sitio web. Por ejemplo en nuestra página corporativa realizada con WordPress o en un blog.

Veamos la forma de hacerlo paso a paso (desde el ordenador)

1 – Nuevo documento mapa de Google my Maps

Desde Google Drive hacemos un nuevo fichero de Google my Maps. Se nos presenta un fondo con un mapa dado y arriba a la izquierda con un un recuadro con los datos que podremos ir rellenando y completando en función del mapa que queramos realizar.

2 – Editar el nombre del mapa y su descripción

Para editar el título y la descripción hacemos clic en la leyenda «Mapa personalizado». Nos aparece una ventana emergente sobre el mapa en el que podemos introducir texto.

3 – Editar título y descripción

En el título y en la descripción puedes añadir más cosas que únicamente texto puro. Vale la pena a lo mejor insertar un icono, añadir la url de tu sitio web o una frase que invite a realizar una acción.

4 – Cambiar el nombre de la capa que aparece por defecto

Cambiamos el nombre de la capa «Capa sin nombre» por la leyenda que te sea más conveniente. Por ejemplo oficina, sedes de la empresa, dónde estamos, nuestra localización o lo que te apetezca mejor. Basta hacer clic en «Capa sin nombre» y se despliega una ventana emergente para introducir el texto.

5 – Introducir un marcador con una dirección determinada

Una vez ya tenemos el nombre, descripción y una capa preparada vamos a añadir un marcador en el mapa. Hay varias formas de hacerlo. Mi recomendación es que utilices el buscador interno de Google Maps.

Introducimos allí la dirección que nos interesa, pulsamos en el icono de la lupa y automáticamente nos va a aparecer sobre el mapa un marcador que coincide con la localización introducida. Encima del marcador vemos un recuadro blanco con los datos que Google tiene asociados al sitio.

Éste es un marcador que podemos tachar de provisional. Para que forme parte de nuestro mapa debemos hacer click en el texto gris que reza «+ Añadir al mapa«.

6 – Modificar los datos del marcador

Ya tenemos la dirección en el mapa pero la gracia está en personalizar y adecuar la información que aparece. Una vez introducido el punto deseado en el mapa y colocado en su capa correspondiente lo interesante es editar el contenido que se va a mostrar y no quedarnos con los datos que Google ofrece de primeras.

Para aplicar modificaciones tenemos unos iconos en la base del cuadro de información para cambiar el color, editar los textos, añadir fotos, información sobre cómo llegar hasta el punto y un icono de papelera para suprimir el elemento.

Nosotros vamos a cambiar el texto descriptivo y añadir una foto de mi supuesta oficina en Barcelona. (No, mi despacho no está en Paseo de Gracia / Avenida Diagonal 😂)

7 – Cambiar la descripción y añadir una imagen a un marcador

Haciendo click en el icono del lápiz introducimos los nuevos textos en la cajita del marcador. Puedes escribir lo que quieras, teniendo en cuenta eso sí, que hay poco espacio y el texto podría quedar cortado.

Si lo deseas puedes añadir una foto. Para ello hacemos click en el icono de la cámara de fotos. Se nos presenta una ventana en la que elegir el sitio desde el que vamos a cargar la imagen. Una de las opciones (y aparece por defecto seleccionada en primera instancia) es subir la foto desde nuestro ordenador.

Si hacemos click en «Seleccionar un archivo de tu dispositivo» podremos indicar qué foto utilizar navegando entre las carpetas de nuestro ordenador.

Otro elemento que podemos modificar a nuestro antojo es el icono asociado al marcador y el color del mismo. Para ello es necesario hacer click encima del icono de bote de pintura.

En plan un poco más avanzado, es posible tener varias capas en un mapa y asociar un tipo de icono y un color a los marcadores que contienen.

8 – Elegir un mapa base para todo el conjunto

Por último pero no por ello menos importante podemos editar el fondo cartográfico sobre el que trabajamos. Es lo que en Google My Maps llaman Mapa base. Hay hasta nueve opciones posibles para elegir en función de tus necesidades.

Los 9 tipos de Mapa base son los siguientes:

1. Mapa
2. Satélite
3. Relieve
4. Político claro
5. Monocromático con ciudades
6. Atlas sencillo
7. Masa terrestre clara
8. Físico oscuro
9. Rápidos

El nombre quizás no es del todo intuitivo; es más práctico hacer pruebas en directo y ver cuál te gusta más. Ten en cuenta que según la escala o los accidentes geográficos que abarque tu mapa, si los marcadores están en una ciudad o en medio de la naturaleza quedará mejor un mapa base que otro.

Insertar el mapa en tu página web

Una vez tenemos un mapa personalizado totalmente finalizado llega el momento de compartirlo en la página web. Es muy sencillo.

En la parte superior derecha del recuadro con las informaciones del mapa se encuentra el menú para realizar la operación de insertar. Hay que hacer click en los tres puntos verticales y seleccionar la opción de «Insertar en mi sitio web» del menú desplegable.

A continuación se nos muestra una ventana emergente que contiene el código que deberemos introducir en nuestra página.

Dicho código lo tenemos que copiar y pegar en la página que convenga, pero en formato de código, no igual que si fuera un texto.

Si se observa con detalle el código se detecta la palabra width acompañada de un valor numérico. Un pequeño truco para conseguir que el ancho del mapa encaje bien en tu sitio web es cambiar el valor de width por otro número.

<iframe src=»https://www.google.com/maps/d/embed?mid=1To7TcoRq1eHH-BI57Y1qFp59lx49MY9V» width=»640″ height=»480″></iframe>

Una vez completada esta operación el último paso sería publicar la página y comprobar que todo funciona a la perfección desde un navegador y desde tu teléfono móvil.

📍Mapa insertado de mi oficina

Unas líneas más abajo tienes el resultado final. Un mapa insertado de «mi oficina» en uno de los lugares más singulares de la capital catalana, la confluencia entre el Paseo de Gracia y la Avenida Diagonal.

¿Qué más puedo hacer?

Usar un mapa personalizado en tu web permite disfrutar de dos características interesantes que no hemos mencionado hasta ahora.

• Ver las veces que se ha consultado el mapa. El propio archivo lleva el recuento de visualizaciones. Haz click en la esquina superior izquierda del mapa y debajo de la descripción aparecerá el número de vistas del mapa. Ten en cuenta que el número es una información pública, cualquiera que consulte el mapa lo va a poder ver.
• Hacer las modificaciones que sean convenientes sin necesidad de volver a insertar el mapa. El nuevo contenido o marcadores se actualizarán automáticamente. Esto hace muy fácil añadir más puntos, fotos o lo que sea. Bastará abrir el mapa desde tu cuenta de Google Drive, realizar los cambios oportunos y salir.