Hoy te quiero hablar de cómo añadir mapas en WordPress, ya que es un tipo de recurso muy habitual, por ejemplo, para sitios de turismo y viajes, o si tienes una empresa con varias sedes y quieres mostrarlas todas de formas gráfica. Esas son las dos formas más habituales en que suelen demandarlo los clientes del servicio de diseño web, pero seguro que hay muchas otras.
De modo que, en este post he recopilado varios plugins para añadir mapas en WordPress, tanto gratuitos como de pago, para que elijas la opción que más te convenga en función de tus necesidades y las de su sitio web.
Resumen
8 plugins para añadir mapas interactivos en WordPress
#1 Interactive Geo Maps
El primer plugin para añadir mapas en WordPress del que te quiero hablar es Interactive Geo Maps, que permite crear mapas interactivos por regiones / países e incluir marcadores de colores.
Con este plugin puedes mostrar en WordPress mapas del mundo, de los continentes y de un solo país.
Dispone de una versión gratuita y de una de pago con opciones más avanzadas.
Te dejo un ejemplo de este plugin que utilicé en un blog de viajes. Puedes verlo en funcionamiento en Dos mundos encontrados.
#2 Interactive World Maps
Interactive World Maps es un plugin premium muy similar al anterior, ya que pertenece al mismo autor, aunque, en este caso, solo está disponible para su adquisición en Envato Market.
Utiliza la API de Google Geochart para generar mapas que puedes personalizar y mostrar en cualquier parte de tu web a través de un shortcode.
Como en el caso anterior, puedes crear tantos mapas como quieras, con marcadores interactivos y de colores por continentes, países o regiones.
Si quieres verlo en funcionamiento, este plugin lo utilicé en el blog de Emily Poppins.
#3 WP Google Maps
Con WP Google Maps puedes añadir en WordPress un mapa personalizado de Google o un localizador de tiendas de forma rápida y sencilla con el shortcode que se genera.
Este plugin también dispone de dos versiones. La versión gratuita te permite crear un mapa de Google con tantos marcadores como quieras y la pro ofrece mapas con marcadores de alta calidad que incluyen ubicaciones, descripciones, imágenes, categorías, enlaces y direcciones.
Aquí puedes ver un ejemplo:
#4 Leaflet Map
Leaflet Map te permite añadir en WordPress mapas generados con LeafletJS, que es una librería JavaScript de código abierto para mapas interactivos responsive.
Puede establecerse por mapa con atributos de shortcodes o a través de los ajustes del panel de control y permite incluir mensajes emergentes con sus nombres, enlaces o descripciones que puedes añadir con el editor de WordPress.
Un ejempo:
#5 Google Map
Google Map es un plugin para añadir mapas de Google en WordPress, que permite personalizar la altura y el ancho del mapa, configurar el color de los bordes, activar y desactivar sus controles, encontrar ubicaciones escribiendo la dirección (autocompletado), cambiar el idioma del mapa o colocar un marcador animado entre otras opciones.
#6 Basic Interactive World Map
Basic Interactive World Map permite añadir mapas interactivos en WordPress y personalizar sus colores, así como los enlaces y la descripción de cada continente.
Dispone de un panel de administración muy fácil de usar, que no requiere de conocimientos de código o programación. Simplemente tienes que pegar el shortcode que genera el plugin en cualquier página o entrada para mostrar el mapa en WordPress.
Un ejemplo:
#7 MapPress (Maps for WordPress)
MapPress ofrece la posibilidad de añadir mapas interactivos de Google y Leaflet a WordPress.
Puedes crear mapas ilimitados e integrarlos utilizando tanto el editor clásico como el nuevo editor de bloques (Gutenberg).
Además, este plugin dispone de una versión pro con opciones extras como marcadores personalizados, mashups de búsqueda, clustering y mucho más.
Un ejemplo:
#8 WP Google Map
Por último, te quiero hablar de WP Google Map, que es otro plugin para insertar mapas personalizados de Google en WordPres.
Es totalmente personalizable y, como la mayoría de plugins que te he mostrado, se integra vía shortcode. También dispone de una versión premium con funcionalidades extras.
Cómo insertar un mapa de Google Maps en WordPress
Y como tip final, quiero explicarte cómo insertar un mapa de Google Maps en WordPress de forma manual, sin necesidad de plugins, si lo que requieres es algo sencillo y con los mapas estándares de Google te es suficiente.
Si ese es tu caso, debes seguir los siguientes pasos:
1. Buscas el lugar, negocio o ficha en Google Maps (en mi caso, por ejemplo, un hotel).
2. Clicas en Compartir > Insertar un mapa:
3. Seleccionas el tamaño (pequeño, mediano o grande) y ajustas la ubicación con los controladores según donde quieres que aparezca en el mapa. Mi consejo es que aparezca centrado.
4. Cuando lo tengas ubicado correctamente, clicas en Copiar HTML para llevar el código iframe a WordPress. Automáticamente queda seleccionado y el fondo cambia a azul.
5. Solo te queda pegarlo en el lugar de tu web que quieres que se muestre. Para ello, puedes hacerlo de diferentes formas:
- Pegando el código en el editor clásico de texto.
- Añadir un nuevo bloque de HTML en Gutenberg.
- Si usas un editor visual para maquetar tus páginas (Divi en mi caso), puedes pegarlo en un módulo de código.
Este sería el resultado sí pegas el código que has copiado de Google, pero aún puedes hacerle alguna modificación para cambiar su tamaño:
Si te fijas en el código, hay una parte donde puedes cambiar el ancho (width) y el alto (height).
Simplemente, tienes que modificar el ancho por 100% e indicar el alto que necesites según el diseño o maquetación de tu web. En mi caso, he cambiado los valores por 100% para que ocupe ancho completo y 400px de alto:
Y aquí puedes ver cómo queda este mapa de Google con ese pequeño ajuste en sus dimensiones:
Hasta aquí este post en el que he recopilado 8 plugins para añadir mapas en WordPress y también te he explicado cómo insertar manualmente un mapa de Google Maps en tu web. Solo te queda elegir la opción que mejor se adapte tus necesidades y a las de tu proyecto.
Diseñador Web en WordPress. Diseño páginas con gancho, que cargan rápido y están optimizadas para SEO. Amante de la creatividad, el marketing y los animales.
0 comentarios