Cómo agregar mapas interactivos a su sitio web de WordPress

Es cierto que los mapas en línea son bastante sencillos. Si utiliza un servicio como Google Maps , simplemente elija una ubicación e incruste el mapa en su sitio web. Sin embargo, no puede editar mapas normales sobre la marcha, ni tampoco sus compañeros de trabajo, lo que a menudo es necesario para proyectos colaborativos.

Ahí es donde entran los mapas interactivos. Le permiten colocar marcadores móviles que todos en su equipo pueden editar. En este artículo, hablaremos sobre cuándo es útil este tipo de mapa. Además, te enseñaremos dos formas de agregarlos a WordPress.

¡Pongámonos a trabajar!

Qué son los mapas interactivos (y cuándo usarlos)

Agregar un mapa a un sitio web es bastante simple. Herramientas como Google Maps o el módulo de mapas  de Divi  le permiten incrustar mapas en sus páginas en cuestión de minutos. La ventaja de este enfoque es que los visitantes pueden moverse por los mapas, acercar y alejar, y más. Estos tipos de mapas son más interactivos que las imágenes simples, pero no le permiten realizar cambios una vez que los haya agregado a su sitio web.

Los mapas interactivos, por otro lado, le permiten a usted (y en algunos casos a sus compañeros de trabajo) agregarles nuevos marcadores, íconos, texto y más. Imagina, por ejemplo, que estás planeando una reunión para los miembros de tu sitio web. Puede configurar un mapa con varios pines para sugerir ubicaciones.

También puede usar un mapa interactivo para que sus usuarios compartan sus ubicaciones o señalen entre sí los lugares que les gustaría visitar. Para ser justos, estas son aplicaciones bastante específicas. Sin embargo, los mapas interactivos pueden  resultar útiles en una amplia variedad de situaciones. Además, no son necesariamente más difíciles de agregar que sus contrapartes regulares.

Cómo agregar mapas interactivos a su sitio web de WordPress (de 2 maneras)

Cuando se trata de mapas interactivos, puede insertar uno en su sitio web o usar un complemento para ayudarlo a hacerlo. El primer enfoque es más simple, pero los complementos a menudo incluyen muchas más funciones, como era de esperar. Repasemos primero el enfoque del complemento para mostrar cuáles son esas características. Veremos el uso de Maps Marker Pro, pero hay varias otras opciones excelentes de complementos de mapas interactivos para elegir.

1. Use el complemento Maps Marker Pro

El complemento Maps Marker Pro es una solución premium integral para incluir mapas en WordPress. Incluye docenas de funciones avanzadas, como permitirle extraer mapas de múltiples servicios y agregar una cantidad prácticamente ilimitada de marcadores a sus mapas y clasificarlos. Además, los visitantes pueden filtrar los tipos de marcadores que desean ver en sus mapas.

Otras cosas divertidas que puede hacer con el complemento incluyen agregar información de distancia y ruta entre marcadores. Incluso puede compartir su propia ubicación en tiempo real a través del mapa de su sitio web si está dispuesto a hacerlo. La configuración del complemento puede llevar un poco de tiempo, considerando la gran cantidad de funciones que ofrece. Sin embargo, no es tan difícil como te imaginas.

Para comenzar, configure y active el complemento como lo haría con cualquier otro. Una vez que el complemento esté listo para funcionar, deberá agregar un nuevo mapa o ‘capa’, lo que puede hacer desde Maps  Marker Pro> Agregar nueva  pestaña de capa. Aquí, establezca un nombre que pueda reconocer para su capa e ingrese la ubicación que desea que se muestre, tal como lo haría con cualquier otra herramienta de mapas en línea:

Ahora, puede ajustar el tamaño y el nivel de zoom que desea establecer de forma predeterminada, utilizando el menú de la izquierda. También hay una opción llamada Agrupación de marcadores , que mostrará un ícono con la cantidad de marcadores en un área si se aleja demasiado, como en el ejemplo a continuación:

La  opción Mostrar lista de marcadores debajo del mapa  , por otro lado, se explica por sí misma. Puede ser útil si desea incluir información adicional para sus marcadores:

Ahora desplácese hacia abajo y busque la opción que dice  Agregar nuevo marcador a esta capa . En la siguiente pantalla, podrás establecer un nombre y una ubicación para tu marcador, utilizando el mismo mapa que en la anterior.

También puede elegir un icono y establecer un texto emergente para su marcador. Esto aparecerá cuando las personas hagan clic en el marcador o lo seleccionen de una lista si elige incluirlo. En cualquier caso, recuerda pulsar el  botón Publicar  cuando hayas terminado. Después de agregar algunos marcadores, su capa inicial debería verse así:

Cuando esté listo para agregar su nuevo mapa interactivo a una de sus páginas, deberá usar un código abreviado. Desplácese hacia atrás hasta la parte superior de la  pestaña Editar capa  y busque su ID correspondiente:

Ahora, coloca el shortcode [mapsmarker layer=”X”] en la publicación o página deseada. Sin embargo , recuerde reemplazar el  marcador de posición con la ID de su capa de antemano.

