Cómo agregar Google Maps en un sitio de WordPress (la forma más fácil)

Agregar un mapa de Google a su sitio web no solo facilita que los visitantes encuentren la ubicación de su empresa, sino que también agrega un toque de profesionalismo y funcionalidad. 

Pero cómo agregar Google Maps en el sitio de WordPress? 🤔

¡No te preocupes! Le mostraremos el método más sencillo:

• Usando un complemento de WordPress (ElementsKit)

Quizás te preguntes, ¿por qué ElementsKit? 

Bueno, ofrece un widget de Google Map que puedes insertar con solo arrastrar y soltar. Además, obtendrás enormes opciones de personalización para personalizar su mapa de Google para que se vea exactamente como lo desea. Por lo tanto, ¡no necesitas ser un genio de la codificación para que esto suceda!

¡Vamos a sumergirnos! 🥳

¿Qué es Google Maps?

Google Maps es un servicio de mapas web desarrollado por Google para mostrar ubicaciones e indicaciones precisas para cualquier dirección. 🗺️

Google Maps es un servicio de mapas web desarrollado por Google para mostrar ubicaciones e indicaciones precisas para cualquier dirección. Puede ver imágenes de satélite, mapas de calles y Vistas panorámicas de 360° de calles. Además, Google Maps también ofrece condiciones del tráfico en tiempo real y la mejor planificación de ruta para desplazarse a pie, en coche, en bicicleta o en transporte público. 🛣️🚦

Entonces, ¿cómo funciona Google Maps? Bueno, Google Maps funciona principalmente usando un combinación completa de imágenes satelitales y terrestres. Al mismo tiempo, recopila comentarios de los usuarios continuamente para proceder con un proceso de validación y se mantiene actualizado con el cambio constante en condiciones en tiempo real. ⏳

Cómo agregar Google Maps en un sitio de WordPress en 5 pasos 

La forma más sencilla de integrar Google Maps en WordPress es mediante un complemento de WordPress. La integración manual también es posible, pero es difícil obtener todas las funciones y opciones de personalización sin un complemento.

Para agregar Google Maps a su sitio de WordPress, el Complemento de WordPress ElementenetKit es la mejor opción. Es un complemento de Elementor todo en uno definitivo para el sitio web de WordPress que ya alcanzó el Hito de instalación activa de más de 1 millón. 

Conseguirás 85+ widgets personalizados de Elementor junto con el mapa de Google. Con múltiples tipos de estilos de mapas, encontrará numerosas opciones de personalización que definitivamente se adaptarán a sus preferencias, tipo de sitio web y necesidades de los usuarios.

Exploremos lo simple ¡5 pasos sobre cómo agregar Google Maps en un sitio de WordPress usando el complemento ElementsKit! 🙌 

✨✨ Requisitos 
✅ Elementor – Descargar Elementor
✅ ElementosKit Lite – Descargar ElementsKit Lite
✅ ElementosKit Pro – Obtenga ElementsKit Pro
✅ API de mapas de Google – Obtenga la API de mapas de Google

Paso 1: Instale el complemento ElementsKit 

El proceso de instalación de ElementsKit es similar a la instalación de cualquier otro complemento en WordPress. Puede instalarlo y activarlo directamente o cargar el archivo zip del complemento, luego instalar y activar la licencia. Para instalar ElementsKit, 

• Vaya a su panel de WordPress 
• Haga clic en Complementos ➔ “Agregar nuevo” 
• Descargar el Complemento de WordPress ElementsKit Comprime el archivo y sube el archivo 
• O buscar Complemento ElementetsKit  en el cuadro de búsqueda
• Luego haga clic en "Instalar"
• Una vez instalado, haga clic en "Activar"

🎯 Como la función Google Map es una widget profesional de ElementsKit, debe comprar un paquete premium y activar la licencia. 

👉 Aquí está la guía de documentación sobre cómo comprar y activar la licencia ElementsKit Pro. 

Paso 2: genere una clave API de Google Map

