Insertar Google Maps en WordPress es una tarea de cinco minutos. Ayuda a generar confianza, refuerza tu SEO local y facilita que los usuarios te compren. Sin embargo, asegurarte de que el mapa se muestre correctamente y tenga las funciones que necesitas puede llevarte horas. Y si te olvidas de tener en cuenta a los usuarios móviles, es posible que no te des cuenta de que el mapa se recorta en pantallas pequeñas.
Esta guía te explica tres opciones para insertar Google Maps en WordPress: un iFrame nativo, un plug-in de mapas y un widget gratuito. También abordaremos los problemas y las ventajas y desventajas de cada método para que puedas decidir cuál es el mejor para ti.
Tres opciones para insertar Google Maps en WordPress
| Method | API key required | Cost | Mobile-responsive | Multi-pin support | Setup time |
|---|---|---|---|---|---|
|
iFrame nativo |
No |
Gratis |
No; ancho/alto fijo |
No |
Aproximadamente 5 minutos |
|
Plug-in de WordPress |
Sí; gratis para 10 000 cargas de mapa/mes |
Gratis para funciones básicas; de pago para funciones avanzadas |
Depende del plug-in |
Sí; a menudo de pago |
Aproximadamente 15–25 minutos |
|
Widget de Google Maps de Jotform |
Sí; gratis para 10 000 cargas de mapa/mes |
Widget gratuito; incluye funciones avanzadas |
Sí |
Sí; gratis |
Aproximadamente 15 minutos |
Opción 1: Usar un iFrame nativo de Google Maps
La opción del iFrame de Google Maps es la forma más sencilla y rápida de insertar Google Maps en WordPress. Solo tienes que buscar tu negocio en Google Maps, hacer clic en Compartir, copiar el código y pegarlo en una página de WordPress. A continuación te ofrecemos una guía paso a paso para que lo pongas en marcha rápidamente.
La simplicidad acaba siendo una limitación en sí misma. No puedes personalizar el aspecto del mapa, añadir múltiples marcadores ni mostrar información adicional sobre la vista predeterminada. Además, tendrás que experimentar con los tamaños del mapa y los diseños de tu página de WordPress para asegurarte de que sea usable en dispositivos móviles.
Cómo insertar un iFrame de Google Maps
Antes de empezar, registra tu negocio en la plataforma Google Business Profile. Esto te permite mostrar toda tu información en Google Maps, incluyendo horarios de apertura, reseñas o tu carta de menú. Si solo quieres señalar una dirección que no te pertenece o un punto de referencia, pasa directamente al primer paso.
Obtén el código de inserción de Google Maps
- Ve a google.com/maps y busca el nombre de tu negocio o dirección.
- Confirma que has seleccionado el marcador correcto revisando los detalles del negocio en el lado izquierdo de la pantalla.
- Haz clic en Compartir.
- Aparece una ventana emergente en la pantalla. Haz clic en la pestaña Insertar un mapa.
- Aparece una vista previa de cómo se verá el mapa en tu sitio web. Está configurado en tamaño mediano por defecto; puedes elegir mostrar un mapa pequeño o grande, o incluso seleccionar un tamaño personalizado usando el menú desplegable en la parte superior izquierda.
- Después de seleccionar el tamaño, haz clic en Copiar HTML. Esto copia el fragmento de código iFrame en el portapapeles.
Insertarlo en WordPress (Editor de bloques/Gutenberg)
- En WordPress, abre la página o entrada donde quieras colocar el mapa.
- Haz clic en el icono del insertador de bloques +, escribe HTML para filtrar y haz clic en HTML personalizado para añadir el bloque a la página.
- En el nuevo bloque, haz clic en Editar HTML.
- Pega el código iFrame en la ventana emergente. La vista previa se muestra en el lado derecho. Haz clic en Actualizar para finalizar.
- La página ahora muestra el mapa iFrame insertado. Haz clic en Publicar o Guardar para que aparezca en tu sitio web y visualiza la página para ver cómo queda.
Si esto no coincide con la forma en que editas páginas en WordPress, consulta cómo añadir HTML usando uno de estos editores:
Opción 2: Instalar un plug-in de mapas dedicado para WordPress
En comparación con la Opción 1, un plug-in dedicado de WordPress ofrece más personalización y funcionalidad. Lo instalas en tu sitio de la misma forma que cualquier otro plug-in, creas y pegas tu clave API de Google Maps en los ajustes, y luego añades el elemento de mapa a una página.
Esta opción añade cierta complejidad. Obtener la clave API de Google Maps requiere crear una cuenta en Google Cloud Platform, configurar una cuenta de facturación y seguir un proceso de configuración técnica. Además, los plug-ins de mapas funcionan con un modelo freemium: ofrecen un plan gratuito aceptable con funciones básicas, pero reservan las mejores prestaciones detrás de una licencia de pago único o una cuota anual.
Estás añadiendo más plug-ins, así que comprueba la velocidad de tu sitio web después de completar la configuración. Si alojas tu sitio en un plan económico, demasiados plug-ins pueden ralentizarlo considerablemente, afectando la experiencia de usuario y provocando que los visitantes abandonen la página.
Que el mapa funcione correctamente en dispositivos móviles depende del plug-in y de cómo lo configures. Por ejemplo, WP Go Maps recomienda establecer valores específicos de alto y ancho para evitar una implementación comprimida.
Cómo configurar un plug-in de mapas en WordPress
Para este ejemplo, usaré uno de los plug-ins de Google Maps para WordPress más populares: WP Go Maps.
Configurar WP Go Maps
- Instala y activa WP Go Maps.
- Haz clic en Skip Introduction para finalizar la configuración.
- Haz clic en Settings en el menú del lado izquierdo.
- En la pestaña General, selecciona Google Maps como motor de mapas.
Obtener tu clave API de Google Maps
Para extraer los datos del mapa desde la plataforma de Google, primero necesitas registrarte para obtener una cuenta y conseguir tu clave API.
- Ve al sitio web de Google Maps Platform y crea una cuenta.
- Serás redirigido a un flujo de configuración en Google Cloud Platform. Crea una nueva cuenta de facturación estableciendo un nombre, país y moneda.
- Añade tu información de contacto y método de pago. Cuando termines, haz clic en el botón Submit and Enable Billing.
Con esta opción, obtienes 10 000 cargas de mapa gratuitas al mes; si superas ese límite, el coste es de 7 $ por cada 1000 cargas adicionales. Si te mantienes dentro del límite, nunca se realizará un cargo en tu tarjeta, pero la cuenta de facturación es obligatoria de todas formas. (En marzo de 2025, Google sustituyó su antiguo crédito mensual de 200 $ por una asignación gratuita independiente para cada API; muchos tutoriales antiguos todavía mencionan ese crédito, pero ya no existe.)
- Google te hará algunas preguntas sobre cómo planeas usar el servicio de Maps. Respóndelas y haz clic en Submit.
- Haz clic en Keys & Credentials en el menú del lado izquierdo.
- Haz clic en el menú desplegable Create Credentials y luego en API Key.
- En la ventana modal que aparece, puedes establecer el nombre y los permisos de tu nueva clave API. No es necesario cambiar estos ajustes; desplázate hasta el final y haz clic en Create.
- Copia la clave API.
Es importante restringir tu clave antes de que tu sitio esté en producción. Una clave sin restricciones en el código fuente de tu página puede ser copiada y utilizada para generar cargos en tu cuenta. Sigue las prácticas recomendadas de seguridad de claves API de Google para limitarla a tu dominio.
Finalizar la configuración del plug-in en WordPress
- Vuelve a la página de ajustes del plug-in WP Go Maps en tu instalación de WordPress y pega la clave API en el campo Google Maps API Key. Haz clic en el botón Save Settings después de hacerlo.
- Haz clic en Maps en el menú del lado izquierdo.
- El plug-in ya ha creado el primer mapa por ti. Haz clic en el botón Edit para verlo.
- Aquí es donde configuras cómo se mostrará tu mapa en tu sitio web. Haz clic en la pestaña Markers para empezar a añadir tu negocio.
- Haz clic en el menú de tres puntos y elimina el marcador de mapa predeterminado.
- Haz clic en Add Marker en la parte superior.
- Busca la dirección de tu negocio y selecciónala cuando aparezca en la lista.
- Haz clic en el botón Add Marker para finalizar.
- Tu negocio ahora está marcado en el mapa. Puedes personalizar el nivel de zoom y otros ajustes visuales volviendo atrás y haciendo clic en el botón Settings. Recuerda hacer clic en Save Map en la parte inferior de la pantalla cuando termines.
- Cuando estés listo para colocar tu mapa en una página de tu sitio web, haz clic en el botón Get Shortcode en la parte inferior izquierda. Esto copiará el shortcode en tu portapapeles.
- Ve a la página donde quieres añadir tu mapa, haz clic para agregar un nuevo bloque y escribe Shortcode para filtrar las opciones. Haz clic en él cuando aparezca.
- Pega el shortcode en el campo de entrada y haz clic en Publish o Save.
- Cuando visites la página, el mapa mostrará tu marcador con los ajustes que seleccionaste.
Opción 3: Añadir un widget gratuito y personalizable de Google Maps (recomendado)
El widget de Google Maps de Jotform es un mapa gratuito y totalmente personalizable que no requiere instalar un plug-in ni pagar una licencia. Con él puedes
- Añadir una o varias ubicaciones que se muestren en el mismo mapa.
- Elegir la vista del mapa, incluyendo mapa de carreteras o satélite.
- Adaptar un tema claro u oscuro, con control de radio de esquinas para los cuadros.
- Configurar el tamaño, la disposición y el nivel de zoom del mapa.
En comparación con los iFrames nativos, es personalizable, permite múltiples marcadores en el mismo mapa y es responsive de forma predeterminada. En comparación con un plug-in, no ralentiza tu sitio web y no requiere un plan de pago para desbloquear todas sus funciones.
A pesar de estas ventajas, el widget de Google Maps de Jotform sigue requiriendo una clave API de Google Maps. Tendrás que completar los pasos de configuración y crear una cuenta de facturación con Google.
Cómo añadir el widget de Google Maps de Jotform a tu sitio web
- Visita la página del widget de Google Maps de Jotform. En la mayoría de los casos, la herramienta de configuración se carga automáticamente; si no lo hace, haz clic en Create New Website Widget para comenzar.
- Sigue esta guía sobre cómo obtener tu clave API de Google Maps. Cubre todos los pasos detallados en la Opción 2, así como la forma de restringir tu clave para mantenerla segura. (Recuerda que Google Maps permite 10 000 cargas de mapa gratuitas cada mes. Cada 1000 cargas adicionales cuestan 7 $). Una vez que termines, pega tu clave API de Google Maps en el campo de entrada.
- Ajusta la configuración general a tu gusto. Esto incluye cómo debe verse el mapa y cuántas ubicaciones quieres añadir. Las capturas de pantalla aquí utilizan las oficinas de Jotform en San Francisco y Canadá para mostrar un mapa con múltiples marcadores, pero puedes añadir una sola ubicación o tantas como necesites. Haz clic en Continue cuando termines.
- Modifica los ajustes de estilo como el tema, la fuente o el CSS personalizado. Haz clic en Continue cuando termines.
- Personaliza la disposición y las funciones adicionales en este último paso. Haz clic en Try It on Your Website for Free cuando estés listo.
- Regístrate en una cuenta gratuita de Jotform o inicia sesión en una existente. El código de inserción aparece después de iniciar sesión. Haz clic en Copy Code.
- Añade el código de inserción a tu página con un bloque de HTML personalizado, siguiendo los pasos 7–11 de la Opción 1: inserta el bloque, pega el código y haz clic en Publish o Save.
- Abre la página en tu teléfono. A diferencia del iFrame nativo de la Opción 1, el widget se redimensiona automáticamente para ajustarse a la pantalla, por lo que el mapa que se recortaba en el móvil allí se muestra completo aquí.
Potencia tu sitio WordPress con widgets inteligentes y sin servidor
Incorporar funciones inteligentes a tu sitio web suele implicar pagar por nuevos plug-ins o lidiar con código. Jotform te ayuda a saltarte todo eso: junto con el widget de Google Maps, el directorio de widgets para sitios web de Jotform ofrece más de 150 widgets gratuitos y sin código, configurables simplemente pegando un fragmento HTML sencillo en tu sitio web.
Estas opciones combinan muy bien con el widget de Maps:
- Widget de Horario Comercial: Este widget muestra los horarios de apertura, incluyendo un estado en tiempo real de abierto o cerrado que puedes colocar junto a tu mapa, para que los visitantes que te encuentren en el mapa sepan al instante si estás abierto. No requiere clave API.
- Widget de Reserva de Citas: Añade una función de reservas a tu sitio web para que las personas puedan programar una cita contigo. Este widget permite añadir disponibilidad, listar tus tipos de servicio con duración y precios, y aceptar reservas sin necesidad de una herramienta adicional.
- Widget de Preguntas Frecuentes: Este widget muestra respuestas a preguntas frecuentes en un acordeón con función de búsqueda. Hacer lo mismo en WordPress es sencillo, pero lograr la experiencia pulida que ofrece este widget implicaría lidiar con código o instalar otro plug-in más.
Si tienes un plan de alojamiento WordPress básico, los plug-ins consumen recursos esenciales del servidor, ralentizando tu sitio web y ofreciendo una mala experiencia de usuario a tus visitantes. Los widgets de Jotform se ejecutan en la infraestructura de Jotform, por lo que la carga no la gestiona tu sitio web. Esto libera recursos del servidor, haciendo que tu sitio web sea más rápido y fácil de usar.
¿Quieres llevar tu sitio WordPress al siguiente nivel? Consulta
- Nuestra guía Cómo usar WordPress para aprender a crear un sitio web profesional sin invertir en un curso de diseño web
- La integración de WordPress de Jotform, que optimiza tu recopilación de datos con automatización, pagos y funciones avanzadas en una sola plataforma
Preguntas frecuentes
Sí, puede ralentizar tu sitio web. Un mapa interactivo de Google carga una gran cantidad de JavaScript, entre 100 KB y 2 MB. En una prueba independiente, una sola inserción redujo la puntuación de velocidad de página en un 14 por ciento, aumentando el tiempo hasta que el sitio web estaba listo para interactuar en 6,5 segundos. Para evitar ralentizaciones, carga el script del mapa solo en la página que lo utiliza, aplica carga diferida (lazy-load) al iFrame o añade una imagen de marcador de posición con clic para cargar.
Sí, pero no con la inserción básica mediante iFrame. Para múltiples marcadores, crea un mapa en Google My Maps: coloca tus marcadores, configúralo como público, copia el código de inserción y pégalo en tu sitio web. Aunque puedes colocar tantos como quieras, no puedes personalizar el estilo del mapa ni añadir paneles de detalle personalizados. Si quieres múltiples marcadores y funciones de personalización, el widget de Google Maps de Jotform hace el trabajo (solo necesita tu clave API de Google Maps).
Sí. Muchos plug-ins de Google Maps para WordPress tienen planes gratuitos funcionales que cubren mapas básicos, aunque las funciones avanzadas suelen estar reservadas para el plan de pago. Si prefieres no instalar un plug-in, el iFrame nativo de Google Maps y Google My Maps son opciones gratuitas. El widget de Google Maps de Jotform también es gratuito, añadiendo personalización y mapas con múltiples marcadores que no aumentan la carga del servidor, pero sigue requiriendo una clave API de Google Maps.
Este artículo está dirigido a propietarios de sitios WordPress, negocios locales, agentes inmobiliarios y organizadores de eventos que desean comparar formas de añadir un mapa interactivo y adaptable a dispositivos móviles mediante inserciones, plug-ins o widgets personalizables.
Enviar Comentario: