Como Insertar y Personalizar Mapas en WordPress

Insertar un mapa en una web es algo que esta a la orden del día. Como ya vimos en nuestro artículo sobre páginas imprescindibles para una web o blog, es muy usual que en la página de contacto añadamos un mapa con la localización de nuestro negocio. Le damos una información extra a nuestros visitantes, además de que será mucho más sencillo que puedan localizarnos. Por desgracia, también es muy normal ver como muchas personas no insertan de forma correcta un mapa, o que no lo hacen por que no saben exactamente cuales son los pasos a seguir para añadirlos a su web. Para todos ellos, hemos querido hacer este artículo.

Pero también hemos querido dar un pasito más, y no conformarnos con el típico mapa de Google Maps. Para ello, haremos uso de una herramienta mediante la cual podemos añadir marcadores y rutas a un plano, que más tarde añadiremos a nuestro WordPress. ¿Quieres mostrar a tus usuarios el itinerario que hiciste en tu último viaje? ¿O quizás mostrarle a tus cliente como llegar a tu negocio desde diferentes puntos de la ciudad? Pues entonces sigue leyendo, porque seguro que nuestro artículo va a interesarte.

Inserta Google Maps en WordPress

Antes que nada, deberemos ir a Google Maps, y elegir el lugar que queremos que se vaya a mostrar en nuestra web. Podemos hacerlo de varias formas. Una es tan sencilla como poner en el buscador de Google Maps la calle donde queremos ir. Otra es buscándola directamente en el mapa, eligiendo el zoom concreto con el que queramos que se vea dentro de nuestra página.

Una vez tengamos decidido el lugar, nos iremos a la opción Compartir o insertar mapa, dentro del menú hamburguesa que hay junto al buscador de Maps. Aparecerá una ventana emergente con dos opciones, donde elegiremos Insertar un mapa.

El iframe que nos da Google Maps es el que tendremos que copiar en nuestro WordPress. Pero antes, hay que tener en cuenta cual va a ser el tamaño que queramos que tenga en nuestra web. Para esta elección, hay tres opciones de tamaño, y una última opción en la que podemos elegir una resolución personalizada. Ideal para ajustarla dentro de la maquetación de nuestro sitio.

Pero, ¿que pasa si en el futuro quiero que tenga un tamaño diferente? ¿Hay que volver a repetir todo este proceso? En absoluto. Si echamos un vistazo al código de iframe, veremos que hay dos estilo que podemos modificar: width (ancho) y height (alto). Cambiando estas dos variables, podemos personalizar cuando queramos el tamaño del iframe, aunque hayamos cerrado ya la web de Google Maps.

Ya tenemos copiado el iframe con nuestro mapa. Veamos como insertarlo en WordPress, tanto si trabajamos con Gutenberg, como si aun usamos el editor clásico.

Con el Editor Clásico de WordPress

Si tenemos una versión antigua de WordPress, o algún plugin instalado para poder seguir usando el editor clásico, la inserción del iframe es muy sencilla. Solo tendremos que elegir el modo HTML, y pega ahí nuestro iframe. Guardamos nuestra entrada o página, y ya tendrá insertado el mapa. Rápido y sencillo.

Con Gutenberg

Con Gutenberg, la inserción del iframe también es sencilla. Solo hay que saber cual es el bloque correcto donde pegar el trozo de código. En este caso, el bloque indicado es HTML personalizado. Dentro de este bloque, pegaremos nuestro iframe y listo. Ya lo tendremos en nuestra página.

Crea un Mapa personalizado con Google My Maps

Después de ver todo esto, quizás algunos penséis que lo de insertar el mapa esté bien, pero puede quedarse algo corto según las necesidades que tengamos. Y es que con Google Maps no es posible añadir marcadores o puntos de interés propios, añadir rutas personalizas, o cambiar el estilo visual del mapa.

Para todas estas cosas haremos uso de Google MyMaps. Con Google MyMaps, haciendo uso de Maps, podemos añadir nueva info a un mapa. Lo bueno que tiene esta herramienta es que nos da la posibilidad de crear diferentes mapas, abriéndonos un abanico de posibilidades.

Si ya estamos dentro de la web de MyMaps, lo primero que hay que hacer es crear un nuevo mapa. Es muy importante que designemos un nombre a este mapa. Ya no solo para mantener cierto orden, sino porque este nombre se mostrará en nuestra web cuando lo insertemos. Una vez hecho todo esto, veamos que tipo de información nos deja superponer.

MyMaps se organiza por capas, hasta un máximo de diez. En cada una de ellas podemos agregar marcadores, lineas o rutas. Es muy importante saber colocar cada elemento en su capa correcta, ya que los visitantes de nuestra web tendrán la posibilidad de activar o desactivar capas, haciendo del mapa una herramienta mucho más interactiva.

