Cómo crear un mapa interactivo en WordPress

Aunque la presencia digital se ha convertido en una necesidad para la mayoría de las empresas, no hace falta decir que un mapa de su ubicación física sigue siendo más que útil. Para aprovecharlo al máximo, incluso puede diseñar su mapa de Google para que se ajuste al diseño general de su sitio web. Sin embargo, con un mapa interactivo, va un paso más allá: permite a sus usuarios más libertad para descubrir sus propias formas de comunicarse con usted y planificar sus viajes a su conveniencia. Sin mencionar que la interacción hace que la experiencia del usuario sea más satisfactoria, atrayendo a sus visitantes para sesiones de usuario más largas. En este artículo, le mostraremos dos formas de agregar un mapa interactivo a su sitio web de WordPress: usando Google My Maps y usando un complemento especializado.

Cómo agregar un mapa interactivo en WordPress usando Google My Maps

La forma más sencilla de instalar un mapa interactivo es utilizando el servicio My Maps de Google. Lo primero que debes hacer es ir a Google My Maps y haga clic en el + Crear un mapa nuevo.

Esto lo llevará al editor de mapas. Usando el menú en la parte superior, puede agregar rutas, marcadores, líneas, direcciones y medir distancias. Cada mapa puede tener hasta 10,000 líneas, formas o lugares. La sección principal de la izquierda le permite agregar capas (con hasta 2000 líneas, formas o lugares por capa), elija una Mapa base modo entre nueve opciones y, finalmente, nombre su mapa.

Nombraremos nuestro mapa «Cómo llegar a nosotros» y agregaremos una breve descripción, después de lo cual guardaremos nuestros cambios.

A continuación, pegaremos un alfiler para marcar nuestra ubicación. Lo llamaremos «Nuestra ubicación» y agregaremos una breve descripción. Puede usar el menú para cambiar el estilo del pin, como tenemos, a una estrella, o el color, que no hicimos. También puede agregar imágenes o videos a su ubicación.

A continuación, dibujaremos algunas líneas desde la parada de autobús local y la estación de tren, solo para mostrar cómo llegar desde las paradas de transporte público más cercanas, usando negro para el tren y rojo para la parada de autobús.

Finalmente, necesitamos incrustarlo en nuestro sitio web. Para eso, primero debemos hacer público nuestro mapa. Ingresando al menú de compartir desde el panel de comando principal, configuraremos el control de acceso desde Restringido a Cualquiera con el link. Esto hace que el mapa sea público.

A continuación, debe acceder al código de inserción desde el panel de edición principal. Clickea en el tres puntos junto al nombre de su mapa, seleccione Insertar en mi sitio weby copie el HTML que obtenga.

Para insertarlo en su sitio web, si está utilizando Gutenberg, acceda a la página a la que desea agregar el mapa (o cree uno nuevo), simplemente haga clic en el + firmar para agregar un bloque, luego seleccione el HTML personalizado block y pegue el código en el campo del bloque.

Si esta trabajando con Elementor, necesitas arrastrar el HTML personalizado widget y luego pegue el código en su campo. Si está utilizando el Creador de páginas de WPBakery, necesitas usar el HTML sin procesar elemento y proporcione el código que pegó. Para el Clásico editor, simplemente asegúrese de que su editor esté configurado en el Texto pestaña y simplemente pegue el código donde lo desee.

Y su mapa está listo, tal como lo ha configurado.

Cómo agregar un mapa interactivo en WordPress usando un complemento

También puede utilizar un complemento para crear un mapa interactivo. Hay muchos complementos de WordPress con esta o una funcionalidad similar, muchos de los cuales hemos discutido en nuestro artículo sobre los mejores complementos de Google Maps. Para esta demostración, usaremos WP Google Maps, pero puede elegir el que desee. Una vez que haya instalado y activado el complemento, busque la configuración del complemento en su lista de Complementos instalados y encuentra el Editor de mapas para crear un mapa.

Una vez allí, encontrará el mapa único editable que le permite el complemento. Necesitaras Editar eso.

Puedes cambiar el Nombre del mapa, como tenemos, a donde estamos. También moveremos el Nivel del zoom controle un poco hacia la derecha, acercándose para que nuestro mapa sea útil para las personas que buscan direcciones. No usaremos el resto de las opciones para los propósitos de esta demostración, pero llamaremos su atención sobre el Ancho control. Si desea que su mapa responda, debe dejarlo en 100%.

A continuación, nos desplazaremos hacia abajo hasta la sección Sus marcadores y eliminaremos el marcador predeterminado. Puede hacerlo seleccionándolo en el menú y haciendo clic en el icono del cubo de basura. Luego, configuraremos nuestro propio marcador centrado en Bridge Street en Saint Matthews, Carolina del Sur, buscando la ubicación y haciendo clic con el botón derecho en el mapa. Finalmente, lo haremos Ahorrar ambos nuestros Marcador y nuestro Mapa, en ese orden.

Desplazándose hacia atrás hasta el Crea tu mapa sección de nuevo, encontrará el código corto para su mapa en el Configuración general pestaña. Haga clic para copiarlo en su portapapeles y usarlo en una publicación.

Una vez que tenga su código corto listo para pegar, abra una publicación o página en la que desea incrustar su mapa. Te mostraremos cómo hacerlo en una publicación, usando Gutenberg. Primero, haga clic en el + firme para agregar un bloque de código corto y luego pegue el código corto de su mapa en el campo del bloque.

Y su mapa aparecerá en su publicación, según lo configurado.

Tenga en cuenta que el complemento WP Google Maps tiene una multitud de opciones que apenas hemos mencionado en esta demostración, que le recomendamos que explore para personalizar completamente su mapa de acuerdo con sus necesidades. Lo mismo, e incluso más, ocurre con la versión Pro.

En conclusión

Si desea que sus visitantes sepan dónde se encuentra en el mundo físico, puede hacerlo fácilmente agregando un mapa interactivo a su sitio web utilizando cualquiera de los métodos que hemos demostrado. Un mapa interactivo les permitirá desplazarse y hacer zoom para encontrar la mejor ruta para llegar a usted, pero con solo unos pocos clics, puede hacerlo aún más fácil apuntándolos en la dirección correcta. Si tiene algún tipo de ubicación física, ¿por qué no hacer que sea muy fácil para sus visitantes encontrarla?