Como integrar Google Maps a WordPress

¿Qué es Google Maps?

Es una herramienta de búsqueda y geolocalización, permite encontrar puntos y lugares específicos en el mundo. Además, durante los años ha evolucionado para ofrecernos nuevas funcionalidades integradas en su sistema, por ejemplo Google Street View, que permite la visualización de edificios, calles y en general, cualquier ubicación que haya sido fotografiada por el vehículo de Google designado para la tarea. Google Maps permite también calcular rutas, es posible asignar una ubicación de destino y una origen, Google hará su mejor esfuerzo para mostrarnos varias opciones de navegación hasta el lugar de destino, nos permite modificar nuestro medio de transporte, e incluso, la hora a la que pretendemos realizar el viaje.

Figura 1.

Imagen ilustrativa Google Maps

Es por esto que Google Maps es una gran herramienta que valdría la pena tener integrada en nuestra página web, principalmente para darle a nuestros usuarios la posibilidad de visualizar el punto físico de nuestro negocio y como llegar a él. WordPress es uno de los CMS más utilizados para diseñar y administrar páginas web, permite hacer integraciones muy sencillas y ágiles con diversas herramientas, es por eso que hoy veremos cómo integrar Google Maps en WordPress.

Figura 2.

Imagen ilustrativa del uso de Google Maps como localizador de tiendas en WordPress

Integración usando plugin

La primera es la más famosa, involucra la utilización de un plugin, existen varias opciones tales como WD Google Maps, Google Maps Widget, pero la recomendación que haremos es para el plugin llamado WP Google Maps. Primero accedemos al apartado de plugins desde WordPress, luego añadir nuevo, buscamos el plugin WP Google Maps en la barra y hacemos clic en instalar. Una vez activado, aparecerá una nueva opción en el escritorio de WordPress llamada Mapas (2021, Mayo 13). Cuando intentemos acceder a la opción Mapas esta nos va a solicitar una llave API (API Key), básicamente y para no extendernos mucho, una API Key es una llave que permite utilizar la interfaz de programación de alguna aplicación (en este caso Google Maps) para implementar alguna funcionalidad afín al aplicativo (en este caso el mapa embebido en nuestra web). 

En la misma pantalla asociada a Mapas podemos crear una API Key de forma automática, aceptamos los términos y condiciones de Google y generamos nuestra llave, luego simplemente volvemos a la pantalla de Mapas y la pegamos en el campo que lo requiere, recuerde que la API Key está asociada a la cuenta de WordPress y por lo tanto debería manejarse con privacidad.

Ahora ya es puedes empezar a utilizar el mapa en el sitio web, simplemente hace falta asignarle un nombre y ajustar algunas propiedades como el tamaño, la alineación y lo más importante, tu ubicación por GPS. Finalmente, solo hace falta insertarlo en el cuerpo de la página, esto se consigue a partir de copiar el código abreviado (Shortcode) y pegarlo en el lugar deseado.

Figura 3.

Visualización de mapa embebido

Integración usando Embed Google Map

Existe una forma manual de integrar un mapa de Google Maps a partir de Embed Google Map. Esta herramienta permite generar códigos de inserción (similar al Shortcode del plugin anterior) de modo que podemos acceder a ella, buscar una dirección, ajustar los parámetros de tamaño, alineación, etc. y finalmente generar un código HTML para copiarlo e insertarlo en el cuerpo de nuestra página, WordPress interpreta el código HTML y genera el mapa embebido. El inconveniente de este método es que requiere de la generación diferentes códigos de inserción si se desea cambiar la ubicación o los parámetros visuales del embebido del mapa  (2021, Mayo 13)..

Figura 4.

Visualización de la interfaz de Embed Google Map

Integración usando plantillas de WordPress

Algunas de las plantillas de WordPress permiten insertar mapas embebidos en el cuerpo de la página, normalmente, después de seleccionar el tema y escoger un layout para alguna sección en particular del cuerpo de la web, aparecen varias opciones de inserción, por ejemplo, usando la plantilla Divi, podremos elegir la opción de Map, este nos pedirá nuevamente el API Key de Google Maps, y finalmente podemos personalizar el título y demás opciones estéticas del mapa embebido, además de la ubicación y los detalles.

A continuación veremos cómo generar un código de inserción similar a Embed Google Maps pero directamente desde Google Maps, esto, buscando una dirección puntual en el navegador y compartiéndola a en forma de código HTML.

La utilización de herramientas interactivas en páginas web son la mejor forma de proveer información a nuestros usuarios, siempre será más sencillo ver un diagrama, interactuar con un mapa o seleccionar figuras, que leer un texto plano, Google Maps es una excelente herramienta y su integración es la alternativa superior para permitir dar a conocer la ubicación de nuestro negocio.

Autor: Luis Fernando Herrera Quintana

Editor: Carlos Pinzón

Código: UCPW-102

Universidad: Universidad Central

Fuentes:

Gustavo B. (2021, Mayo 13). Cómo insertar Google Maps en WordPress (3 métodos). Hostinger Tutoriales

https://www.hostinger.es/tutoriales/insertar-google-maps-en-wordpress/

WordPress. (s,f). WP Google Maps. WordPress

https://es.wordpress.org/plugins/wp-google-maps/

Embed Google Map. (s,f) Embed Google Map. Google

https://www.embedgooglemap.net

El Mundo. (2021, Abril 3). Google Maps trae cambios y mejoras a España: esto es lo que necesitas saber [Imagen]. El Mundo

https://www.elmundo.es/tecnologia/2021/04/03/60647106fc6c8387608b45d2.html

Stack Overflow. (s,f). How to embed a Google Map iFrame with a custom name [Imagen]. Stack Overflow

https://stackoverflow.com/questions/26600805/how-to-embed-a-google-map-iframe-with-a-custom-name

Embed Google Map. Embed Google Map (No API Needed) [Imagen]. De Embed Google Map.

https://www.embedgooglemap.net

Joaquin. (s,f). Cómo añadir el localizador de tiendas de Google Maps en WordPress [Imagen].Aprende WP

https://aprenderwp.com/plugins/como-anadir-el-localizador-de-tiendas-de-google-maps-en-wordpress/

siteGround España. (2020, Julio 30). Cómo insertar un mapa de Google Maps en WordPress sin plugins | Guía WORDPRESS . 

https://www.youtube.com/watch?v=n0Xe8_cS390