La forma más sencilla de mostrar una ubicación en WordPress es pegar un iframe de Google Maps en un bloque HTML personalizado. El mapa conserva el zoom y el tipo de vista elegidos y, con un contenedor responsive, se adapta tanto a móviles como a pantallas grandes.
Paso 1
Genera el código para insertar Google Maps
Primero crea el iframe con la ubicación y el aspecto que quieres mostrar. No necesitas un plugin de WordPress para esta parte.
- Abre el generador de código de Google Maps.
- Escribe la dirección completa, el nombre del negocio o las coordenadas exactas.
- Ajusta el zoom y elige entre mapa de carreteras o vista por satélite.
- Selecciona Ancho completo (100 %) y deja activada la opción responsive.
- Pulsa Generar código y copia el HTML del iframe.
Paso 2
Inserta el mapa con el editor de bloques de WordPress
Gutenberg es el editor predeterminado de WordPress. El bloque HTML personalizado permite pegar el iframe sin que el editor lo convierta en texto.
- Abre la página o entrada donde quieras mostrar el mapa.
- Pulsa el botón + para añadir un bloque.
- Busca HTML personalizado y selecciona el bloque.
- Pega el código generado dentro del bloque.
- Selecciona Vista previa para comprobar el mapa.
- Pulsa Publicar o Actualizar.
Paso 3
Inserta Google Maps con el editor clásico
Si utilizas el plugin Classic Editor o una instalación antigua, debes pegar el iframe en la vista de código.
- Abre la página o entrada correspondiente.
- Selecciona la pestaña Texto, no la pestaña Visual.
- Pega el iframe en el lugar donde debe aparecer el mapa.
- Vuelve a la pestaña Visual para revisar la posición.
- Guarda los cambios con Actualizar.
Añade un mapa a una barra lateral o al pie de página
Los temas que permiten editar widgets también pueden mostrar un mapa en la barra lateral o el footer. Comprueba primero que haya suficiente espacio, especialmente en móvil.
- Ve a Apariencia → Widgets en el escritorio de WordPress.
- Abre la zona de widgets de la barra lateral o del pie.
- Añade un widget o bloque HTML personalizado.
- Pega el iframe, guarda y revisa la página publicada.
Consejos y solución de problemas
- El mapa no aparece: comprueba si un plugin de seguridad está eliminando etiquetas iframe. Autoriza únicamente el dominio de Google Maps si el plugin ofrece esa opción.
- El mapa se sale de la pantalla: vuelve a generar el código con ancho del 100 % y modo responsive.
- La ubicación es incorrecta: escribe una dirección más completa o utiliza latitud y longitud.
- La página carga lentamente: conserva
loading="lazy"para que el mapa se cargue al acercarse a la zona visible. - El bloque desaparece: verifica que tu cuenta tenga permiso para publicar HTML sin filtrar; WordPress Multisite puede limitarlo.
Preguntas frecuentes sobre Google Maps y WordPress
¿Necesito un plugin para insertar Google Maps?
No. Un bloque HTML personalizado puede mostrar directamente el iframe generado.
¿Hace falta una clave API de Google Maps?
No para este método de iframe. Una integración personalizada con la API de JavaScript sí puede necesitar una clave y facturación.
¿El mapa funciona en móviles?
Sí. Usa ancho completo y mantén activado el contenedor responsive.
¿Puedo mostrar varias sucursales?
Sí. Crea los marcadores en Google My Maps y utiliza nuestra guía de mapas con varias ubicaciones.
Crea tu mapa para WordPress
Configura la ubicación, el tamaño y el zoom, y copia un iframe responsive en segundos.