Cómo agregar un mapa interactivo en WordPress

Agregar un mapa a tu sitio de WordPress es importante cuando tienes un negocio con una ubicación física o creas contenido sobre lugares específicos.

Puede parecer complicado al principio, pero hemos encontrado algunas herramientas útiles que facilitan mucho el proceso. En este artículo, te mostraremos dos métodos sencillos para agregar un mapa interactivo a tu sitio de WordPress.

Te guiaremos paso a paso, desde la elección de la herramienta adecuada hasta la incrustación del mapa en tu página.

Cuándo agregar un mapa interactivo en WordPress

Si tienes un negocio físico, como una tienda o una cafetería, un mapa interactivo puede ayudar a los visitantes potenciales a encontrar tu ubicación. Esto puede atraer a más clientes, generar ventas e incluso citas y reservas presenciales.

También puede mejorar la experiencia del usuario, ya que los visitantes pueden planificar su viaje sin tener que usar una aplicación o sitio web de mapas por separado.

Dependiendo de tu sitio web, un mapa interactivo podría incluso proporcionar contenido útil. Por ejemplo, si tienes un blog de fitness, podrías mostrar rutas de carrera o caminatas recomendadas a tus lectores.

De manera similar, si tienes un blog familiar, podrías destacar todas las atracciones aptas para niños donde tu audiencia puede llevar a sus familias.

Dicho esto, veamos dos formas sencillas para principiantes de añadir un mapa interactivo en WordPress. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar:

• Método 1. Añadir un mapa mundial interactivo usando un constructor de páginas (Páginas personalizadas con mapas)
• Método 2. Crea mapas personalizados interactivos gratis usando Google My Maps

Método 1. Añadir un mapa mundial interactivo usando un constructor de páginas (Páginas personalizadas con mapas)

La forma más fácil de añadir un mapa interactivo simple en WordPress es usando Google Maps y el plugin SeedProd.

Este avanzado constructor de páginas te permite crear páginas diseñadas profesionalmente sin tener que escribir una sola línea de código.

También viene con un bloque de Google Maps listo para usar que puedes simplemente arrastrar y soltar en tu diseño. Los visitantes pueden interactuar con tu mapa usando los botones de zoom, o pueden arrastrar para explorar otras áreas.

SeedProd facilita el diseño de páginas independientes con un diseño único, por lo que esta es también una excelente opción si deseas añadir un mapa interactivo a una página de inicio personalizada o a una página de destino.

Lo primero que necesitas hacer es instalar y activar SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activarlo, necesitas ingresar una clave de licencia.

Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd. Después de agregar la clave de licencia, haz clic en ‘Verificar clave’.

Hecho esto, ve a SeedProd » Landing Pages y haz clic en ‘Agregar nueva landing page’.

SeedProd ahora te mostrará todas las plantillas que puedes usar para crear hermosas landing pages, páginas de ventas y más. Para ayudarte a encontrar la plantilla correcta para tu sitio web, las plantillas de SeedProd están divididas en categorías como modo de mantenimiento, próximo lanzamiento, webinar y más.

Para ver de cerca cualquier diseño, simplemente pasa el cursor del mouse sobre esa plantilla. Luego, haz clic en el ícono de la lupa.

Esto abrirá la plantilla en una nueva pestaña.

Cuando encuentres un diseño que quieras usar en tu sitio web de WordPress, simplemente haz clic en ‘Elegir esta plantilla’.

Ahora puedes escribir un nombre para tu página de destino en el campo ‘Nombre de la página’. Esto es solo para tu referencia, así que puedes usar lo que quieras.

SeedProd creará automáticamente una ‘URL de la página’ usando el nombre de la página, pero puedes cambiar esta URL generada automáticamente.

Cuando estés satisfecho con la información que has escrito, haz clic en ‘Guardar y empezar a editar la página’. Esto cargará la interfaz del constructor de páginas de SeedProd.

Este sencillo constructor de arrastrar y soltar muestra una vista previa en vivo de la página a la derecha. A la izquierda hay un menú que muestra los diferentes bloques y secciones que puedes agregar a tu blog de WordPress o sitio web.