Su mapa debería estar ahora en funcionamiento en su sitio web. Más importante aún, usted o cualquier otra persona de su equipo puede editarlo y agregar nuevos marcadores en cualquier momento, sin salir de su tablero.

2. A través de la función de inserción integrada de Google Map

Google Maps apenas necesita presentación: es un servicio que le permite extraer mapas de todo el mundo para que pueda compartir ubicaciones con otras personas, encontrar direcciones e incluso compartir dónde se encuentra. Cuando se trata de sitios web, puede incrustar Google Maps en sus páginas de muchas maneras. Sin embargo, la mayoría de los mapas ofrecen cantidades limitadas de interactividad. Le permiten navegar a través de ellos, acercar, alejar y cambiar su vista, pero no mucho más.

La cuestión es que Google Maps ofrece muchas más funciones que un simple mapeo. Por ejemplo, también puede agregar múltiples marcadores, medir distancias e incluir direcciones en sus mapas, similar a Maps Marker Pro. Para probar estas funciones, vaya a Google My Maps y haga clic en el  botón Crear un nuevo mapa  :

En la siguiente pantalla, establezca un título para su mapa y su primera capa, que es sobre la que construiremos. Ahora busque la ubicación que desea compartir usando la barra de búsqueda de Google Map en la parte superior de la pantalla:

Cuando esté acercado, puede usar el símbolo de marcador en la parte superior de la pantalla para comenzar a resaltar ubicaciones en su mapa. Simplemente haga clic donde desea colocar su marcador, luego establezca un nombre y un icono para él:

Una vez que haya colocado varios marcadores, puede trazar líneas entre ellos para mostrar las distancias:

Cuando su mapa esté listo, vaya al  botón Compartir  en el menú de la izquierda. Allí, cambie la configuración en  Quién tiene acceso  de  Privado Público :

También puede invitar a miembros individuales del equipo usando sus correos electrónicos, para que obtengan acceso inmediato para editar el mapa:

En cualquier caso, todavía tiene que incrustar su nuevo mapa en su sitio web. Puede hacerlo haciendo clic en el ícono de tres puntos junto al título de su mapa y haciendo clic en la  opción Incrustar en mi sitio  :

Ahora, puede copiar y pegar el código de inserción en cualquiera de sus páginas usando el  módulo de código  de Divi , por ejemplo. Tu nuevo mapa aparecerá donde lo coloques. Además, sus compañeros de equipo podrán editarlo y agregar nuevos marcadores a través de Google Maps según sea necesario.

Para miembros de Elegant Themes

Si todo lo que necesita es un mapa simple y algunos marcadores, también puede usar el módulo Mapa de Divi  para agregar uno a su sitio web. Hablemos de cómo hacerlo.

Cómo agregar un mapa a su sitio web de WordPress usando el módulo Divi Map

Antes de comenzar a trabajar, deberá crear una clave API de Google, que Divi necesita para impulsar el mapa que utiliza su módulo. Siga este tutorial para obtener su clave API y, una vez que la tenga, abra Divi Builder en la página deseada. A continuación, agregue un  módulo de mapa y abra su configuración. Verá un botón que dice  AGREGAR SU CLAVE API  cerca de la parte superior de la pantalla:

Al hacer clic en esto, se lo enviará a la  página de configuración  de Divi , donde puede agregar su clave API de Google:

Divi. ancho=”880″ alto=”163″ />

Guarde su clave y regrese al Divi Builder. Si vuelve a abrir la  ventana de configuración del módulo Mapa  , verá que ahora puede elegir una  Dirección del centro del mapa , que es la ubicación que mostrará su mapa:

Busque la dirección que desea mostrar y desplácese hacia atrás hasta donde dice  Agregar nuevo PIN . Al hacer clic en este botón, podrá establecer un título, una descripción y la ubicación del primer pin de su mapa:

Tenga en cuenta que  el módulo Mapa  de Divi le permite agregar varios pines. Esto lo convierte en una opción válida si desea resaltar varias direcciones. Además, puede modificar el estilo de su pin yendo a la  configuración de Diseño  y jugando con las opciones. Aquí hay un ejemplo de un mapa terminado creado con el módulo Divi  Map  :

Si bien es cierto que Google Maps y Maps Marker Pro ofrecen más configuraciones de personalización, Divi brilla cuando se trata de facilidad de uso. Además, no necesitará usar códigos cortos o códigos incrustados para colocar sus mapas. Después de todo, el constructor te da control total sobre dónde deben ir.

Conclusión

Agregar mapas a su sitio web de WordPress es simple, especialmente si está usando Divi, gracias a su  módulo Map  . Sin embargo, los mapas regulares solo son útiles si desea mostrar una sola dirección. Si necesita un poco más de flexibilidad, los mapas interactivos son el camino a seguir.

Con WordPress, tiene dos formas de agregar mapas interactivos a su sitio web. Recapitulemos:

  1. Usando el complemento Maps Marker Pro .
  2. A través de  la función de inserción integrada de Google Map .

¿Tiene alguna pregunta sobre cuándo usar mapas interactivos en su sitio web de WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!

Miniatura de la imagen del artículo de Hluboki Dzianis / shutterstock.com.