Cómo añadir Google Maps en WordPress

Si tienes una página de tu Empresa o Negocio realizada con WordPress, y dispones de ubicación física que quieres dar a conocer no siempre tienes clara cuál es la mejor forma de hacerlo, o quizás si, pero no te decides por el método a emplear.

Hosting Mautic QuickStart -50% con soporte en español
24 horas y formación gratuita

Envía hasta 1.000.000 emails/año. Soporte Mautic en Español 24 horas, 365 días

SABER MÁS

Averigua cómo añadir Google Maps en WordPress de manera fácil usando un plugin para WordPress o de forma manual mediante un script y así geolocalizar tu negocio mostrándolo en un mapa para que los que te visitan virtualmente también puedan hacerlo físicamente conociendo tu dirección postal y cómo llegar.

Si tienes una tienda física, o una empresa que tiene una localización geográfica específica, es muy posible que necesites mostrar esa localización por razones de soporte, de distribución de tus productos o servicios, o para que tus potenciales clientes puedan localizarte ¿es tu caso?

Seguro que si, por eso estás leyendo este artículo ¡verdad!, pues lo tienes bien fácil porque en este artículo te cuento como añadir un mapa de Google Maps en WordPress que muestre la geolocalización deseada y lo muestre en tu web realizada con WordPress para que sea bien visible a tus visitantes.

  Obtener una KEY para Google Maps

Este paso es esencial desde que hace años Google decidió que el servicio de Google Maps sería de pago y que se requeriría una Key mediante Maps Embed API de Google para poder insertar mapas de Google en sitios web.

¿Hay que pagar por utilizar Mapas de Google? pues la teoría es que para usuarios particulares o finales que tienen sitios web donde insertan mapas para geolocalizar sus negocios, ellos dicen que no hay que pagar, aunque si te requieren los datos de facturación cuando activas dicha API desde tu cuenta de Google desde su herramienta Google Cloud Platform Console.

La verdad es que no es tarea fácil obtener una Key para la API de mapas de Google, sobre todo si nunca has lidiado con su plataforma de obtención de API Keys, porque es un verdadero galimatías, pero aquí voy a tratar de desgranártelo lo mejor posible.

  Pasos para activar Maps Embed API

Activar y tener la API Key, que es el objetivo, ya que sin ella no podrás mostrar mapas incrustados en tu web usando plugins, por ejemplo y tendrás que conformarte con hacer un oEmbed de un mapa del que copies el código (script) desde Google Maps.

Pasos resumidos:

1. Accede a Google Cloud Platform Console con tu cuenta.
2. Haz clic en el botón azul Empezar gratis.
3. Establece tu país y como descripción de actividad puede ser Proyecto personal.
4. Marca los tickbox de aceptación de las “Condiciones del Servicio” y clic en “Continuar”.
5. Revisa tus datos y haz clic en “Iniciar prueba gratuita”.
6. Para poder continuar tendrás que validar con tu móvil la cuenta. (Medidas antifraude online).
7. A la pregunta Qué te trajo por Google Cloud puedes indicar Usar API.
8. A la pregunta ¿Qué te interesa hacer en Google Cloud? puedes indicar Google Maps.
9. Ve a Productos principales > Ver todo o buscar por Biblioteca de API.
10. A la derecha, en Categoría haz clic en Mapas.
11. Busca a la derecha Maps Embed API y haz clic.
12. Haz clic en el botón azul Habilitar.
13. Copia el código de la API que se muestra en pantalla.
14. Protege la Clave API seleccionando Restricción de API.
15. En el campo siguiente (filtro) establece Maps Embed API (se muestra como 1 API)
16. Haz clic en Restringir Clave.
17. Desde https://console.cloud.google.com/google/maps-apis/ configura los demás aspectos de uso.
18. Cuando hayas terminado haz clic en Guardar (botón inferior).

Aunque te parezca un poco abrumador el proceso, créeme que está mucho más simplificado que años atrás, aunque debo confesar que nunca ha sido sencillo lidiar con las APIs de Google, que parecen estar solo pensadas para usuarios avanzados y no para cualquier usuario común que solo quiere usar un mapa en su web para distinguir su negocio.

