Cómo hacer un mapa de Google con múltiples alfileres en WordPress

Agregar un mapa a su sitio web puede ayudar a sus visitantes a encontrar fácilmente su negocio o ubicaciones de eventos. Si su negocio tiene más de una ubicación, es posible que desee mostrarlos a todos en el mismo mapa. Aquí es donde usar múltiples pines en un mapa de Google podría ser útil.

Si su sitio web está construido con Elementor, no tendrá que tomar mucha molestia al agregar múltiples pines en su mapa de Google. En cambio, puede agregar fácilmente tantos como desee. El proceso es bastante simple, incluso para principiantes.

En esta publicación, cubriremos un tutorial detallado sobre cómo hacer un mapa de Google con múltiples pines en WordPress con Elementor. Pero antes de eso, cubriremos algunas palabras sobre por qué y cuándo debe usar Google Maps con múltiples pines en sus sitios web de WordPress.

¿Por qué usar Google Maps con múltiples alfileres en su sitio de WordPress?

El uso de Google Maps con múltiples pines puede mejorar su sitio web de muchas maneras. No se trata solo de mostrar ubicaciones. Puede ayudar a los usuarios a generar confianza y hacer que su sitio sea más útil porque pueden encontrar fácilmente sus tiendas. Aquí hay algunas razones principales por las que debería considerarlo.

1. Muestre todas sus ubicaciones en un solo lugar

Si su negocio tiene varias sucursales, tiendas u oficinas, múltiples alfileres pueden ayudarlo a mostrarlas todas en un solo mapa. Esto hace que sea más fácil para los visitantes ver cada ubicación de un vistazo sin cambiar entre diferentes mapas o páginas.

2. Ayuda a los usuarios a encontrar el lugar más cercano

Cuando los usuarios ven todas las ubicaciones en un mapa, pueden encontrar rápidamente la más cercana a ellos. Esto puede mejorar su experiencia y ayudarlos a tomar medidas más rápido, como visitar su tienda o reservar una cita.

3. Ahorre tiempo para los visitantes

En lugar de enumerar cada dirección una por una en texto plano, puede mostrarlos visualmente con pines. Esto ahorra tiempo tanto para usted como para sus visitantes. También hace que su sitio se vea más profesional y moderno.

4. Boost SEO local con datos de ubicación

Google Maps puede ayudar con el SEO local de su sitio web. Cuando agrega direcciones reales a su mapa, le dice a los motores de búsqueda sobre las ubicaciones de su negocio. Esto puede ayudar a que su sitio aparezca en los resultados de búsqueda locales. Explore cómo mejorar el SEO local con Happyaddons.

5. Haga que su sitio sea más interactivo

Un mapa con múltiples pines parece más interactivo y dinámico que solo el texto sin formato. Los visitantes pueden acercarse, hacer clic en pines y explorar el mapa. Esto hace que su sitio sea más atractivo y fácil de usar.

6. Perfecto para negocios basados en servicios o de múltiples ramas

Si ejecuta una cadena de restaurantes, clínicas, tiendas o puntos de entrega, múltiples pines ayudan a explicar claramente su alcance. Como ya se dijo anteriormente, esto genera confianza y ayuda a los usuarios a elegir el lugar más cercano.

Prerrequisitos para hacer un mapa de Google con múltiples alfileres con Elementor

Dejemos una cosa clara al principio. Elementor tiene un widget incorporado llamado mapa de Google . Pero sus características son muy limitadas. No puede agregar múltiples pines al mapa usando este widget predeterminado. Entonces, para hacer eso, necesitará un complemento adicional.

Una gran opción es Happyaddons . Ofrece un widget llamado Advanced Google Maps , que le permite crear y agregar fácilmente múltiples pines a su mapa sin ninguna molestia.

Entonces, en total, necesita las siguientes herramientas en su sitio para este tutorial.

• Elemento
• Happyaddons
• Happyaddons pro

Se requiere HappyAddons Pro porque el mapa avanzado de Google es un widget premium del complemento. Una vez que se instalen y activen en su sitio, comience a seguir el tutorial como se menciona a continuación. Explore todos los otros widgets de Happyaddons.

Cómo hacer un mapa de Google con múltiples alfileres en WordPress: tutorial paso a paso

En esta sección, explicaremos paso a paso cómo hacer un mapa de Google con múltiples pines en WordPress con complementos de Elementor y HappyAddons. También decoraremos esta sección con las capturas de pantalla necesarias, para que pueda comprender el proceso completo. ¡Sigue leyendo!

Paso 01: abra una página y busque el widget avanzado de mapa de Google

Abra la publicación o página donde desea crear el mapa de Google con múltiples alfileres. Encuentre el widget Advance Google Map en el panel Elementor. Arrastre y suelte en el lienzo Elementer.

Paso 02: Obtenga la clave de Google API

Después de agregar el widget al lienzo, se le pedirá que configure credenciales para mostrar el mapa de Google. Para comenzar esto, haga clic en la opción Credenciales en la sección Configuración general en el panel.

Serás llevado a la sección de credenciales de HappyAddons en el backend del sitio web. Encuentra la opción de mapa de Google . Luego, presione la opción Get API Clave .

Vendrás a la página de Google Cloud.

Ahora, debe encontrar 'mapas JavaScript API'. Para esto, escriba mapas API JavaScript en el cuadro de búsqueda. Una vez que aparece la opción, haga clic en ella .

Después de venir a la página de la API de JavaScript Maps, habilite la opción .