Ahora, necesitas generar la clave API de Google Map para conectarse con su sitio de WordPress. La API de Google Maps (interfaz de programación de aplicaciones) es una código único proporcionada por Google para integrar y utilizar la funcionalidad de Google Maps en sus propios sitios web u otras aplicaciones. 

• Navegar a Configurar en Cloud Console
• Haga clic en "Crear nuevo proyecto"

• Escribe tu nombre del proyecto y ubicación 
• Haga clic en "CREAR"

• Redirigirá al menú de hamburguesas.
• Selecciona el "API y servicios” opción
• Haga clic en “HABILITAR APIS Y SERVICIOS”

• Buscar Mapa en el cuadro de búsqueda
• O haga clic en el  “API de JavaScript de mapas”

• Si no tiene los planes premium, debe Configurar tu cuenta con la información necesaria (país, datos de la tarjeta, dirección de facturación, etc)

• A continuación, habilite el API de JavaScript de mapas 
• Ahora, ve al Google Maps Platform ➔ Página de credenciales
• Seleccione un proyecto o también puedes crear un nuevo proyecto de aquí
• Haga clic en "Crear credenciales", y generará un nuevo Clave API para ti

• A continuación, haga clic Crear credenciales ➔ clave API
• Puede ver la clave API recién creada para Google Maps en la página Credenciales en Claves API.
• Copiar la clave API desde aquí
• Haga clic en Cerrar

❗❗Recuerda restringir la API clave antes de usarlo en su sitio web de WordPress❗❗

Paso 3: conecte la clave API de Google Map con ElementsKit 

Ahora, necesitas conecte la clave API de Google Map recién creada a su sitio web de WordPress. Para hacerlo, debe pegar la clave API en la sección Google Map de ElementsKit. 

• Vaya a su panel de WordPress 
• Haga clic en “Kit de elementos” 
• Ve a la “WIDGETS” opción
• Desplácese hacia abajo, podrá ver el widget de Google Map.  
• Enciende el "Mapa de Google" widget 
• Haga clic en "Guardar cambios"

• Navegar  “ElementsKit” ➔ “Configuración de usuario”
• Desplácese hacia abajo y haga clic en el "Mapa de Google" opción 
• Pegue la clave API en el campo de entrada 
• Haga clic en "Guardar cambios"

Paso 4: arrastre y suelte el widget de Google Map dentro de la página/publicación

Ahora es el momento de ver cómo agregar Google Maps en el sitio de WordPress con solo arrastrar y soltar:

• Crear un nuevo página/publicación o abrir una página/publicación existente 
• Haga clic en “Editar con Elemetor” 
• buscar el "Mapa de Google" widget de Elementenetkit 
• Arrastrar y soltar el widget dentro del bloque donde desea mostrar el mapa

🟢 Nota: Puede agregar varios mapas y personalizarlos individualmente usando el mismo widget. Todo lo que necesitas hacer es seleccionar un bloque de Elementor y luego arrastrar y soltar el widget de Google Map. 🟢

Paso 5: personaliza la configuración del mapa de Google 

Ahora, el último paso es personalizar Google Maps según tus preferencias. ElementsKit ofrece toneladas de opciones de personalización que incluyen contenido, estilo y configuración avanzada para diseño, efectos de movimiento, capacidad de respuesta, CSS personalizado, etc. 

Veamos cómo puedes personalizar Google Maps usando las opciones de personalización de ElementsKit en tu sitio web de WordPress. 

Personalización de contenido 

En esta sección, puede seleccionar el tipo de mapa y el tipo de dirección, y establecer una latitud y longitud personalizadas para agregar la dirección que desea mostrar en su sitio web. Además, hay opciones de personalización para marcadores, controles y temas de mapas. 

🌎 Tipo de mapa 

ElementsKit ofrece plataformas de mapeo versátiles desde este único widget. Puede seleccionar el tipo de mapa en la sección desplegable. 

• Haga clic en Configuración ➔ Seleccionar tipo de mapa  

