Plugins para aƱadir mapas en WordPress
Plugins para aƱadir mapas en WordPress

Portada: Shutterstock por seeyah panwan

Tiempo de lectura:

Plugins para aƱadir mapas en WordPress

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.

8 plugins para aƱadir mapas interactivos en WordPress


#1 Interactive Geo Maps

Plugins para aƱadir mapas en WordPress: 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.

Plugins para aƱadir mapas en WordPress: Interactive Geo Maps

#2 Interactive World Maps

Plugins para aƱadir mapas en WordPress: 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.

Plugins para aƱadir mapas en WordPress: Interactive World Maps

#3 WP Google Maps

Plugins para aƱadir mapas en WordPress: 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:

Plugins para aƱadir mapas en WordPress: WP Google Maps

#4 Leaflet Map

Plugins para aƱadir mapas en WordPress: 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:

Plugins para aƱadir mapas en WordPress: Leaflet Map

#5 Google Map

Plugins para aƱadir mapas en WordPress: 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.

Plugins para aƱadir mapas en WordPress: Google Map

#6 Basic Interactive World Map

Plugins para aƱadir mapas en WordPress: 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:

Plugins para aƱadir mapas en WordPress: Basic Interactive World Map

#7 MapPress (Maps for WordPress)

Plugins para aƱadir mapas en WordPress: 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:

Plugins para aƱadir mapas en WordPress: MapPress (Maps for WordPress)

#8 WP Google Map

Plugins para aƱadir mapas en WordPress: 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).

CĆ³mo insertar un mapa de Google Maps en WordPress

2. Clicas en Compartir > Insertar un mapa:

CĆ³mo insertar un mapa de Google Maps en WordPress

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.

CĆ³mo insertar un mapa de Google Maps en WordPress

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.

CĆ³mo insertar un mapa de Google Maps en WordPress

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).

CĆ³mo insertar un mapa de Google Maps en WordPress

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:

CĆ³mo insertar un mapa de Google Maps en WordPress

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.

Summary
šŸ—ŗ Plugins para aƱadir mapas interactivos en WordPress
Article Name
šŸ—ŗ Plugins para aƱadir mapas interactivos en WordPress
Description
RecopilaciĆ³n de 8 plugins para aƱadir mapas en WordPress. TambiĆ©n te explico cĆ³mo insertar un mapa de Google Maps en tu web.
Author
Publisher Name
Max CamuƱas
Publisher Logo

0 comentarios

Enviar un comentario

Tu direcciĆ³n de correo electrĆ³nico no serĆ” publicada. Los campos obligatorios estĆ”n marcados con *

Para cumplir con el nuevo RGPD y que tus datos estƩn a salvo, debes leer y aceptar mi polƭtica de privacidad. Tus datos serƔn guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

ĀæNecesitas una pĆ”gina web, blog, landing o tienda online?
Ā”PIDE TU
PRESUPUESTO!

DiseƱa
tu web

DiseƱa
tu imagen

Impulsa
tu proyecto

Optimiza
y posiciona

masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guĆ­a

PARA DISEƑAR LOGOTIPOS MEMORABLES

GUƍA para diseƱar logotipos memorables