Te relato con algo más de detalle algunos de los pasos que pudieran resultar más confusos, sobre todo al principio del proceso…

Cuando accedes a la biblioteca de API para Mapas de Google puedes hacer clic en la tarjeta Maps Embed API.

A continuación debes Habilitar dicha API para tu cuenta (con la que estés loguead@ en servicios de Google) con el fin de poder usar este servicio.

En el momento en que habilitar Maps Embed API en una ventana modal (popup) verás la clave API que podrás copiar para posteriormente usar en el plugin de geolocalización de datos (negocio, etc.) de tu sitio web.

Si tienes activado el uso del crédito de 200$ que Google te da para probar este servicio, es importante que mantengas activado el tickbox informativo de crédito disponible, para poder cancelarlo antes de agotarlo en caso de no seguir usando este servicio.

Una vez has habilitado la API y obtenido la KEY para Google Maps (embed) puedes, por ejemplo, Configurar estilos de mapa dentro de los disponibles.

Cuando ya has obtenido una API Key válida para poder incrustar mapas del servicio de Google en tu web, mediante algún plugin, podemos seguir avanzando en el uso de Google Maps en WordPress en el artículo.

  Cómo insertar un mapa de Google Maps en WordPress con un plugin

Una de las varias maneras de insertar o mostrar un mapa en WordPress del servicio cartográfico digital de Google es mediante el uso de plugins, que por cierto hay un porrón, o sea, para dar y regalar y escoger el que más te guste o mejor te entre por los ojos, si bien que lo deberías escoger por sus funcionalidades y no por su cara bonita. 😜

Algunos de los plugins para Mapas de Google que puedes usar en tu web:

• WP Go Maps (formerly WP Google Maps): Ver plugin – Con la versión gratuita es suficiente para mostrar un mapa
• Maps Widget for Google Maps: Ver plugin – Rápido y sencillo, con efecto lightbox. Compatible con Gutenberg.
• API KEY for Google Maps: Ver plugin – Para añadir la API Key a tu Tema fácilmente y evitar errores con los mapas incrustados.
• WP MAPS – Easiest & Most Advanced WordPress Plugin for Google Maps: Ver plugin – Google Maps con múltiples ubicaciones.
• Leaflet Maps Marker (Google Maps, OpenStreetMap, Bing Maps): Ver plugin – Alternativa al uso de Mapas de Google, con Bing Maps o OpenStreet Maps.
• WP Store Locator: Ver plugin – Para mostrar múltibles direcciones de negocios.
• WP Map Block – Gutenberg Map Block for Google Map and OpenStreet Map: Ver plugin – Para Gutenberg. Muy rápido cargando mapas.

Esta es una lista resumida, porque hay muchos complementos para WordPress que te sirven para mostrar mapas de Google o de otros servicios de cartografía digital como Bing Maps (Microsoft) o la versión libre OpenStreet Maps.

   Añadir un Mapa en WordPress con el plugin WP Go Maps

De la lista he optado por mostrarte cómo insertar un mapa en WordPress con el plugin WP Go Maps para que veas el proceso, que en la mayoría de plugins es muy similar, por lo que la esencia de cómo hacerlo te va a servir en mayor o menor medida.

Con este plugin puedes marcar un punto en el mapa de WordPress (versión comercial completa), lo que lo hace interesante por ejemplo para mostrar sitios turísticos, de restauración, de interés arqueológico y otros que puedan estar relacionados con negocios orientados al turismo de tu ciudad o región, sin olvidar las numerosas aplicaciones que pueden tener para apartamentos, servicios de franquicias, inmobiliarias y un enorme largo etcétera.

Para poder crear un Mapa y luego mostrarlo en tu sitio debes configurar la API Key de Google Maps que obtuviste en el punto segundo de este artículo.

Una vez la introduces y aplicas los cambios ya podrás ver en la pestaña Configuración los parámetros disponibles para el uso del mapa incrustado en la web.

Luego mediante el código corto que te facilita el plugin puedes incrustar el mapa en una página, en un widget o en entradas de tus publicaciones del blog, por citar usos habituales.

[wpgmza id="1"]

El plugin tienen un montón de opciones, aunque si solo quieres mostrar el mapa en tu web, en algún apartado de la misma, con la versión “lite” o gratuita del plugin es más que suficiente.

  Cómo insertar un mapa de Google Maps en WordPress manualmente