Aquí puedes conseguir 7 tipos de mapas de Google, como:

1️⃣ Básico: Con la funcionalidad básica de Google Map, los usuarios de su sitio web pueden buscar ubicaciones, ver mapas y obtener direcciones a varios destinos. 

Si es principiante y desea agregar un mapa de Google simple a su sitio web de WordPress con un marcador, elija el tipo de mapa básico. 

2️⃣ Marcador múltiple: El uso de varios mapas de Google es ideal para usted si está planificando viajes o destacando diferentes ubicaciones. Los visitantes de su sitio web pueden marcar y etiquetar múltiples puntos de interés en un solo mapa. 

3️⃣ Estática: Utilizando la función de mapas estáticos de ElementsKit, puede proporcionar a sus usuarios la posibilidad de generar una imagen estática de un mapa. Este tipo de mapa se puede incrustar en sus sitios web de WordPress si lo desea. compartir visualización sin conexión. 

4️⃣ Polilínea:  utiliza Google Maps de tipo polilínea en su sitio de WordPress para permitir a los usuarios crear y mostrar líneas en el mapa para ver las rutas, límites o áreas específicas de interés.

5️⃣ Demasiado: El widget de Google Maps de ElementsKit también admite la función de integración de superposición. Con este tipo de mapa, puede mostrar la superposición datos adicionales como información meteorológica, condiciones del tráfico o capas personalizadas en el mapa para una visualización mejorada. 

6️⃣ Con Rutas: Cuando utiliza el mapa de rutas de ElementsKit, los visitantes de su sitio web pueden ingresar sus puntos de partida y destino para obtener instrucciones detalladas paso a paso. Además, pueden ver el tiempo de viaje estimado y actualizaciones de tráfico en tiempo real. 

Le ayudará a determinar su distancia desde su ubicación, o será más adecuado cuando tenga que agregar varias direcciones de oficinas/sucursales a su sitio web.

7️⃣ Panorámica: También puede mostrar la vista panorámica utilizando el widget de Google Map de ElementsKit. Las vistas panorámicas, también conocidas como Street View, proporcionarán a los usuarios una virtuales de 360 grados recorrido por diversos lugares. Permitirá a los visitantes del sitio web explorar lugares como si estuvieran físicamente presentes.

👉👉 Para cada tipo de personalización de mapas en detalle, puedes consultar esta documentación – Mapa de Google en el sitio de WordPress.

📌 Tipo de dirección 

Para cada tipo, puede seleccionar el tipo de dirección como dirección escribiendo el nombre de la ubicación directamente o estableciendo la latitud y longitud de la dirección respectiva. 

Sin embargo, la latitud y la longitud son las coordenadas geográficas para representar una ubicación específica en la superficie de la Tierra. 

La latitud es la medida de la distancia de un punto. norte o sur del Ecuador. Por otro lado, la longitud define la medida de la distancia de un punto. este u oeste del Primer Meridiano.

Obtener latitud y longitud: 

• Ir a https://www.google.com/maps/
• buscar el nombre de tu ubicación
• Botón derecho del ratón en el punto exacto del mapa
• Puedes ver el valores de latitud (izquierda) y longitud (derecha)
• Ahora Copiar la latitud y longitud
• Próximo, pegar en sus campos de entrada

🔖 Configuración de marcador 

Aquí puede personalizar las opciones para marcar la ubicación usando título, contenido, ícono, etc. 

• Agrega un Título del mapa de Google para mostrar el nombre mientras alguien busca su ubicación
• Escriba contenido con 1-2 líneas para describir la dirección al pasar el cursor sobre el mapa 
• Habilite la opción para agregar un icono de marcador personalizado
• Cargue el ícono de marcador, puede usar el logotipo de su empresa u otros íconos para describir su identidad 
• Colocar ancho y alto personalizados para el icono del marcador 

🟢 Para Google Maps de múltiples tipos de marcadores, puede cargar y personalizar múltiples íconos para cada ubicación. 🟢

🎛️ Controles

