Hace unas semanas, necesité incrustar un Google Map en WordPress para la página de destino de un cliente local. Querían que los clientes pudieran encontrar su tienda física fácilmente, pero yo no quería ralentizar su sitio ni pelearme con el código.
Si has estado en la misma situación, sabes lo frustrante que puede ser. Por eso, en este tutorial te mostraré tres formas sencillas de añadir Google Maps a WordPress. He utilizado cada método en proyectos reales, así que te guiaré sobre lo que funciona mejor para páginas de destino, entradas de blog e incrustaciones únicas.
Resumen de métodos para incrustar Google Maps en WordPress:
¿Antes de empezar, cuáles son los beneficios de incrustar mapas interactivos en tu sitio?
Por qué importa incrustar Google Maps en WordPress
Ya sabes que incrustar Google My Maps en tu sitio es una excelente manera de hacerlo interactivo. Pero hay varios beneficios más que pueden ayudar a tu negocio a crecer.
Por ejemplo, un mapa de Google incrustado puede:
- Ayudar a los clientes a encontrar una tienda cerca de donde viven con la vista de calle
- Mostrar a los asistentes la ubicación física de un evento
- Ilustrar entradas de blog que discuten ubicaciones específicas
- Mostrar la ubicación de tu sede central
Con un poco de creatividad, puedes usar los mapas interactivos de Google para dar vida a tu sitio web. Y como resultado, servir tanto al crecimiento de tu negocio como a tus clientes potenciales.
¿Necesitas una clave API de Google Maps?
Antes de incrustar un mapa de Google en tu sitio de WordPress, es una buena idea crear una clave API de Google Maps, que Google ahora requiere. Para obtener una clave API de Google, sigue los pasos a continuación.
1. Ve a la Consola de Google Cloud Platform. Puedes crear una cuenta gratuita si aún no tienes una.
2. Selecciona un proyecto existente o crea uno nuevo
3. Elige la API de incrustación de mapas y haz clic en Habilitar en la siguiente pantalla.
4. Ahora navega a la barra lateral de Credenciales, haz clic en la opción +Crear credenciales y selecciona Clave de API.
Ahora deberías tener una clave API activa para Google Maps.
Cómo incrustar Google Maps en WordPress (3 métodos)
Ahora vamos a mostrarte cómo incrustar Google Maps en WordPress.
Método 1: Incrustar Google Maps en páginas de destino de WordPress con SeedProd
El primer método de este tutorial te muestra cómo incrustar mapas de Google en una página de destino en WordPress. Las páginas de destino son la mejor manera de convertir el tráfico dirigido en clientes potenciales y ventas.
Y el mejor plugin de páginas de destino de WordPress para esta tarea es SeedProd.
SeedProd es un creador de páginas de destino de arrastrar y soltar que te permite crear páginas de destino y temas de WordPress de alta conversión sin escribir código. Viene con cientos de plantillas de página de destino responsivas que puedes personalizar fácilmente en el editor visual de front-end.
Además, SeedProd tiene toneladas de bloques de contenido inteligentes para agregar contenido fácil de usar a tu página, que incluyen:
- Mapas de Google
- Formularios de contacto
- Botones de llamada a la acción
- Tablas de precios
- Carruseles de imágenes
- Testimonios
- Acordeones de preguntas frecuentes
- Texto dinámico
- Titulares animados
- Formularios de suscripción
- Y más
Como resultado, puedes crear páginas de destino rápidamente sin contratar a un desarrollador.
Sigue los pasos a continuación para aprender cómo incrustar Google Maps en páginas de destino de WordPress con SeedProd.
1. Descarga el plugin SeedProd Landing Page
Para crear tu primera página, haz clic en el botón Crear nueva página de destino.
Así que haz clic en el botón de abajo para empezar.
A continuación, instala y activa SeedProd en tu sitio web. Si necesitas ayuda con esto, puedes seguir esta guía paso a paso para instalar plugins de WordPress.
Una vez que hayas instalado SeedProd, verás una pantalla de bienvenida pidiéndote tu clave de licencia.
Puedes encontrar tu clave iniciando sesión en tu cuenta de SeedProd y haciendo clic en el enlace Ver clave de licencia, detalles y descargas.
Después de copiar tu clave, pégala en el campo Clave de licencia en la pantalla de bienvenida de SeedProd y haz clic en el botón Verificar clave.
2. Crea una nueva página de destino
Ahora puedes empezar a crear tu primera página, así que desplázate hacia abajo en la pantalla de bienvenida y haz clic en el botón Crear tu primera página. Después de hacer clic en ese botón, irás al panel de control de páginas de destino de SeedProd.
En esta página, primero verás los diferentes modos de página de destino disponibles en SeedProd, que incluyen:
- Próximamente
- Modo de Mantenimiento
- Iniciar sesión
- 404
Los modos de página de SeedProd te permiten activar diferentes páginas de destino con un solo clic rápidamente.
Por ejemplo, puedes activar rápidamente una pantalla de mantenimiento cuando estés realizando actualizaciones menores. O puedes activar una pantalla de inicio de sesión personalizada de WordPress para dar la bienvenida a los usuarios registrados.
El principal beneficio de los modos de página es que no necesitarás instalar plugins de WordPress por separado para obtener esta funcionalidad. SeedProd lo tiene todo integrado en un único plugin compacto.
Debajo de la sección de modos de página hay una lista de todas las páginas que creas con SeedProd. Por ahora, no verás ninguna página listada.
Para crear tu primera página, haz clic en el botón Crear nueva página de destino.
Hacer clic en el botón te lleva a la pantalla de plantillas de páginas de destino de SeedProd. Aquí verás cientos de plantillas diseñadas profesionalmente que puedes usar como base para el diseño de tu página.
En la parte superior hay diferentes pestañas para filtrar los diseños, como:
- Próximamente
- Modo de Mantenimiento
- Página 404
- Ventas
- Seminario web
- Captación de Leads
- Gracias
- Iniciar sesión
Coloca el ratón sobre cualquier diseño que te guste y haz clic en el icono de la marca de verificación para importar esa plantilla.
Usaremos la plantilla Oportunidades para esta guía, que puedes encontrar bajo el encabezado Lead Squeeze.
Después de hacer clic en el icono de la marca de verificación para importar tu plantilla, verás una ventana emergente pidiéndote que introduzcas un nombre para la página de destino. Dado que el nombre de tu página se asigna automáticamente a tu URL de la página de destino, asígnale un nombre que tenga sentido para tus visitantes.
Puedes cambiar fácilmente esta configuración más tarde si cometes un error. Así que adelante y haz clic en el botón Guardar y empezar a editar la página.
3. Personaliza el diseño de tu página
Cuando importes tu diseño, se abrirá en el editor visual de páginas de SeedProd. El editor tiene un diseño de 2 paneles fácil de usar para hacer que la personalización de tu página sea súper sencilla:
- Panel izquierdo: Bloques y secciones de página para construir y personalizar tu página
- Panel derecho: Vista previa de cómo se ve tu página de destino en tiempo real
En la parte superior del editor hay un menú de navegación para cambiar rápidamente entre tu diseño, integraciones y la configuración de la página.
Y en la parte inferior del panel izquierdo hay varios iconos más para ayudarte a navegar por tu página, que incluyen:
- Configuración global: Controla los colores, fuentes y el fondo de tu página de forma global
- Navegación de diseño: Navega rápidamente a diferentes partes de tu diseño
- Historial de revisiones: Obtén una vista previa y restaura una versión anterior de tu diseño
- Deshacer y Rehacer: Deshaz cambios de diseño o rehazlos rápidamente
- Vista previa móvil: Obtén una vista previa del diseño móvil de tu página de destino
La configuración anterior facilita la personalización de tu plantilla para que se adapte a tu marca, contenido y objetivos de marketing.
Por ejemplo, al hacer clic en un encabezado de página, puedes cambiar el color del texto y ver los cambios más rápidamente en tiempo real.
O, si deseas cambiar las imágenes predeterminadas, simplemente puedes hacer clic en una imagen para ver la configuración a la izquierda. Luego puedes reemplazarla con una de tu ordenador, la biblioteca de medios o elegir una foto de stock gratuita.
4. Incrustar el bloque de página de destino de Google Maps
Añadir un widget de Google Maps a tu página de destino es sencillo.
Desde el panel izquierdo, haz clic en el bloque Google Maps. Luego puedes arrastrarlo a la sección de la página donde quieras que vaya.
Al hacer clic en la configuración del bloque de Google Maps, puedes introducir rápidamente la ubicación que deseas mostrar. Luego puedes elegir el nivel de zoom del mapa, cambiar la alineación y ajustar el ancho del mapa.
Seleccionar la pestaña Avanzado te permite elegir diferentes estilos de borde y ajustar el espaciado alrededor de tu mapa personalizado.
Continúa personalizando tu página de destino hasta que estés satisfecho con su aspecto. Recuerda hacer clic en el botón verde Guardar en la esquina superior derecha para almacenar tus cambios.
5. Configura tus ajustes
Con tu diseño en su lugar, hay algunos ajustes que puedes configurar antes de publicar tu página de destino.
SeedProd te permite conectar tu página de destino a tu lista de correo fácilmente. Así que, haz clic en Conectar en la parte superior de la pantalla para ver servicios populares de marketing por correo electrónico. Esto facilita pedir a los usuarios que se suscriban a tu boletín y añadirlos automáticamente a tu lista de correo.
Después de conectar tu lista de correo, haz clic en la pestaña Configuración de página para más opciones.
SeedProd ofrece 5 ajustes que puedes configurar, pero esto a menudo depende del tipo de página que crees y de tu plan actual de SeedProd.
- General: Edita el nombre y la URL de tu página o cambia entre publicado y borrador.
- SEO: Configura tus ajustes de SEO con un plugin de WordPress SEO.
- Analíticas: Rastrea el rendimiento de tu página con un plugin de Google Analytics.
- Scripts: Añade scripts personalizados a la cabecera, cuerpo y pies de página de tu página, como píxeles de seguimiento y retargeting.
- Dominio personalizado: Asigna a cualquier página de destino un dominio personalizado que no esté conectado a tu sitio web existente.
Después de configurar tus ajustes, guarda los cambios y vuelve a la pestaña Diseño.
6. Publica tu página de destino
Antes de publicar tu página, es importante asegurarte de que tu diseño sea compatible con dispositivos móviles. Si no lo es, los usuarios móviles tendrán dificultades para navegar por tu página y podrías perder clientes potenciales y conversiones.
Por suerte, SeedProd incluye una opción de vista previa para móviles para comprobar que tu página es compatible con dispositivos móviles. Simplemente haz clic en el icono del móvil en la parte inferior de tu pantalla.
Desde allí, puedes ver cómo se ve tu página en dispositivos móviles y cambiar cualquier cosa que no se vea o funcione correctamente.
Cuando todo se vea bien, haz clic en la flecha hacia abajo junto al botón verde Guardar y haz clic en Publicar.
A continuación, verás una ventana que te indica que tu página ha sido publicada.
Para ver una vista previa en vivo, adelante y haz clic en el botón Ver página en vivo.
Y aquí tienes una vista previa de cómo se ve tu mapa de Google:
¡Buen trabajo! Ahora sabes cómo añadir un mapa de Google a tu página de destino de WordPress.
¿Pero qué pasa si necesitas añadir el mapa a tus entradas y páginas de WordPress? Te mostraremos cómo hacerlo a continuación.
Método 2: Añadir Mapas de Google en Entradas y Páginas de WordPress Usando un Plugin
Recomendamos usar este método si los mapas juegan un papel importante en tu negocio y necesitas usarlos en múltiples entradas y páginas de tu sitio. De nuevo, usaremos un plugin de WordPress, y esta vez, usaremos MapPress Maps for WordPress, un plugin gratuito de Google Maps para wp.
Así que procede a instalar y activar el plugin en tu panel de WordPress para empezar. Luego haz clic en editar en la entrada o página en la que te gustaría incrustar el mapa.
Dentro de tu entrada o página, haz clic en el icono más (+) en el editor de bloques (Gutenberg) para añadir un nuevo bloque de WordPress. Desde allí, busca el bloque Mapa de MapPress y haz clic en él para añadir el mapa a tu entrada.
Ahora haz clic en el botón Biblioteca de Mapas y, en la siguiente pantalla, selecciona Añadir Nuevo.
En la siguiente pantalla, puedes escribir tu ubicación de mapa preferida en la barra de búsqueda y hacer clic en Guardar.
A continuación, haz clic en el enlace Insertar en la Entrada para añadir tu mapa a tu editor de WordPress.
Ahora puedes usar el panel desplegable Ajustes del Mapa en el lado derecho para alterar el tamaño y el zoom de tu mapa de Google.
Después, haz clic en Actualizar o Publicar para guardar tus cambios y previsualizar cómo se ve tu nuevo mapa.
Método 3: Incrustar un Mapa de Google manualmente en WordPress Usando un iFrame
Por supuesto, puedes añadir un mapa de Google a tu sitio de WordPress sin usar un plugin. Necesitas visitar el sitio web de Google Maps y buscar la ubicación que deseas mostrar para hacer esto, como tu localizador de tiendas.
Desde allí, haz clic en el icono de compartir y haz clic en la pestaña Incrustar un mapa que aparece en la ventana emergente. Luego haz clic en el botón Copiar HTML.
Ahora haz clic en editar en cualquier entrada o página en WordPress. Dentro del editor de bloques de WordPress, haz clic en el icono más (+) para añadir un nuevo bloque y elige la opción HTML Personalizado, que te permite añadir código como iframes, shortcodes y más.
A continuación, pega el código de incrustación de Google Maps dentro del bloque HTML Personalizado y haz clic en Actualizar para guardar la entrada.
Cuando previsualices tu publicación, tu mapa debería verse de forma similar al ejemplo que aparece a continuación.
Preguntas frecuentes sobre cómo incrustar Google Maps en WordPress
Ahora conoces tres formas sencillas de incrustar Google Maps en WordPress. Puedes usar un creador de páginas de destino, un plugin o una incrustación manual con un iframe.
Si deseas la forma más rápida de poner un mapa en tu sitio y controlar el diseño, te recomiendo usar SeedProd. Es la misma herramienta que uso para todas las páginas de destino de mis clientes porque es rápida, flexible y funciona con cualquier tema de WordPress.
¿Listo para probarlo? Empieza hoy mismo con SeedProd y añade un Google Map totalmente personalizado a tu sitio en minutos sin tocar código.
Si te ha gustado este artículo, también podría interesarte esta guía sobre cómo editar el pie de página de tu WordPress. Alternativamente, echa un vistazo a estos mejores proveedores de hosting de WordPress.
Gracias por leernos. Síguenos en YouTube, Twitter y Facebook para obtener más contenido útil para hacer crecer tu negocio.