SeedProd viene con más de 90 bloques listos para usar que pueden ayudarte a crear un diseño de página atractivo, rápidamente. Esto incluye bloques avanzados como temporizadores de cuenta regresiva e incrustaciones como un reproductor de audio de SoundCloud o videos de TikTok.

También puedes usar bloques de SeedProd como espaciadores, columnas y divisores para estructurar la página. Esto puede ayudar a los visitantes a navegar por la página y encontrar la información que desean.

Cuando encuentres un bloque que quieras agregar al diseño de la página, simplemente arrástralo y suéltalo en la plantilla. A medida que creas tu página de destino, puedes mover estos bloques por tu diseño arrastrándolos y soltándolos.

Para agregar un mapa interactivo, simplemente busca el bloque de Google Maps en el menú de la izquierda y arrástralo a tu diseño.

El bloque de Google Maps mostrará una ubicación predeterminada, pero normalmente querrás cambiarla.

Simplemente haz clic para seleccionar el bloque de Google Maps y luego haz clic en el pequeño ícono de engranaje que aparece en la barra de herramientas.

Esto abre la configuración del bloque en el menú de la izquierda.

Aquí, escribe una dirección diferente en el campo 'Ubicación'.

El bloque ahora se actualizará para mostrar esta dirección.

Los visitantes pueden acercar y alejar esta ubicación manualmente usando los botones de nivel de zoom '+' y '-' en la esquina derecha del mapa. Sin embargo, puedes cambiar el zoom predeterminado arrastrando el control deslizante 'Zoom' o escribiendo un número exacto en el cuadro de texto.

Después de eso, es posible que desees cambiar el tamaño del bloque usando los controles deslizantes 'Ancho' y 'Alto'. El 'Alto' se muestra en píxeles, pero el 'Ancho' es el porcentaje total disponible. Por ejemplo, '100' significa que el bloque de Google Maps ocupa el 100% del ancho disponible.

Para cambiar cualquiera de estos valores, simplemente arrastra los controles deslizantes o escribe un número en el cuadro de texto. A medida que realices cambios, el bloque de Google Maps se actualizará automáticamente para que puedas probar diferentes configuraciones y ver qué se ve mejor.

Si estableces el ancho a menos del 100%, es posible que desees cambiar la alineación del bloque. Por ejemplo, podrías mostrar el mapa interactivo en el centro de la página.

Para hacer este cambio, simplemente haz clic en los diferentes botones en la sección 'Alineación'.

Ahora puedes continuar trabajando en el diseño arrastrando nuevos bloques al diseño de la página y luego haciendo cambios en el menú de la izquierda. Para más información, por favor consulta nuestra guía sobre cómo crear una página de destino en WordPress.

Cuando estés satisfecho con cómo está configurada la página, haz clic en la flecha junto al botón 'Guardar' y luego selecciona 'Publicar'.

Ahora, si visitas tu sitio web, verás el mapa interactivo en acción.

Método 2. Crea Mapas Interactivos Personalizados Gratis Usando Google My Maps

Si deseas agregar un mapa de Google con interacciones básicas, entonces SeedProd es una excelente opción.

Sin embargo, si necesita proporcionar interacciones más avanzadas, le recomendamos usar Google My Maps en su lugar.

Este servicio en línea gratuito le permite personalizar un mapa de Google con marcadores únicos, puntos de interés, indicaciones para llegar en auto y más. Luego puede agregarlo a su sitio web usando código, por lo que no necesitará instalar un plugin de WordPress independiente.

Paso 1: Cree un mapa interactivo usando Google My Maps

Primero, debe visitar el sitio web de Google My Maps y hacer clic en 'Crear un mapa nuevo'.

Ahora verá el editor de mapas.

Aquí, puede seleccionar un mapa base y agregar puntos de interés, capas y más.

Para ayudar a mantener tu trabajo organizado, es una buena idea darle un nombre a la capa.

