Agregar varios mapas de Google en una página de WordPress es una de las formas más sencillas de mostrar a los visitantes todas tus ubicaciones sin enviarlos a páginas separadas.
Me ha pasado a mí mismo al gestionar diferentes ubicaciones para un negocio local. Cada lugar necesitaba su propio mapa y no quería que la gente hiciera clic solo para obtener indicaciones.
En esta guía, te mostraré dos formas sencillas para principiantes de hacerlo. Una utiliza un constructor de páginas con un bloque de Google Maps de arrastrar y soltar. La otra utiliza directamente el código de inserción gratuito de Google Maps.
Lo que necesitarás: Un sitio de WordPress con acceso de administrador y una cuenta gratuita de Google. Si deseas utilizar el método de arrastrar y soltar, también necesitarás SeedProd Pro.
Método 1. Agregar varios mapas de Google en una página con SeedProd
El primer método de este tutorial te muestra cómo agregar varios 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. Por lo tanto, si estás promocionando un evento o descuentos en tiendas locales, una página de destino con varios mapas es la forma ideal de atraer gente.
Y el mejor plugin de páginas de destino para WordPress para este trabajo es SeedProd.
SeedProd es un constructor visual de páginas de destino y sitios web para WordPress que te permite crear páginas de alta conversión sin escribir código. Viene con cientos de plantillas de página de destino responsivas que puedes personalizar en el editor de arrastrar y soltar.
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
- Botones de llamada a la acción
- Tablas de precios
- Carruseles de imágenes
- Testimonios
- Texto dinámico
- Titulares animados
- Formularios de suscripción
- Y más
Eso significa que puedes crear cualquier página rápidamente sin contratar a un desarrollador.
Sigue los pasos a continuación para aprender cómo agregar mapas de Google en una página en WordPress con SeedProd.
Tutorial en vídeo
Paso 1. Descargar el plugin de página de destino SeedProd
Primero, visita el sitio web de SeedProd y descarga el plugin SeedProd a tu computadora.
Si bien SeedProd tiene una versión gratuita, usaremos SeedProd Pro para este tutorial. De esa manera, podemos usar el bloque de Google Maps.
Después de descargar el plugin, instálalo y actívalo en tu sitio web. Si necesitas ayuda con este paso, sigue 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. Ingresa tu clave y haz clic en el botón Verificar clave para activar tu licencia.
Nota: 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.
Paso 2. Crear una nueva página de destino
Después de activar tu clave de licencia, desplázate hacia abajo en la pantalla de bienvenida y haz clic en el botón Crear tu primera página.
Desde allí, te dirigirás al panel de páginas de destino de SeedProd.
En esta página, hay varios modos de página de destino, que incluyen:
- Próximamente
- Modo de Mantenimiento
- Iniciar sesión
- 404
Y con esos modos de página, puedes activar diferentes páginas de destino con un solo clic. Por ejemplo, puedes activar el modo de mantenimiento cuando estés realizando actualizaciones menores.
Debajo de la sección de modos de página, haz clic en el botón Crear Nueva Página de Destino para crear tu primera página.
En la siguiente pantalla, puedes elegir entre cientos de plantillas de páginas de destino prediseñadas. Simplemente haz clic para seleccionar una plantilla y usarla como punto de partida.
Después de elegir una plantilla, se abre una ventana emergente pidiéndote que nombres tu página e introduzcas la URL.
Desde allí, haz clic en el botón Guardar y Empezar a Editar la Página para lanzar tu plantilla.
Paso 3. Personaliza tu Página de Destino
Cuando lances tu diseño, se abrirá en el constructor de páginas de SeedProd. El editor tiene un diseño de 2 paneles fácil de usar para que sea sencillo personalizar tu página:
- Panel izquierdo: Bloques y secciones para construir y personalizar tu página
- Panel derecho: Vista previa en vivo de 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 configuraciones.
Y en la parte inferior del panel izquierdo hay varios iconos más para deshacer y rehacer cambios, cambiar a vista previa móvil y más.
Estas configuraciones facilitan la personalización de tu diseño para alcanzar tus objetivos de página de destino. Por ejemplo, al hacer clic en un encabezado de página, puedes cambiar el contenido, el color y ver los cambios en tiempo real.
O, para reemplazar las imágenes de la plantilla predeterminada, puedes hacer clic en cualquier imagen y reemplazarla con una de tu computadora, de la biblioteca de medios o elegir una foto de stock gratuita.
Continúa personalizando tu diseño hasta que estés satisfecho con cómo se ve todo. Y no olvides hacer clic en el botón Guardar en la esquina superior derecha.
Paso 4. Añade Múltiples Mapas de Google a tu Página de Destino
Añadir múltiples mapas de Google a tu página de destino es fácil con el bloque de Mapas de Google integrado de SeedProd.
Primero, añadamos algunas columnas para albergar cada mapa. Desde el panel izquierdo, haz clic en el bloque Columna y arrástralo a una sección de tu página.
Ahora elige cuántas columnas quieres mostrar. Para esta guía, elegimos el diseño de 3 columnas.
Ahora estás listo para añadir Mapas de Google a cada columna.
Para hacerlo, haz clic en el bloque Mapas de Google y arrástralo a la primera columna.
Al hacer clic en la configuración del bloque, se abre un panel donde puedes introducir tu ubicación elegida. Luego puedes elegir el zoom del mapa, cambiar la alineación y ajustar el ancho.
Además, puedes elegir diferentes estilos de borde y ajustar el espaciado alrededor de tu mapa personalizado en la pestaña Avanzado.
Ahora repite este paso para cada mapa que desees añadir a tu página de destino.
Paso 5. Publica tu Página de Destino con Mapas de Google
Cuando estés satisfecho con cómo se ve tu página de destino, haz clic en la flecha hacia abajo junto al botón verde Guardar y haz clic en Publicar.
A continuación, verá una ventana que le indica que su página se ha publicado. Para ver una vista previa en vivo, haga clic en el botón Ver página en vivo.
Método 2. Añadir manualmente varios mapas de Google en una página de WordPress
El segundo método de esta guía consiste en copiar y pegar el código de inserción de la API de Google Maps y pegarlo en una entrada o página de WordPress en lugar de utilizar un plugin de mapas.
La desventaja de este método es que necesitará encontrar el código de inserción para cada mapa que desee mostrar. También requiere que cambie de su sitio de WordPress a los mapas de Google y viceversa.
Además, la inserción de mapas directamente en WordPress limita las opciones de personalización. Por lo tanto, no tendrá el control avanzado de diseño que obtiene con un constructor de páginas de WordPress como SeedProd.
Aquí están los pasos para insertar varios mapas de Google manualmente con el código de inserción.
Paso 1. Encuentra y comparte tu ubicación en Google Maps
Primero, diríjase a Google Maps y escriba la primera dirección que desea insertar.
Después de encontrar su ubicación, haga clic en el icono Compartir para mostrar la configuración para compartir de Google Maps.
Ahora haga clic en la pestaña Insertar, elija un tamaño de mapa del menú desplegable y haga clic en el enlace 'Copiar HTML'.
Paso 2. Añadir el código de inserción en WordPress
A continuación, vaya a su panel de WordPress y cree una nueva página.
Dentro del editor de WordPress, haga clic en el icono Más (+) para añadir un nuevo bloque de WordPress y haga clic en el bloque HTML personalizado.
Ahora pegue el código de inserción de Google Maps en el bloque HTML. Y si hace clic en el botón Vista previa, puede ver cómo queda su mapa.
Paso 3. Insertar más mapas de Google
Ahora que sabe cómo añadir un mapa, añada más siguiendo los mismos pasos. Simplemente elija una ubicación de mapa diferente, copie el código de inserción y añádalo en un nuevo bloque HTML en su página de WordPress.
Después de añadir todos sus mapas a la página, haga clic en Publicar. Luego, cuando previsualice la página, verá cada mapa insertado en una sola pantalla.
¿Cómo añado varias ubicaciones a un mapa en WordPress?
A estas alturas, ya sabe cómo añadir varios mapas de Google en una página de WordPress. Pero, ¿y si quiere añadir varios marcadores en un solo mapa e insertarlo en su sitio de WordPress?
Afortunadamente, puede hacerlo con el método de inserción de mapas que mencionamos anteriormente. Sin embargo, hay algunos pasos más que destacamos a continuación.
Paso 1. Crear un mapa personalizado de Google
Primero, vaya a Google Maps, abra el menú y haga clic en el enlace 'Tus sitios'.
Desde allí, haga clic en la pestaña Mapas y haga clic en 'Crear mapa' en la parte inferior de la página.
Haga clic en la etiqueta llamada 'Mapa sin título' y póngale un nombre sensato a su mapa. Repita este paso para el encabezado 'Capa sin título'.
Paso 2. Marcar las ubicaciones de su mapa
Ahora puede introducir su ubicación en la barra de búsqueda para buscarla en el mapa. Y una vez que la haya encontrado, haga clic en el enlace + Añadir al mapa para colocar un marcador en ese lugar.
Repita este paso para cada ubicación que desee añadir a su mapa.
Paso 3. Compartir su mapa
Para incrustar tu mapa en WordPress, primero debes hacerlo público; de lo contrario, no podrás acceder al código de incrustación. Así que haz clic en el icono ‘Compartir’.
Ahora activa los siguientes ajustes:
- Cualquier persona con este enlace puede ver
- Permite que otros busquen y encuentren este mapa en internet
Después de compartir tu mapa, haz clic en los 3 puntos en la esquina superior derecha y selecciona la opción “Incrustar en mi sitio”.
Desde allí, puedes copiar el código de incrustación personalizado de Google Maps.
Paso 4. Incrusta tu mapa en WordPress
El último paso es añadir tu mapa con varias ubicaciones a una nueva página de WordPress. Así que crea una nueva página, elige el bloque HTML personalizado y pega tu código de incrustación.
Ahora, cuando hagas clic en Publicar y previsualices tu página, verás solo 1 mapa con varios marcadores personalizados.
Preguntas frecuentes sobre cómo agregar mapas de Google en WordPress
¿Necesito una clave API de Google Maps para incrustar un mapa en WordPress?
No, no para el método básico de incrustación. Cuando usas la opción Compartir > Incrustar en Google Maps, el código iframe funciona sin una clave API. Solo necesitas una clave API si usas un plugin de mapas que se conecta a través de la API de Google Maps, o si quieres crear un mapa personalizado con la API de JavaScript.
¿Ralentizarán varios Google Maps en una página mi sitio web?
Cada mapa incrustado carga su propio iframe, por lo que añadir varios mapas puede aumentar el tiempo de carga de la página. Recomiendo mantenerlo en 3-4 mapas por página. Si necesitas más, considera usar un solo mapa con varios pines en su lugar. También puedes añadir loading=”lazy” a cada iframe para que los mapas solo se carguen cuando el visitante se desplace hacia ellos.
¿Puedo personalizar la apariencia de mis Google Maps incrustados?
El método básico de incrustación te ofrece opciones limitadas. Puedes elegir un tamaño pequeño, mediano, grande o personalizado al copiar el código de incrustación. Para un mayor control sobre los colores de los pines, las ventanas de información y el estilo del mapa, usa Google My Maps para crear primero un mapa personalizado y luego incrusta ese. El bloque de Google Maps de SeedProd también te permite ajustar el zoom, la alineación y los bordes.
¿Es gratuito usar Google Maps en sitios web de WordPress?
Sí, incrustar Google Maps con un iframe es completamente gratuito y sin límites de uso. Si usas la API de Google Maps a través de un plugin, Google te da 200 $ en créditos gratuitos cada mes. Eso cubre aproximadamente 28.000 cargas de mapas, lo cual es más que suficiente para la mayoría de los sitios de pequeñas empresas.
Ahora conoces dos formas sencillas de añadir varios Google Maps en una página en WordPress. Si deseas un control total sobre tu diseño y un flujo de trabajo más rápido, el constructor de arrastrar y soltar de SeedProd es la opción más fácil.
Con SeedProd, puedes añadir mapas, detalles de contacto y cualquier otro elemento que necesites en solo unos pocos clics, sin necesidad de código. Comienza hoy mismo y crea una página profesional en minutos.
También puedes encontrar útiles las siguientes guías de WordPress:
- Cómo añadir CSS personalizado en WordPress
- Cómo añadir una sombra de caja en WordPress
- C ilde;omo a tilde;adir una galer ilde;a a p ilde;aginas y entradas de WordPress
- Cómo ocultar títulos de página en WordPress
- Cómo cambiar los márgenes en WordPress
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