Puede controlar el nivel de zoom, la vista de la calle, el tipo de mapa, el desplazamiento del mapa, etc. desde esta configuración. 

• Controlar el nivel de zoom: Proporcione cualquier número para definir el nivel de zoom.
• Habilitar el control de Street View: Habilite para mostrar el mapa con Street View.
• Activar el control de tipo de mapa: Actívelo para permitir que el usuario controle el tipo de mapa, por ejemplo, hoja de ruta, satélite, etc.
• Habilitar el control de zoom: Actívelo para agregar un ícono de control de zoom para acercar (+) y alejar (-) el mapa.
• Habilitar el control de pantalla completa: Activar esta opción permitirá al usuario ver el mapa en modo de pantalla completa.
• Habilitar el zoom de la rueda de desplazamiento: Habilitar la rueda de control de desplazamiento aumentará o disminuirá el factor de zoom en 10% por cada clic, hacia arriba o hacia abajo.

🎨 Temas

Puede personalizar la fuente y los estilos del tema de Google Map. Además, si puede agregar un tema personalizado, es posible en el widget de Google Map de ElementsKit. 

✨ Fuente del tema estándar de Google 

• Haga clic en el tema ➔ Seleccione el tipo de fuente: estándar de Google  
• Seleccione estilos de tema estándar en la sección desplegable:
  • Estándar, Plateado, Retro, Oscuro, Noche y Berenjena

✨ Fuente del tema Snazzy Maps 

• Si desea agregar varios esquemas de color, Snazzy Map es para su sitio. 
• Haga clic en el tema ➔ Seleccione el tipo de fuente: Snazzy Maps
• Seleccione los estilos de la sección desplegable:
  • Predeterminado, Simple, Colorido, Complejo, Oscuro, Escala de grises, Monocromo, Sin etiquetas y Dos tonos 

✨ Tema personalizado

• También puede agregar un tema personalizado según sus preferencias y necesidades. 
• Elegir el fuente del tema ➔ Personalizado
• Agregue un estilo de tema personalizado en el campo indicado 
• Haga clic en "Haga clic aquí" para obtener el código de estilo JSON del estilo seleccionado 

Personalización de estilo

Obtendrá total flexibilidad para configurar la altura, el ancho y la alineación del mapa personalizados según el diseño de la página web. 

➡️ Altura: Establecer una altura personalizada para el mapa

➡️ Ancho: Ajusta el ancho según tu preferencia.

➡️ Alineación: Establecer la alineación del mapa de Google a la izquierda, derecha o centro

Personalización avanzada 

Puede controlar todos los estilos de diseño del mapa y otras funcionalidades y personalizarlos desde la configuración avanzada del widget de Google Map de ElementsKit. 

⏺️ Establece valores personalizados para el diseño completo ancho, margen, relleno, posición e índice z 

⏺️ Establecer efectos de movimiento para los campos de entrada (por ejemplo, acercar, alejar, aparecer, desaparecer, etc.)

⏺️ Elige el diseño tipo y color de fondo

⏺️ Personaliza el tipo de borde, radio, máscara y capacidad de respuesta del dispositivo (PC, pestaña, móvil)

⏺️ Insertar atributos y CSS personalizado para funcionalidades adicionales 

5 beneficios de insertar Google Maps en un sitio web de WordPress 

Añadir Google Maps a su sitio web ofrece numerosas ventajas. Aquí están los 5 beneficios principales de integrar Google Maps en su sitio web de WordPress:

1. Aumenta la visibilidad empresarial 

Cuando algún visitante llegue a su sitio web, Google Maps le ayudará a ver su ubicación y proporcionar una idea clara de dónde está situado su negocio. 

Esta función es particularmente útil para empresas con tiendas u oficinas físicas. Entonces, si tiene varias sucursales, puede mostrarlas en un solo mapa. 

Eso ayudará a sus clientes a encontrar sucursales nuevas y cercanas. Pueden simplemente hacer clic en los marcadores para obtener la dirección y las indicaciones para llegar a cada ubicación. 

