¿Le gustaría saber cómo crear un mapa con múltiples pines usando Jet Elements?
Elementos de chorro ofrece un widget llamado Mapa avanzado. A diferencia del widget Google mapas nativosElementor que admite solo una ubicación, Jet Elements Advanced Map Widget le permite crear un mapa con múltiples pines.
Para utilizar este widget, primero debe integrar Jet Elements con Google Mapas usando una clave API.
Jet Elements Advanced Map Widget es bastante útil si tiene una empresa con varias sucursales en la ciudad y desea crear un mapa que muestre la ubicación de sus sucursales. Este widget también es útil para crear algo así como un mapa de las atracciones turísticas de una ciudad.
Aquí se explica cómo usar este widget.
Paso 1: integre JetElements con Google Maps
Como se mencionó, necesita una clave API Google Maps para integrar Jet Elements con Google Maps. Puede obtener una clave API a través de la consola API de Google.
Así que visita Consola API de Google e inicie sesión con su cuenta de Google. Si aún no tiene un proyecto, cree uno nuevo haciendo clic en el menú desplegable en la parte superior y haga clic en NUEVO PROYECTO en la ventana emergente que aparece.
Dale un nombre a tu proyecto y haz clic en el botón CREAR .
Una vez que haya creado su nuevo proyecto, selecciónelo a través del menú desplegable en la parte superior del tablero de la Consola API de Google, luego haga clic en Biblioteca en el panel izquierdo.
Google divide la API de Google Maps en 17 tipos. Debe habilitar las API requeridas por el widget de mapas avanzados de Jet Elements para usar este widget. Crocoblock, el desarrollador de Jet Elements, no proporciona información detallada sobre las API requeridas. Según nuestra experiencia, hemos habilitado las siguientes API:
- API de indicaciones
- API de geocodificación
- API de JavaScript de Maps
- API de Places
Puede hacer clic en el enlace VER TODO en la sección Tarjetas para verlos todos.
Para activar una API, seleccione la API en cuestión (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.
A continuación, inicie sesión en su panel de WordPress y vaya a JetPlugins -> Configuración de JetElements.
Click en la pestaña integraciones y pegue su clave API en el campo Clave API de Google Maps en la sección Google Maps. Activar la opción Clave API de geocodificación separada y pegar el mismo código en Clave API de geocodificación.
Paso 2: Crea el mapa
Una vez que Jet Elements y Google Maps se integran con éxito, 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 modificarlo con Elementor.
en el editor Elementor, configure el diseño antes de comenzar. Para hacer esto, abra el panel Configuración de página haciendo clic en el ícono de ajustes en la esquina inferior izquierda. Seleccione un diseño en el menú desplegable debajo de la opción ajustes.
Agregue una nueva sección haciendo clic en el ícono más en el cuadro de edición de Elementor y arrastre el widget Mapa avanzado al lienzo.
Establezca el centro del mapa en su ciudad (o cualquier región según el mapa que desee crear). Configure también el zoom inicial.
abierto Google Maps y encuentre la primera ubicación que desea agregar al mapa y copie su dirección.
Regrese al editor de Elementor y abra la sección Pins. Haga clic en la ubicación existente y reemplace la dirección con la dirección que acaba de copiar. También agregue la descripción de la ubicación en el campo Pin Descripción.
Haga clic en el botón AÑADIR UN ELEMENTO ubicado un poco más abajo para agregar otra dirección.
Para cambiar el estilo de tu mapa, así como la altura, puedes abrir la sección Estilo de mapa.
NOTA: Si el mapa no se carga después de arrastrar el widget Mapa avanzado en el editor de Elementor y ve el mensaje "Solo para fines de desarrollo", asegúrese de habilitar su facturación de Google Soluciones. La nueva política de Google requiere que los desarrolladores habiliten la cuenta de facturación.
¡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 pines usando Jet Elements. 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.
...