Para hacer esto, haz clic en los tres puntos junto a ‘Capa sin título’ y luego selecciona ‘Renombrar esta capa.’

Ahora puedes escribir el nombre que deseas usar. Esto es solo para tu referencia, así que puedes usar lo que quieras.

Hecho esto, haz clic en ‘Guardar’.

A continuación, puedes cambiar el aspecto del mapa eligiendo uno de los estilos predefinidos. Para ver las opciones disponibles, haz clic en la flecha junto a ‘Mapa base.’

Luego puedes hacer clic en cualquiera de las miniaturas para aplicar ese estilo al mapa.

Paso 2: Agrega Puntos de Interés al Mapa Interactivo

Si solo quieres crear un mapa simple, puedes saltar al paso 4. Sin embargo, es posible que desees personalizar el mapa agregando puntos de interés.

Cuando un visitante haga clic en cualquiera de estos puntos, se abrirá una ventana emergente que mostrará el nombre de la ubicación, además de una descripción, fotos y videos si están disponibles.

Hay varias formas de agregar puntos de interés clicables, pero la más fácil es escribir la dirección en la barra de búsqueda y luego hacer clic en el ícono de ‘Buscar.’

Google My Maps ahora se acercará al área.

A veces, la ubicación ya puede estar agregada como un punto de interés, especialmente si el lugar es una gran atracción turística o un edificio famoso. Si este es el caso, puedes simplemente hacer clic en la ubicación y luego seleccionar ‘Agregar al mapa.’

Si el punto de interés ya existe, Google My Maps mostrará automáticamente información sobre esta ubicación en una ventana emergente. Sin embargo, es posible que desees personalizar esta información predeterminada o agregar tus propias fotos y videos.

Para hacer esto, haz clic en el ícono de ‘Editar,’ que parece un pequeño lápiz.

Ahora puedes escribir el título y la descripción que deseas mostrar a cualquiera que haga clic en este lugar de interés.

Cuando estés satisfecho con la información que ingresaste, haz clic en ‘Guardar.’

Otra opción es agregar tus propias imágenes y videos al popup.

Por ejemplo, si estás creando un mapa interactivo para el sitio web de tu restaurante, podrías agregar fotos del exterior del lugar para ayudar a los clientes a encontrarlo.

Incluso podrías usar esta ventana emergente para conseguir más clientes. Por ejemplo, si estás agregando tu estudio de fotografía como un punto de interés, podrías subir tu portafolio de fotografía.

Para agregar multimedia, simplemente haz clic en el pequeño ícono de la cámara.

Ahora puedes elegir una imagen o video en la ventana emergente que aparece.

Después de hacer tu selección, haz clic en 'Insertar'.

Cuando hayas terminado, no olvides hacer clic en 'Guardar' para almacenar tus cambios.

A veces, es posible que desees mostrar una ubicación que no se ha agregado a Google Maps. Podría ser tu propia oficina, un localizador de tiendas, una atracción turística nueva o el punto de encuentro para tu evento o conferencia.

Para agregar un marcador, haz clic en el ícono 'Agregar un marcador' debajo de la barra de búsqueda.

Ahora puedes hacer clic en el lugar exacto donde deseas crear un marcador.

Esto abrirá una ventana emergente vacía donde puedes escribir un título y una descripción. También puedes agregar imágenes y videos haciendo clic en el pequeño ícono de la cámara.

Cuando estés satisfecho con la configuración de la ventana emergente, haz clic en el botón 'Guardar'.

Para crear más puntos de interés, simplemente sigue el mismo proceso descrito anteriormente.

Paso 3: Agrega direcciones de viaje a un mapa interactivo

También podrías querer agregar algunas direcciones, que se mostrarán como una línea azul en el mapa.

Esta función del mapa puede ser útil si quieres ayudar a los asistentes a encontrar tu evento o un lugar como tu bar o pub. Si tienes un blog de viajes, incluso podrías recomendar algunas rutas turísticas a tus lectores.

Hay varias maneras de agregar direcciones, pero el método más fácil es hacer clic en el ícono 'Agregar direcciones' debajo de la barra de búsqueda.