Como resultado, puede aumentar su Visibilidad de la empresa ante clientes potenciales. en su sitio de WordPress. 

2. Proporciona direcciones precisas 

Una de las principales ventajas de incorporar Google Maps en su sitio web de WordPress es proporcionar direcciones precisas a tu negocio. Los visitantes pueden ingresar su ubicación actual y recibir instrucciones paso a paso para llegar a su ubicación. 

Esta característica es muy conveniente para los clientes que no están familiarizados con el área o dependen del transporte público. Las indicaciones precisas ayudan a garantizar que los clientes potenciales puedan llegar fácilmente a su empresa sin ningún tipo de molestia o confusión. 

3. Muestra SEO local

Optimización de motores de búsqueda locales (SEO) es crucial para las empresas que se dirigen a un área geográfica específica. Al integrar Google Maps en su sitio web de WordPress, puede mostrar la ubicación de su empresa en los resultados de búsqueda. 

Según estudios recientes, aproximadamente 46% de todas las búsquedas tienen intención local. Eso indica que los usuarios de Internet están buscando las empresas, servicios o productos más cercanos.

Por lo tanto, agregar un mapa de Google aumentará tus posibilidades de aparecer en el paquete local o paquete de mapas. Es la sección de resultados de búsqueda que muestra un mapa con empresas locales relacionadas con la consulta de búsqueda. 

Como resultado, puede aprovechar esta amplia audiencia de búsqueda local y mejorar sus posibilidades de atraer clientes locales. 

4. Facilita la planificación de eventos 

Integrar Google Maps en su sitio de WordPress puede simplificar la proceso de planificación de eventos tanto para usted como para sus asistentes para cualquier evento o reunión de negocios. Puede insertar un mapa en la página de su evento para proporcionar la ubicación y direcciones precisas al lugar de celebración. 

Esta voluntad ahorre tiempo y esfuerzo a sus visitantes en la búsqueda del lugar por separado. Además, puede incluir marcadores de paradas de transporte público, áreas de estacionamiento o alojamientos cercanos, para que a los asistentes les resulte aún más fácil planificar su visita. 

5. Mejorar la confianza, la credibilidad y la experiencia del usuario 

Por último, pero no menos importante, tener una dirección en Google Maps ayuda a generar confianza entre los visitantes. Él muestra transparencia y proporciona a los clientes una prueba visual de su existencia. 

Además, cuando los visitantes pueden ver su ubicación fácilmente, es más probable que confíen en su empresa, especialmente si pueden encontrar reseñas y calificaciones positivas asociadas con su ubicación.

Además, agregar un mapa de Google a su sitio de WordPress puede ayudar a aumentar la marca de manera creíble además de mejorar la experiencia del usuario al indicar con precisión su lugar de negocios. Reducirá la necesidad de que los usuarios cambien de plataforma para encontrar direcciones o buscar su empresa en servicios de mapas externos. 

Al mantener a los visitantes en su sitio web, puede proporcionar una experiencia transparente, aumentando las posibilidades de conversiones y satisfacción del cliente.

🔔 La gente también lee – Crear un ticker de noticias en WordPress: 3 sencillos pasos

5 mejores prácticas para usar Google Maps en WordPress

Aquí están los 5 mejores prácticas por usar Google Maps en sitios de WordPress para mejorar la experiencia del usuario y mantenerse a la vanguardia de los juegos de SEO. 

✔️ Garantizar la ubicación correcta del mapa

La ubicación adecuada del mapa es crucial tanto para la usabilidad como para la optimización de motores de búsqueda (SEO). Por ejemplo, puede mostrar su mapa de ubicación en el página de contacto o el pie de página. 

No existen reglas estrictas para la ubicación de mapas en su sitio web, solo debe colocar su mapa en un lugar donde esté fácil para los visitantes para encontrar y utilizar.  

✔️ Optimice el tiempo de carga y el rendimiento del mapa