Este es quizás el método más tradicional de insertar Google Maps en WordPress, ya que viene utilizándose desde los orígenes de Google Maps, y son millones los sitios web que actualmente incorporan mapas de este servicio de cartografía digital en webs ya sea de forma estándar para mostrar países, regiones o ciudades, como para localizar empresas, negocios u otros elementos a los que va enfocado el contenido del sitio que los alberga.

El presente método no implica el tener que darse de alta en ningún servicio de Google para generar una API Key ni procedimientos similares, y permite mostrar mapas en Entradas, Páginas o widgets de WordPress sin ninguna restricción de visualización.

El proceso manual resumido es el siguiente:

1. Accede a Google Maps (preferible desde un ordenador de sobremesa para ver bien el mapa).
2. Busca la dirección postal (Calle, número, Ciudad, Provincia, País) en dicho mapa.
3. Haz clic en el botón Compartir una vez localizado el punto deseado.
4. En la ventana emergente selecciona la pestaña Insertar un mapa.
5. Ajusta el nivel de “zoom” y la calle, número correctos. (Control + rueda artón para acercar o alejar).
6. Haz clic en el enlace azul Copiar HTML.
7. El script copiado conviene que lo pegues en tu ordenador en algún archivo de texto.
8. Ahora podrás insertar (pegar) ese script copiado en una Página, Entrada o Widget en WordPress.

El código HTML que obtienes de Google Maps será parecido al siguiente:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3037.343923385429!2d-3.7143533833081643!3d40.423382779364196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42287ab3f77019%3A0x56c00bc05abaf59d!2sPlaza%20de%20Espa%C3%B1a!5e0!3m2!1ses!2sfr!4v1664314895676!5m2!1ses!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Para adaptarlo al espacio donde lo vayas a mostrar en tu sitio web deberás ajustar los parámetros ancho y alto a las medidas en píxeles del espacio donde se va a mostrar.

Si por ejemplo lo vas a mostrar debajo del formulario de contacto de tu web, en la página “Contacto”, tendrás que ir a Páginas y editar la página de “Contacto” y debajo del formulario de contacto que uses pegar el script para que luego sea visible.

Ajusta los valores de width=”600″ height=”450″ para que se adapte a la medida del hueco disponible.

Si quieres que tenga un borde alrededor del mapa activa la opción style=”border:0;” para que en lugar de cero 0 sea uno 1.

El resultado una vez añadido a tu página de contactos, debajo, y ajustado el tamaño, sería similar al siguiente.

Esta manera de añadir mapas de Google utilizando el script que ellos mismos te facilitan te sirve para añadir mapas personalizables (hasta cierto punto) en tus publicaciones o páginas específicas, sin límite de uso.

  Conclusiones

Cuando muestras la geolocalización de tu tienda, empresa o similar en un mapa dentro de tu sitio web, generas confianza en tus visitantes y clientes, que sienten que detrás de tu página hay una entidad física a la que poder recurrir, ya sea para retirar compras, formalizar consultas o simplemente visitarte, y eso es un valor añadido que debes explotar en beneficio de tu marca, tienda o productos.

Hay varias maneras de añadir un mapa en WordPress, siendo la opción manual la más limpia, sobre todo porque no implica tener que darte de alta en Google Cloud Platform Console para luego obtener una API Key que sirva para activar el mapa en tu sitio.

Los plugins para añadir mapas en WordPress son interesantes si te lo planteas como una opción más comercial, ya que el nivel de integración y personalización de tu negocio, tienda o franquicias mejora tanto visualmente como para múltiples localizaciones en un mismo mapa, algo que no es posible con la opción manual.

Debes analizar que es exactamente lo que necesitas mostrar en el mapa y en base a eso escoger el método adecuado y aplicarlo.

Abusar del uso de mapas complejos, con demasiadas localizaciones o en tamaños grandes pueden afectar a los tiempos de carga de tu sitio y por ende a tus visitas, que si ven que la página tarda en cargar es posible que acaben abandonándola. ¡Usa los mapas de forma que mantengas el equilibrio entre funcionalidad y carga rápida de la web!