Posiciona puntos de interés

Lo más básico es crear un marcador con un punto de interés. ¿Para que nos sirve esto? Pues desde mostrar nuestra empresa si no aparece en Maps, mostrar diversos puntos de interés que queremos mostrar a los visitantes de nuestra web, y muchas otras. Para insertar este marcador, usaremos su icono correspondiente situado bajo la barra de búsqueda. Lo colocaremos en el mapa, y vamos como se amplían las posibilidades.

Lo primero es darle a este punto de interés un título y una descripción, para que nuestros visitante sepan que les estamos enseñando. A partir de aquí, podemos cambiar el típico icono del marcador por otro de los que nos ofrece MyMaps, o incluso subir nuestro propio icono personalizado a la web. También podremos cambiarle el color al icono que hayamos elegido.

Uno de los aspectos que más me ha gustado es que a este punto de interés se le puede asignar una imagen, o una galería de imágenes. Estás imágenes pueden ser de búsquedas en Google, o que subamos. Ideal si queremos crear un completo set de fotografías de nuestro negocio.

Establece rutas

Sobre las rutas, tenemos dos opciones, estando todas en la herramienta correspondiente bajo la barra de búsqueda. La primera es dibujando directamente líneas sobre el mapa, ideal para crear recorridos personalizados. A estas lineas, al igual que los marcadores, se les puede dar un titulo y su descripción, cambiar su color, su grosor, y añadir fotografías. Una forma original de enseñar los recorridos que hemos hecho durante nuestros viajes, adornados con fotografías que hayamos realizado.

La segunda opción es ayudarnos de las rutas que nos crea automáticamente Maps, ya sea a pie, en bicicleta o en coche. Lo bueno de esta herramienta es que solo habrá que designar un punto de inicio y otro de destino, ya que el camino entre esos dos lugares se calcula de forma autónoma. Pero este también es su déficit. Estamos a merced de la ruta que nos recomiende Google, sin poder modificarla. La única manera sería crear punto intermedios.

Cambia el estilo de tu mapa

Por último, MyMaps tambien nos da opción para cambiarle el aspecto al mapa base de Maps. Contamos hasta con nueve diseño diferentes elegir, ideal para los que quieren que su mapa se integre de manera perfecta dentro del estilo visual de su web. Os aconsejamos que miréis con detenimiento cada uno, ya que algunos ofrecen más información que otros. Por ejemplo, es aspecto Físico oscuro no muestra el nombre de las calles.

Comparte tus mapas

Antes de generar el iframe que pegaremos en nuestra web, hay que tener en cuenta un aspecto. Y es que debemos asignar el zoom correcto con el que queremos que se vea el mapa. Para ello, clicaremos en los tres puntos junto al título de nuestro mapa, y elegiremos la opción Establecer vista predeterminada. Con esto, guardaremos la vista actual que tengamos en nuestro navegador.

Una vez ya tengamos todo ello, vamos a por nuestro iframe. Vamos al mismo menú que hemos abierto antes para la vista predeterminada, pero en esta ocasión elegiremos Insertar en mi sitio web. No sería extraño que al elegir esta opción, nos salte un mensaje advirtiéndonos de que nuestro mapa es privado y, por lo tanto, no lo podrán ver otras personas. No nos alarmemos. Si nos vamos a la opción Compartir, cambiaremos los ajustes a Público. Volvemos de nuevo a Insertar en mi sitio web, y ya si que veremos nuestro iframe, listo para insertar en nuestra web. Este es el que hemos creado nosotros como ejemplo:

Como veis, dispone de un panel lateral con el que activar y desactivar capas, ademas de que tiene los mismos controles que el mapa predeterminado de Maps, y es completamente responsive. Incluso nos permite ver el mapa a pantalla completa, así no perderemos detalle.

Uno de los aspectos que mas nos han gustado de MyMaps es que es completamente actualizable sin tener que tener que generar un nuevo iframe. Si volvemos a la web de MyMaps, estará nuestro mapa guardado, al cual podemos añadir o eliminar nuevos puntos y rutas, o cambiar el mapa base. Al guardar, automáticamente se actualizará el mapa que hayamos insertado en nuestra web.

Como habéis podido ver, la inserción se un mapa de Google Maps en nuestro WordPress es muy sencillo. Y si queremos ir un paso más allá, herramientas como MyMaps nos permiten añadirle una capa extra de información a nuestros mapas, que seguro que agradecen nuestros usuarios. Además de tener diferentes estilos aparte de los que nos ofrece Maps por defecto.

¿Usáis de mapas en vuestra web para agregar más información sobre vosotros o vuestro negocio? Y si es así, ¿qué herramientas soléis usar para ello? Como siempre, podéis contestarnos en los comentarios, también para decirnos que os ha parecido MyMaps.