Esto agrega una nueva sección a la izquierda de la pantalla, donde puedes escribir las direcciones de inicio y fin que deseas usar.

Por defecto, Google Maps mostrará direcciones para conducir, pero puedes cambiar a direcciones para caminar o andar en bicicleta. Simplemente haz clic en el texto que muestra 'En coche' por defecto y luego selecciona el ícono de Ciclismo o Caminar.

Otra opción es dibujar una línea en el mapa. Esto es útil si quieres mostrar una ruta muy específica entre dos o más ubicaciones, en lugar de la ruta más rápida.

Para hacer esto, haz clic en el ícono 'Dibujar una línea' debajo de la barra de búsqueda. Ahora puedes elegir si deseas agregar una ruta para conducir, caminar o andar en bicicleta.

Después de eso, haz clic en el punto de inicio y dibuja una línea moviendo el mouse a lo largo de la ruta que deseas tomar.

Cuando llegues al destino, simplemente haz clic para colocar un marcador en ese lugar. En este punto, puedes dejar de dibujar o continuar moviendo el mouse para agregar más marcadores a la ruta.

Paso 4: Publicar el mapa interactivo en WordPress

Cuando estés satisfecho con la configuración del mapa, puedes agregarlo a tu sitio web usando un código de incrustación iFrame.

Para empezar, necesitarás hacer que el mapa sea público haciendo clic en el botón 'Compartir'. Esto abre una ventana emergente donde puedes escribir un título para el mapa y una descripción opcional.

Cuando estés satisfecho con la información que ingresaste, haz clic en ‘Aceptar’.

A continuación, querrás habilitar el interruptor ‘Cualquier persona con este enlace puede ver’. Las otras configuraciones son opcionales, por lo que puedes decidir si permites que las personas busquen el mapa, o si muestras tu nombre y foto de perfil.

Cuando estés satisfecho con la configuración, haz clic en ‘Compartir en Drive’.

En la siguiente ventana emergente, abre el menú desplegable debajo de ‘Acceso general’ y selecciona ‘Cualquier persona con el enlace’.

Como no queremos que otras personas editen el mapa, haz clic en el menú desplegable ‘Visor/Editor’ y selecciona ‘Visor’. Finalmente, haz clic en ‘Listo’.

Después de eso, haz clic en el ícono de tres puntos en el menú de la izquierda.

Luego, elige ‘Incrustar en mi sitio’.

Google Maps ahora mostrará un código de incrustación que te permite agregar el mapa a tu tienda en línea, blog o sitio web.

Puedes proceder a copiar este código iframe.

Ahora estás listo para pegar el código en tu sitio. En tu panel de WordPress, dirígete a la publicación o página donde deseas agregar un mapa interactivo y abre el editor de Gutenberg.

Luego, haz clic en el botón ‘+’ y comienza a escribir ‘HTML’ para encontrar el bloque HTML personalizado. Cuando aparezca el bloque correcto, haz clic para agregarlo a la publicación o página.

Ahora puedes pegar el código del Mapa de Google en el bloque HTML personalizado.

Cuando estés listo para publicar, haz clic en el botón Actualizar o Publicar.

Ahora, si visitas tu sitio web, verás el mapa interactivo en vivo.

¿Quieres aprender más sobre cómo agregar mapas a WordPress? Consulta los artículos a continuación:

• Cómo agregar Google Maps en WordPress (La forma CORRECTA)
• Los Mejores Plugins de Google Maps para WordPress (La Mayoría Son Gratuitos)
• Cómo incrustar un mapa de Google en formularios de contacto (con marcador)
• Cómo Agregar un Localizador de Tiendas de Google Maps en WordPress
• Cómo incrustar Bing Maps en WordPress (paso a paso)

Esperamos que este tutorial te haya ayudado a aprender cómo agregar un mapa interactivo en WordPress. También puedes querer aprender cómo agregar Google Web Stories a tu sitio de WordPress o leer nuestra guía definitiva sobre cómo incrustar PDFs, hojas de cálculo y más en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.