Asegúrate de tener optimizó el tiempo de carga del mapa. Porque un mapa de carga lenta puede resultar frustrante para los visitantes y también puede perjudicar su SEO. 

Puedes usar un Complemento ligero de Google Maps con todas las opciones de personalización como ElementsKit. Si utiliza un método alternativo en lugar de un complemento, Minimizar y comprimir JavaScript y CSS archivos antes de publicar el mapa de Google en su sitio web. 

✔️ Garantizar un diseño responsivo para dispositivos móviles

La capacidad de respuesta del dispositivo es imprescindible. Asegúrese de que el mapa ajuste automáticamente su tamaño y diseño para se adapta a cualquier tamaño de pantalla por ejemplo, pc, tab o teléfono móvil. 

Esto es importante para garantizar que los visitantes tengan una buena experiencia Ver su mapa no solo en PC o pantallas grandes sino también en dispositivos móviles.

✔️ Garantizar el cumplimiento de los términos y condiciones de la API de Google Maps

Google Maps tiene una conjunto de términos y condiciones que debes aceptar y seguir. 

Estos términos y condiciones tratan sobre cómo puede utilizar Google Maps y sus otras reglas. Entonces es importante léelos atentamente antes de usar la API.

✔️ Mantener la versión actualizada del complemento de Google Maps

Google Maps lanza periódicamente nuevas versiones de su API. Estos lanzamientos incluyen nuevas funciones y correcciones de errores. 

Por lo tanto, es importante mantener el complemento de Google Maps al día con asegúrese de estar utilizando la última versión de la API y de no perderse ninguna característica nueva.

📢 Ver también – Novedades de WordPress 6.2: ¡11 funciones principales y más!

Preguntas frecuentes

¿Por qué es importante agregarlo al sitio web de WordPress? 

Agregar Google Maps a su sitio web de WordPress puede mejorar el SEO local de su sitio web, generar confianza en los visitantes, aumentar el tráfico del sitio web y brindar una mejor experiencia de usuario a sus visitantes.

¿Cómo crear un código corto de Google Map en WordPress?

Para crear un código corto de mapa de Google en WordPress, 

• Navegar a Mapa de Google
• Busque su ubicación deseada 
• Navegar a  “Compartir” ➔ “Incrustar un mapa”
• Copiar el código HTML incrustado
• Ahora, crea o abre una página/publicación existente
• Agregar un nuevo bloque HTML personalizado
• Pegar el código incrustado en este bloque
• Este código iFrame incrustado será convertido en un código corto cuando editas la página o publicas

Cómo agregar Google Maps en el sitio de WordPress sin ningún complemento?

Puedes usar Google Mis mapas y cree un nuevo mapa para agregar funcionalidades básicas de mapas a su sitio web de WordPress sin instalar ningún complemento. Además, puede utilizar el método iFrame/shortcode predeterminado para incrustar el código HTML de su ubicación preferida de Google Map en la página web. 

¿Por qué Google Maps no funciona en mi sitio de WordPress?

Es posible que Google Maps no funcione en su sitio de WordPress debido a una configuración incorrecta de la clave API, problemas de autenticación o conflictos con otros complementos o temas. Por lo tanto, se recomienda verificar la configuración de la clave API y utilizar complementos de versión actualizada y garantizar la compatibilidad con otros complementos/temas.

Envuélvelo

Para aumentar la visibilidad de su negocio, generar confianza en los visitantes, impulsar el SEO local y generar más tráfico a su sitio web, agregue Google Maps al sitio de WordPress es una solución eficaz.

Y ahora sabes que “cómo agregar Google Maps en un sitio de WordPress” no es ciencia espacial. Siguiendo lo anterior 5 pasos para usar ElementsKit y Google Map API, puede integrar fácilmente un mapa de ubicaciones únicas o múltiples en su sitio web. Solo asegúrese de seguir las mejores prácticas al integrar Google Maps en su sitio. 

Si tiene alguna consulta o sugerencia, háganoslo saber y estaremos encantados de saber de usted. ¡Gracias por leer!