¿Le gustaría crear un mapa con múltiples ubicaciones en WordPress con Elementor y complementos esenciales?
Suponga que tiene un negocio que ya tiene varias sucursales en la ciudad y desea crear un mapa digital que muestre la ubicación de esas sucursales. Si tiene un sitio web basado en WordPress, puede crear un mapa de este tipo sin esfuerzo. Hay un excelente complemento que puede usar para crear un mapa de ubicaciones múltiples: Complementos Esenciales.
Complementos Esenciales es un complemento Elementor premium por lo que también necesitas instalar Elementor antes de poder usarlo. Puede utilizar la versión gratuita de Elementor para crear una tarjeta con el módulo Complementos esenciales.
La versión gratuita de complementos esenciales también está disponible. Sin embargo, el widget para crear un mapa solo está disponible en la versión de pago. Puede descargar la versión paga de Essential Addons en su sitio web oficial.
Usaremos la plataforma Google Maps para crear un mapa en tu WordPress usando Essential Addons. Antes de comenzar, asegúrese de instalar Elementor y Essential Addons.
Integre Google Maps con el módulo Complementos esenciales
Antes de que pueda agregar un mapa de Google Maps con complementos esenciales, primero debe integrarlos. Necesita una clave de API para integrar Google Maps con módulos de complementos esenciales.
Primero, visite el Consola API de Google e inicie sesión con su cuenta de Google. Cree un nuevo proyecto haciendo clic en el menú desplegable en la parte superior y haga clic en NUEVO PROYECTO.
Asigne un nombre a su nuevo proyecto y haga clic en el botón CREAR .
Una vez que haya creado su nuevo proyecto, selecciónelo en el menú desplegable y haga clic en Biblioteca en el panel izquierdo.
Google divide la API de Google Maps Platform en 17 tipos. Puedes verlos pinchando en el enlace MOSTRAR TODO en la sección Tarjetas. Debe habilitar las API según lo que desee lograr.
Descubre también: Cómo crear una plantilla personalizada de un solo producto en WooCommerce con Elementor
En nuestro caso, debe habilitar las siguientes API para agregar un mapa de Google Maps usando complementos esenciales.
- API de indicaciones
- API de geocodificación
- API de JavaScript de Maps
- API de Places
Para activar una API, seleccione la API que desea activar (haciendo clic en ella) y haga clic en el botón ACTIVAR.
Una vez que haya completado la habilitación de las API requeridas, regrese al panel principal de la Consola API de Google y haga clic en identificadores en el panel izquierdo. Haga clic en el botón Crear credenciales y seleccione Clave API. Copie la clave API en la ventana emergente que aparece.
Inicie sesión en su panel de WordPress y haga clic en Complementos Esenciales en el panel izquierdo. Haga clic en la pestaña Elements y desplácese hacia abajo en la sección Mapa avanzado de Google. Haga clic en Ajustes y pegue la clave API que acaba de copiar.
Haga clic en el botón GUARDAR AJUSTES para aplicar el nuevo cambio.
Empezar a crear el mapa
Una vez que Google Maps y los complementos esenciales estén integrados, puede comenzar a crear el mapa. Para hacer esto, cree una nueva página (Páginas – > Agregar ) o un nuevo artículo (Artículos – > Agregar) y edítelo con Elementor.
Antes de crear la página, configure el diseño haciendo clic en el ícono de ajustes en la esquina inferior izquierda para abrir el panel de Configuración. Establece el diseño desde el menú desplegable.
Cree una nueva sección haciendo clic en el botón más en el cuadro de edición. Para tener un área más amplia para el mapa, puede seleccionar la estructura de una sola columna. Arrastra el widget Mapas de Google de EA desde el panel izquierdo al área de edición.
Vaya al panel izquierdo y establezca el tipo de tarjeta en marcador múltiple.
Abre la seccion Configuración de marcadores de mapa y haga clic en el marcador de mapa existente para editarlo. Pegue la latitud y la longitud de la primera ubicación que desee agregar al mapa. También establezca el título, así como la descripción.
Para obtener la latitud y la longitud de una ubicación, abra Google Maps y busque la ubicación (lugar) cuya latitud y longitud desea obtener. Una vez encontrado, haga clic con el botón derecho del mouse y un clic izquierdo en el número que aparece en el menú contextual.
Por lo tanto, esta acción le permite copiar la latitud (el primer valor) y la longitud (el segundo valor).
Cuando termine de agregar la latitud y la longitud de la primera ubicación, haga clic en el botón AÑADIR UN ELEMENTO para agregar otra ubicación a su mapa.
Abra Google Maps nuevamente y busque la nueva ubicación que desea agregar al mapa y copie la longitud y la longitud y péguelos en los campos respectivos como el de arriba. Repita los pasos anteriores para agregar más ubicaciones al mapa.
Lea también: Cómo usar el widget de publicaciones de Elementor
Cuando termine de agregar ubicaciones, abra el bloque Controles de mapa para habilitar/deshabilitar los comandos que desea proporcionar en su tarjeta. También puede establecer el nivel de zoom aquí.
También puedes abrir el bloque. Tema del mapa para seleccionar el tema de Google Maps que desea utilizar.
Hasta ahora ha creado con éxito un mapa con varias ubicaciones. Puedes abrir la pestaña Estilo para definir la altura y la anchura del mapa.
Si desea tener un mapa de ancho completo, establezca la sección que contiene el mapa en ancho completo. Para hacer esto, haga clic en el controlador de la sección.
En pestaña y bloque Disposición establecer el ancho del contenido en ancho completor y el espacio entre columnas en Sin desviación
Haga clic en el botón PUBLICADOER en la parte inferior del panel izquierdo para publicar su página.
Incrustar el mapa en una página o publicación
Si por alguna razón prefiere incrustar su mapa en una página/publicación (la página/publicación creada con el editor predeterminado de WordPress — Gutenberg), puede usar el Plugin de WordPress Bloques Elementor para Gutenberg. Este complemento convertirá una plantilla de Elementor en un bloque de Gutenberg.
Para guardar el mapa que acaba de crear como plantilla de Elementor, haga clic en el icono de flecha junto al botón PUBLICAR / ACTUALIZAR y seleccione Guardar como plantilla.
Dale un nombre a tu modelo y haz clic en el botón AHORRAR.
A continuación, cree una nueva página o publicación (asegúrese de haber instalado el Complemento Elementor Bloques para Gutenberg). Agregue un nuevo bloque y seleccione biblioteca Elementor y seleccione la plantilla que acaba de crear.
Nota: Si ve el mensaje "Solo para fines de desarrollo" al agregar una tarjeta, asegúrese de habilitar su facturación de Google Cloud. La nueva política de Google requiere que los desarrolladores activen la cuenta de facturación (todavía puede usar la API de Google Maps de forma gratuita).
¡Consigue Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo crear un mapa con múltiples ubicaciones con Elementor. Si tiene alguna inquietud sobre cómo llegar, hágaselo saber en el comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
