Insertar un mapa de Google Maps en un sitio web de WordPress es una forma simple y efectiva de mostrar la ubicación de un negocio, oficina, evento, local comercial o cualquier punto de interés.
Un mapa visible dentro de una página ayuda a que los visitantes encuentren rápidamente dónde estás, mejora la experiencia de navegación y transmite mayor confianza. Esto es especialmente importante para empresas, instituciones, consultorios, estudios profesionales, locales comerciales, restaurantes, espacios de eventos y proyectos que necesitan mostrar una dirección física.
En este tutorial de ArgentoIA, te explicamos cómo incrustar un mapa de Google Maps en WordPress usando el bloque de HTML personalizado.
La idea es hacerlo de una forma clara, sin instalar plugins innecesarios y con un pequeño ajuste para que el mapa se adapte mejor al diseño de tu sitio.
Por qué insertar un mapa en tu sitio web
Antes de ir al paso a paso, vale la pena entender por qué un mapa puede mejorar una página web.
Cuando un usuario entra a la sección de contacto, ubicación o información institucional de un sitio, muchas veces quiere resolver una duda concreta: dónde queda el lugar, cómo llegar o si la empresa tiene una dirección real.
Un mapa interactivo permite que esa información sea más visual y accesible.
Además, puede ayudar a:
- mostrar la ubicación exacta de un negocio;
- facilitar indicaciones para llegar;
- mejorar la confianza del visitante;
- reducir consultas repetidas sobre dirección;
- complementar una página de contacto;
- ofrecer una experiencia más clara en celulares;
- reforzar la presencia local de una empresa.
No es un elemento que “salve” por sí solo una estrategia digital, pero sí puede mejorar la utilidad de una página y hacer que el usuario encuentre más rápido lo que necesita.
Qué necesitás para insertar Google Maps en WordPress
Para agregar un mapa de Google Maps en WordPress necesitás tres cosas:
- tener definida la ubicación que querés mostrar;
- copiar el código de inserción desde Google Maps;
- pegar ese código en un bloque de HTML personalizado dentro de WordPress.
Ese código de inserción se conoce como iframe.
Un iframe es un fragmento de código HTML que permite mostrar dentro de una página un contenido externo. En este caso, el contenido externo es el mapa de Google Maps.
Dicho de forma simple: no estás creando un mapa desde cero dentro de WordPress, sino mostrando una ventana con el mapa generado por Google.
Paso 1: buscar la ubicación en Google Maps
El primer paso es entrar a Google Maps y buscar la ubicación que querés insertar.
Puede ser:
- la dirección de tu negocio;
- el nombre de una empresa;
- un punto específico del mapa;
- una oficina;
- un local;
- un lugar turístico;
- una sede institucional;
- un espacio de eventos.
Una vez que tengas el lugar identificado, conviene revisar que el marcador esté ubicado correctamente.
Este punto es importante porque el mapa que se mostrará en tu sitio será el que copies desde Google Maps.
Si la ubicación está mal seleccionada, también se verá mal dentro de tu página.
Paso 2: obtener el código para insertar el mapa
Una vez que encontraste la ubicación, tenés que obtener el código HTML.
En Google Maps, buscá la opción para compartir la ubicación. Dentro de esa ventana, suele aparecer una alternativa para insertar un mapa.
Esa opción genera un código HTML que comienza con la etiqueta iframe.
Ese es el código que vas a copiar y luego pegar en WordPress.
Google Maps suele ofrecer distintos tamaños predeterminados para el mapa, como pequeño, mediano o grande. Podés elegir cualquiera, porque después es posible modificar el tamaño desde el propio código.
Para este tutorial, lo más práctico es elegir un tamaño mediano y luego ajustar manualmente el ancho y la altura.
Paso 3: entrar a la página o entrada de WordPress
Después de copiar el código, entrá al administrador de WordPress y abrí la página o entrada donde querés mostrar el mapa.
Puede ser, por ejemplo:
- una página de contacto;
- una landing page;
- una página de ubicación;
- una nota de blog;
- una página institucional;
- una ficha de evento;
- una página de sucursales.
Una vez dentro del editor, ubicá el lugar exacto donde querés que aparezca el mapa.
Lo ideal es acompañarlo con un pequeño texto explicativo, como la dirección, una referencia o una llamada a la acción.
Por ejemplo:
“Podés encontrarnos en esta ubicación”
“Así llegás a nuestra oficina”
“Estamos ubicados en el centro de la ciudad”
“Visitá nuestro local en el siguiente mapa”
Ese contexto ayuda a que el mapa no aparezca aislado.
Paso 4: agregar un bloque de HTML personalizado
En el editor de bloques de WordPress, hacé clic en el botón + para agregar un nuevo bloque.
Después, buscá el bloque llamado HTML personalizado.
Otra forma rápida de hacerlo es escribir /html en un bloque vacío y seleccionar la opción correspondiente.
Ese bloque permite pegar código HTML directamente dentro de una página o entrada.
Una vez agregado el bloque, vas a ver un campo donde podés pegar el código que copiaste desde Google Maps.
Pegá ahí el iframe completo.
Paso 5: previsualizar el mapa
Después de pegar el código, hacé clic en la opción de vista previa del bloque o actualizá la página para comprobar cómo se ve.
Si todo está correcto, el mapa debería cargarse dentro del contenido.
En este punto conviene revisar:
- si el mapa aparece correctamente;
- si la ubicación es la adecuada;
- si el tamaño se adapta bien al diseño;
- si se ve bien en escritorio;
- si se ve bien en celular;
- si no queda demasiado chico o demasiado alto;
- si el bloque está ubicado en el lugar correcto.
Si el mapa no aparece, revisá que hayas copiado el código completo y que el iframe no haya quedado cortado.
Paso 6: ajustar el tamaño del mapa
El código iframe de Google Maps incluye dos atributos importantes:
width, que define el ancho;height, que define la altura.
El ancho puede aparecer en píxeles, por ejemplo:
width="600"
Pero en muchos casos conviene cambiarlo por:
width="100%"
Esto hace que el mapa ocupe todo el ancho disponible del contenedor donde está insertado.
Para la altura, lo más recomendable es usar un número en píxeles. Por ejemplo:
height="350"
Una configuración simple y útil podría ser:
<iframe
src="URL_DEL_MAPA_DE_GOOGLE"
width="100%"
height="350"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
En este ejemplo, el mapa ocupa el ancho completo del contenedor y tiene una altura de 350 píxeles.
Si querés que el mapa se vea más grande, podés probar con 400 o 450 píxeles de alto.
Cómo hacer que el mapa se vea mejor en mobile
Para que el mapa funcione bien en celulares, el ajuste más importante es usar:
width="100%"
De esta forma, el iframe se adapta al ancho de la pantalla o del contenedor.
También conviene evitar alturas demasiado grandes, porque en celulares un mapa muy alto puede ocupar demasiada pantalla y dificultar la lectura del resto del contenido.
Una buena altura para comenzar puede ser entre 300 y 400 píxeles.
Además, si estás usando un maquetador visual o bloques de diseño, revisá que el mapa esté dentro de una sección o contenedor que también sea responsivo.
Dónde conviene insertar un mapa
Un mapa puede ser útil en varias partes del sitio, pero no siempre hace falta colocarlo en todas.
Los lugares más recomendados son:
- página de contacto;
- footer o pie de página;
- página de ubicación;
- página de sucursales;
- landing pages locales;
- artículos sobre eventos;
- páginas de servicios presenciales;
- fichas de lugares o instituciones.
En una página de contacto, el mapa suele funcionar muy bien acompañado por dirección, teléfono, horario de atención y botón de WhatsApp.
Buenas prácticas al usar Google Maps en WordPress
Insertar el mapa es sencillo, pero conviene cuidar algunos detalles para que no afecte la experiencia del usuario.
No abuses de los mapas
Si insertás muchos mapas en una misma página, podés hacer que la carga sea más pesada.
Usalo donde realmente aporte valor.
Acompañá el mapa con texto
No dependas únicamente del mapa. Es importante escribir también la dirección en texto, porque eso mejora la accesibilidad y ayuda al usuario a copiar o leer la información fácilmente.
Revisá la vista móvil
Siempre probá cómo se ve el mapa desde un celular.
Muchas visitas llegan desde dispositivos móviles, especialmente cuando una persona busca cómo llegar a un lugar.
Mantené actualizada la información
Si tu empresa cambia de dirección, actualizá tanto el mapa como el texto de la página.
Usá una altura razonable
Un mapa demasiado pequeño puede ser incómodo. Uno demasiado grande puede ocupar demasiado espacio.
Un equilibrio habitual es entre 300 y 450 píxeles de alto.
Beneficios de insertar Google Maps en WordPress
Agregar un mapa de Google Maps puede aportar varios beneficios.
Mejora la experiencia del usuario
El visitante puede ubicar visualmente tu negocio o evento sin salir de la página.
Facilita la navegación
El usuario puede abrir el mapa, revisar la zona y obtener indicaciones para llegar.
Aporta confianza
Mostrar una ubicación física puede ayudar a despejar dudas sobre la legitimidad de un negocio o institución.
Complementa la página de contacto
Un mapa hace que la información de contacto sea más completa y visual.
Ayuda a negocios locales
Para empresas con atención presencial, el mapa puede ser un recurso útil para conectar la presencia digital con la ubicación real.
Errores comunes al insertar un mapa
Algunos errores frecuentes son fáciles de evitar:
- copiar solo el enlace y no el iframe;
- pegar el código en un bloque de párrafo en lugar del bloque HTML;
- dejar un ancho fijo que no se adapta a celulares;
- usar una altura demasiado baja;
- insertar una ubicación equivocada;
- no revisar la vista previa;
- colocar el mapa sin dirección escrita;
- usar demasiados mapas en una misma página.
La mayoría de estos problemas se resuelve revisando el código y probando la página antes de publicarla.
Conclusión: insertar Google Maps en WordPress es simple y útil
Insertar un mapa de Google Maps en WordPress es una tarea sencilla que puede mejorar la funcionalidad de tu sitio.
Solo necesitás copiar el código de inserción desde Google Maps, pegarlo en un bloque de HTML personalizado y ajustar el ancho para que se vea correctamente en distintos dispositivos.
No es una herramienta compleja, pero puede aportar claridad, confianza y una mejor experiencia para los visitantes que necesitan ubicar tu negocio, oficina, evento o lugar de interés.
En ArgentoIA desarrollamos sitios web en WordPress pensados para ser claros, funcionales y fáciles de administrar. También ayudamos a empresas a optimizar sus páginas de contacto, mejorar la experiencia de usuario y sumar elementos útiles como mapas, formularios, botones de WhatsApp e integraciones digitales.
Si querés mejorar tu sitio web y hacerlo más útil para tus visitantes, empezar por una página de contacto clara, bien diseñada y con un mapa correctamente insertado puede ser un muy buen primer paso.
