Para las empresas locales, mostrar su configuración regional en un mapa interactivo no es sólo una comodidad, sino un elemento crucial de su estrategia digital.
Añadir Google Maps a su sitio web puede mejorar significativamente la experiencia del usuario al facilitar a los visitantes la localización de su empresa. Además, puede aumentar la visibilidad de su sitio en los motores de búsqueda y atraer a más visitantes y clientes potenciales.
Hemos investigado las mejores formas de integrar perfectamente Google Maps en tu sitio web de WordPress, mejorando tanto la experiencia del usuario como el SEO.
En este artículo, te mostraremos cómo liberar la potencia de Google Maps en WordPress.
¿Por qué añadir 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 la dirección de una oficina o de una tienda física, añadir Google Maps a tu sitio web de WordPress facilita a los usuarios la localización rápida de tus tiendas físicas, restaurantes o puntos de venta. Esto le ayudará a atraer a más clientes y a generar más negocio.
No solo eso, sino que la asignación de Google Maps también puede mejorar el SEO de WordPress. Según Google, el 46% de todas las búsquedas son locales. Añadir Google Maps a WordPress puede impulsar tu SEO local y mejorar tu visibilidad en las búsquedas locales.
Existen dos formas de incrustar Google Maps en WordPress, y te mostraremos ambas.
La ventaja del segundo método es que sigue todas las prácticas recomendadas de SEO local, por lo que si lo utiliza, Google empezará a incluir su ubicación en Google Maps. También mostrará la información de su negocio, como el nombre, el logotipo, la dirección, el teléfono y el horario de apertura en los resultados de búsqueda locales.
Dicho esto, veamos cómo puedes añadir Google Maps a WordPress. A continuación te mostramos los enlaces rápidos que puedes utilizar para ir a la sección que prefieras:
Cómo añadir Google Maps en WordPress sin plugins
Si sólo quieres incrustar rápidamente Google Maps en una entrada o página de WordPress, puedes utilizar el método iFrame por defecto.
Sólo tienes que ir al sitio web de Google Maps y escribir la dirección de cualquier calle en la zona de búsqueda.
A continuación, haga clic en el icono Compartir y aparecerá una ventana emergente con la opción de enviar un enlace de ubicación o asignar un mapa.
Debe seleccionar la opción “Incrustar un mapa”.
Después, sólo tienes que copiar el código HTML de Google Maps y abrir la página en la que quieras asignar el mapa.
Dentro del editor de bloques, debe añadir un bloque HTML personalizado.
Ahora sólo tienes que incrustar el código que has copiado de Google Maps.
A continuación, deberá actualizar o publicar la página para obtener una vista previa de los cambios.
Este método funciona para incrustar rápidamente Google Maps, pero no le proporciona las máximas ventajas SEO.
Si tiene una pequeña empresa, un restaurante o una tienda online con una o varias ubicaciones físicas, le recomendamos que utilice la siguiente solución para maximizar su posicionamiento SEO local, ya que utiliza datos de gráficos abiertos adecuados para ayudarle a posicionarse mejor en Google.
Cómo añadir Google Maps a WordPress con un plugin de SEO local
La mejor manera de añadir Google Maps y optimizar tu sitio para SEO local es utilizando All in One SEO (AIOSEO).
Es el mejor plugin de SEO para WordPress porque te ayuda a obtener mejores rankings de SEO sin necesidad de editar código o contratar a un desarrollador. Más de 3 millones de profesionales utilizan AIOSEO para mejorar su posicionamiento en buscadores.
Para este tutorial, utilizaremos la versión Pro de AIOSEO porque incluye la característica SEO Local y otras potentes opciones de optimización. También hay una versión gratuita de A IOSEO que puede utilizar para empezar a optimizar su sitio para los motores de búsqueda.
En primer lugar, tendrá que instalar y activar el plugin AIOSEO en WordPress. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.
Una vez activado, el plugin iniciará el asistente de configuración. Puede hacer clic en el botón “Empecemos” para configurar el plugin. Si necesitas ayuda, consulta nuestra guía sobre cómo establecer correctamente All in One SEO en WordPress.
A continuación, puede dirigirse a All in One SEO ” Local SEO desde su escritorio de WordPress.
A continuación, haga clic en el botón “Activar SEO local” para establecer los primeros pasos de la configuración regional.
Una vez activada la extensión SEO Local para WordPress, puede añadir una única ubicación o varias en AIOSEO y mostrarlas en Google Maps. Le mostraremos cómo añadir ambos a su sitio web.
Añadir una única ubicación
Para añadir sus ubicaciones, información comercial, horarios de apertura, etc., primero debe ir a SEO Todo en Uno ” SEO Local y abrir la pestaña “Ubicaciones”.
Si tiene una única ubicación física, mantenga la opción “Varias ubicaciones” establecida en No.
Después, desplázate hasta la sección “Mapas” para asignar tu ubicación exacta.
Sólo tienes que introducir tu dirección en el campo “Introducir una consulta” y Google Maps mostrará tu ubicación.
Una vez que hayas introducido tu ubicación, no olvides hacer clic en el botón “Guardar cambios”.
Añadir varias ubicaciones
Si tiene más de una ubicación física, deberá activar la opción “Varias ubicaciones” en la pestaña “Ubicación” del SEO local.
Después de eso, aparecerá un nuevo menú de Ubicaciones en su panel de administrador de WordPress.
Vaya a Ubicaciones y haga clic en el botón “Añadir nuevo”.
Una vez en el editor de WordPress, desplácese hasta la sección “Asignar”.
Aquí puede introducir su dirección en el campo “Introducir una consulta”.
Una vez introducida su ubicación en el mapa y añadida la información de localización, siga adelante y haga clic en el botón “Publicar”.
Ahora puede repetir este paso y añadir tantas ubicaciones como desee para su negocio.
Una vez que haya terminado de añadir sus asignaciones regionales, puede ir a la pestaña “Mapas” en el menú Todo en Uno SEO ” SEO Local.
Aquí tendrás que introducir una clave API de Google Maps.
Veamos ahora cómo crear una clave API para Google Maps.
Creación de una clave API de Google Maps
Para empezar, tendrás que visitar el sitio web de Google Maps Platform y hacer clic en el botón “Empezar”.
Después de acceder con tu cuenta de Google, tendrás que establecer una cuenta de facturación.
Google Maps Platform tiene precios de pago por uso, y ofrecen los primeros 300 dólares de uso mensual de forma gratuita para todos los usuarios. Para la mayoría de los sitios web, eso cubrirá fácilmente una simple asignación de mapas como la que estamos creando en este tutorial.
No te preocupes, no te cobrarán ninguna cuota a menos que actualices manualmente a una cuenta de pago.
Para empezar, siga adelante y haga clic en el botón “Crear cuenta de facturación”.
A continuación, puede seleccionar su país y elegir lo que mejor describa su organización en el menú desplegable.
Una vez que haya seleccionado esta información, haga clic en la casilla de verificación de las Condiciones del servicio y, a continuación, haga clic en el botón “Continuar”.
En la pantalla siguiente, deberá introducir su número de teléfono para la verificación.
Una vez hecho esto, haga clic en el botón “Enviar código”.
Una vez verificado el código, lo siguiente es introducir el nombre de su empresa, los datos del método de pago y la dirección de facturación.
Una vez introducidos estos datos, haga clic en el botón “Iniciar mi periodo de prueba gratuito”.
A continuación, se te formulará una serie de 4 preguntas acerca de tu organización y de cómo utilizarás Google Maps Platform.
Google Maps le preguntará acerca de su principal objetivo al utilizar la plataforma, a qué sector pertenece, seleccione un caso de uso y el tamaño de su empresa.
Después de responder a estas preguntas, siga adelante y haga clic en el botón “Enviar”.
Ahora verás una ventana emergente con tu clave API de Google Maps.
Puede copiar y guardar esta clave en un archivo de texto para utilizarla en el futuro.
Ahora que ha creado una clave de API de Google Maps, deberá volver al escritorio de WordPress para introducirla en los ajustes de SEO local de AIOSEO.
Configuración de los ajustes de Google Maps en WordPress
Ahora puede volver a All in One SEO ” Local SEO desde su escritorio de WordPress y navegar hasta la pestaña “Mapas”.
Introduce la clave API de Google Maps en el campo “Clave API”. Verás una vista previa del mapa en AIOSEO en cuanto añadas la clave.
A continuación, puede desplazarse hacia abajo para editar los ajustes de los mapas.
AIOSEO te permite mostrar Google Maps mediante un bloque de Gutenberg, shortcode, widget o código PHP. También te permite elegir diferentes estilos de mapas y añadir un marcador personalizado a tu mapa.
No olvides hacer clic en el botón “Guardar cambios” cuando hayas terminado.
Visualización de Google Maps en WordPress
A continuación, puedes añadir Google Maps a cualquier entrada o página de WordPress. Para empezar, simplemente edita o añade una nueva página en tu sitio web.
Una vez en el editor de bloques, haga clic en el botón “+” de la parte superior y añada el bloque AIOSEO Local – Mapa en cualquier lugar de la página.
A continuación, tu mapa de Google se añadirá a la página.
AIOSEO también te permite editar los ajustes del mapa desde las opciones de la derecha. Por ejemplo, puede mostrar etiquetas e iconos, añadir un marcador personalizado y editar la anchura y la altura del mapa.
Si tiene varias ubicaciones, puede seleccionar la que desea resaltar eligiendo entre las opciones que aparecen en el menú de la derecha.
Simplemente haga clic en el menú desplegable “Ubicación” y seleccione la ubicación que prefiera para mostrarla en su sitio web.
Cuando esté satisfecho con los ajustes, publique la página.
Ahora puedes visitar tu sitio web para ver Google Maps en acción.
También puedes añadir 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 administrador de WordPress. A continuación, haga clic en el botón “+” y añada el bloque del widget “AIOSEO Local – Mapa” donde desee mostrar su configuración regional.
Después, puedes editar los ajustes del widget.
Por ejemplo, puede añadir un título, cambiar la anchura y la altura del mapa, elegir qué ubicación mostrar si tiene varias ubicaciones y editar la etiqueta.
¡Eso es!
Ahora, cuando actualices tu sitio web, verás Google Maps en la zona de widgets.
Guías de expertos sobre el uso de mapas en WordPress
Ahora que ya sabes cómo añadir Google Maps a tu sitio, puede que te interese ver otras guías relacionadas con los mapas y la ubicación en WordPress.
- Cómo incrustar Bing Maps en WordPress (paso a paso)
- Cómo añadir un mapa interactivo en WordPress
- Cómo incrustar un mapa de Google en formularios de contacto (con alfiler de mapa)
- Los mejores plugins de Google Maps para WordPress (la mayoría son gratuitos)
- Cómo añadir el localizador de tiendas de Google Maps en WordPress
- Los mejores plugins de WordPress para localizar tiendas y potenciar el SEO local
- Cómo añadir schema de múltiples configuraciones regionales para negocios locales en WordPress
- Cómo añadir autocompletado a los 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 a añadir Google Maps a tu sitio de WordPress. También puedes consultar nuestra selección de los mejores plugins de WordPress para pequeñas empresas y aprender a añadir un localizador de tiendas de Google Maps en WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Moinuddin Waheed
This is really a time and resource saving post for me as I was looking a minimal way of adding a Google map address in one of my clients website and was not sure how to do.
Both the methods without plugin and with AIOSEO are good and serves my need.
But I would go with AIOSEO to implement this feature as it will also help in local seo.
Thanks for this helpful guide for embedding Google map.
melanie bund
Hi, do you know how to hide the 13px white space at the bottom of the embedded google map?
Thank you in advance
Melanie
WPBeginner Support
For tweaking the CSS, it would depend on the specific embed but you can find the CSS needed to change using Inspect Element. We have a guide on Inspect Element you may find helpful here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Donata
I have a google maps on my web, but the pin which is added to the map is not clickable. The pin only shows the adress but it do not direct if you click on it. Is it possible to do clickable icon?
WPBeginner Support
For what you’re wanting, you would want to take a look at our article below:
https://www.wpbeginner.com/plugins/how-to-add-interactive-travel-maps-in-wordpress/
Administrador
Sharon
Don’t you have to get an API from Google before you can use a map plugin and insert it into the plugin? That’s been my experience lately.
Mark
Hi I’m trying to insert a google map onto my website ( Wordpress ) it keeps disappearing am I correct in thinking that google now want $200 a month for this or whatever the cost or can I still insert a map for free
WPBeginner Support
Google now charges for large uses of their maps API which is what the plugin runs on, the $200 you likely saw was the free monthly credit Google gives to those using their API so smaller sites are not charged.
Administrador
Kamil
Yes, that true but there is alternative for Google maps API. OSMapper is the plugin that uses Open Street Maps API that does not requires any API keys and there is no limit for usage. You can install it from Wordpress.org.
WPBeginner Support
While we have not tested it yet, we will be sure to take a look at it.
Blessy
I tried the first step: copy the HTML in the after going to the embed button and paste it into the text version of the post. I went to the visual one and saw the embedded google map. I saved it at the site takes out the map. The changed texts remain, though, but the map keeps vanishing. it keeps repeating each try. Why does it happen?
Miranda Olding
Thanks – so clear x
Sara C
Great tutorial – short and to the point. I had tried two other plugins that my client didn’t like. Thank you for the manual embedding information. Worked perfectly and quickly.
Many, many thanks for this tutorial.
Sara
Denny Png
Dear Sir/Madam,
I would like to change the Google Map address & not sure where to locate this embedded link to update the WP backend. I couldn’t find it the contact menu to locate it.
Seek yr kind advise on it!
Thankyou!
Rdgs,
Denny Png
Kathy
Thank you! This is what I was looking for! Perfect for my travel post on my blog! The video is great and very helpful!
divi
Great Work Bro!!!!
Andy Kramer
I would love to do this but when I go into google maps and type the address there is absolutely no gear so I can’t even get a link to copy for WordPress. Any ideas or suggestions?
Karen
I am having the exact problem. There is no flower on Google Maps anymore! So how does this work?
Mari
Hi!
I can’t find the code.. There’s no “flower icon” nor other links on the bottom right of the map. Is it because the place I’m trying to add doesn’t have a street address, it’s just coordinates?
Thanks in advance.
Andy Meuleman
A great lesson, easy to follow and implement.
Much thanks, Andy
Karthik
Is there any way to get this Map as a background to a page with full length say width 100% n height 100% something like that??
Parmod
Can you be more specific about what exactly do you need
Bigg Tobias Inspired
So, I loved the map tutorial but what if I want to place it in a certain area of the page… Or side bar? Can anyone help?
Carla Spacher
Thanks so much! Why would anyone bother with a plugin that may ultimately slow down their site when you have provided such easy instructions to grab the code from Google Maps?
By the way, if anyone is having trouble finding the code. Once you see the map, go to the bottom right-hand corner and click on the flower icon and click on “Share and embed map”. Then click on “Embed map” and enter into your WP page/or post.
WRC
Thank you. Very helpful post.
Rory
Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
Thanks for your help.
aamir
hello sir,
i want to use plugin which provide exact location. can you suggest me? i use map press, leaflet market, wp google map etc. plugin but still no luck. all this plugin show some far location from my exact location. i want exact location where my shop is located. please help me. or is there any way to develop custom map & put in wordpress site? please provide step by step procedure.
Thanks & Regards,
aamir
Trang Tran
Thanks for taking the time to write this article. It’s very helpful. Is it possible to add a Google Map that is linked with Google Places?
Guilherme
Very nice. But when we use coordinates, the lightbox map don´t work right. It just shows some place in USA. How can I fix this?
Thanks
Bongo
Powerful stuff man. Thanks
Erwin
Nice straight forward instructions. I posted a nice trick on how to get rid of the info bubble on the other day (http://goodwebsites.co.nz/how-to-remove-info-bubble-for-embedded-google-maps). Might be helpful.
Christopher Rose
Thanks for all the informative WP articles you’re posting.
Is it possible to add a Google Map to a site that
1. automatically adds the location of all site visitors or commenters to a map
and
2. allow all customers to be added, probably manually, although an automatic option would be good too. I have a small ecommerce site that has customers all over the world and thought it would be fun to show where we have sent stuff to.
Widdershins
That is so cool! … thanks
zakaria
Thank you very much!
I have already founded (MapPress Easy Google Maps) and it is nice plugin.
And of course, your attention is very nice support. THANKS!!!
One more thing, please.
I would like to use these maps in tabs but only tab’s (shortcode) plugin I have found so far which shows maps is (Jshortcode). (I mean it shows in second or third tab. The others aren’t showing in second or third tabs.) It is nice plugin too but has very colorful tabs.
May be you would be so kind to advice some other plugins to solve this problem.
Thanks advance
Best regards
Zakaria