Presione el botón Aceptar y continuar . Antes de eso, puede seleccionar su país. Lo hemos borrado para nuestro caso.

La clave de la API de Google no es técnicamente gratuita. Debe completar su información de facturación para obtener la API.

Nota (cómo es gratis): aunque no es técnicamente gratis, recibirá tokens equivalentes a $ 200 por mes sin costo . Con este token, su mapa de Google se puede cargar o ver hasta 28,000 veces . Solo si se cruzan esta vista/límite de carga, se cargará su tarjeta.

Después de eso, se le proporcionará una ventana emergente. Debe dar información sobre su negocio donde se utilizará este mapa. Una vez hecho esto, haga clic en el botón Enviar en la esquina inferior derecha de la ventana emergente.

La tecla API de Google Map aparecerá instantáneamente en su pantalla con una nueva ventana emergente. Copie la clave API .

Vuelva a la opción Happyaddons Google API Key y pegue su código allí. Presione el botón Guardar cambios al final.

Ahora, venga a su lienzo de elementor y actualice/vuelva a cargarlo. El mapa de Google aparecerá en el lienzo.

Verifique cómo crear una línea de tiempo en WordPress con Elementor.

Paso 03: Agregue múltiples pines al mapa

Por defecto, solo se muestra un pin en el mapa. Para agregar y mostrar más pines al mapa, expanda la sección Marcador del mapa en el panel.

Después de que se expande la sección Marcador de mapa, puede agregar tantos alfileres como desee haciendo clic en el botón + Agregar elemento .

Ahora, al colocar valores para la latitud y la longitud, puede establecer precisamente los pines con precisión para cada lugar.

Paso 04: Configurar la configuración del mapa

De la misma manera, expanda la sección Configuración del mapa .

Encontrará muchas opciones en esta sección.

Ahora, explora amablemente cada opción alternando y apagado para ver cómo funcionan para que finalmente pueda quedarse con los que se adaptan a los que necesitan el diseño.

Aprenda a crear una galería de imágenes de desplazamiento automático en WordPress.

Paso 05: estilice el widget avanzado de mapa de Google

Cuando se realicen todas las configuraciones y las piezas de contenido, ven a la pestaña Estilo . Desde aquí, puede personalizar la altura, el ancho, el tipo de borde, el radio de borde y más opciones.

De la misma manera, expanda otras opciones también y haga las personalizaciones necesarias a medida que desea cambiar la apariencia de los alfileres.

Paso 06: Vista previa del diseño

Cuando se realice el diseño, antes de publicarlo en línea, visitelo para ver si se requiere corrección o modificación. Puede ver que el widget funciona bien en nuestro extremo en el videoclip conectado a continuación.

Por lo tanto, puede hacer un mapa de Google con múltiples pines en WordPress con Elementor.

Consejos avanzados para el mapa de Google con múltiples alfileres

Una vez que haya agregado múltiples pines a su mapa de Google, hay más cosas que puede hacer para que el mapa funcione mejor para sus visitantes y su sitio web. Estos consejos avanzados lo ayudarán a que su mapa se vea más profesional, mejore la experiencia del usuario e incluso apoye sus esfuerzos locales de SEO.

1. Use imágenes personalizadas en lugar de iconos

En lugar del PIN rojo predeterminado, intente usar iconos o imágenes personalizados para cada ubicación. HappyAddons le permite hacer esto desde la pestaña de contenido> Sección de marcador de mapa. Las imágenes e íconos personalizados pueden hacer que su mapa sea más claro y atractivo visualmente.

2. Configuración de zoom y central

Ajuste el nivel de zoom y el centro de su mapa para mostrar todos los alfileres correctamente. Si algunos pines están muy separados, asegúrese de que el nivel de zoom sea lo suficientemente ancho como para que todos sean visibles cuando se carga el mapa. Esto brinda a los usuarios una descripción completa sin necesidad de mover el mapa manualmente.

3. Hazlo amigable con el móvil

Siempre verifique cómo se ve su mapa en los dispositivos móviles. Asegúrese de que se carga rápidamente, se puede hacer clic en los pines y los cuadros de información son legibles en pantallas pequeñas. Un mapa que funcione bien tanto en escritorio como en dispositivos móviles mantendrá felices a más usuarios.

4. Insertar mapas en páginas de contacto o ubicación

No solo deje su mapa en una página. Puede reutilizar el mismo mapa incrustando en otras páginas como 'Contáctenos', 'nuestras ubicaciones' o 'visitarnos' páginas. Esto ayuda a los usuarios a encontrar el lugar correcto donde sea que estén en su sitio.

Aprenda a crear una página web dinámica en WordPress con Elementor.

Conclusión

Hacer un mapa de Google con múltiples pines puede ser un simple paso o parte en el diseño de su web, pero puede tener una impresión duradera. No solo puede ayudar a los visitantes a encontrar sus ubicaciones, sino que también aumentar el puntaje de SEO local y hacer que su sitio web se vea más profesional.

Con la ayuda de los complementos de Elementor y HappyAddons, puede agregarlos fácilmente a su sitio web sin mucha molestia. Es tan simple que incluso los principiantes pueden hacer esto simplemente siguiendo el tutorial cubierto anteriormente. Si aún tiene alguna pregunta sin respuesta, háganos saber a través del cuadro de comentarios a continuación.

Nos comunicaremos con usted muy pronto con respuestas viables. Gracias por estar con nosotros hasta el final. Háganos saber qué tema desea que cubramos en la próxima publicación.