Como solucionar el error de Google Maps API en WordPress

Error google map api

Nos encanta cuando un cliente nos trae un problema y además la solución para que la compartamos con todos, en este caso Inma de MRinformática Marbella, nos informó de un error al intentar integrar un mapa de Google Maps para una web corporativa creada con WordPress, lo típico para que el visitante tenga interactuación y geolocalización de esa empresa.

El caso es que al integrar el mapa, este lejos de mostrarse, lo que muestra es un error con un mensaje «This page not load Google Maps correctly, see the javascript console for technical details».

Manos a la obra abrí el inspector de elemento para ver la información de la consola de Javascript y ver un par de mensajes de error haciendo referencia a que el mapa no se cargaba porque no había un API KEY activa.

Esto es porque Google desde el 22 de Junio pone unas limitaciones para el uso de mapas en sitios webs y aplicaciones, si tenías el mapa integrado antes del 22 de junio, Google ha tenido la deferencia de seguir permitiéndolo sin necesidad de generar un API KEY para ello, pero si para los nuevos a partir de esta fecha.

Problemas y Soluciones:

Nos encontramos con dos problemas, el primero generar esa API KEY e integrarla en nuestra web, la API KEY la podemos generar sin problemas en el siguiente link API de Google Maps . Seguimos los pasos indicados en la interfaz y obtendremos nuestra API KEY, para ello tendremos que autorizar esa API KEY para nuestro sitio web, recordad que esta API KEY solo es valida para ese sitio, si necesitamos integrar otro mapa en otra web tendremos que repetir el proceso.

Una vez hemos seguido todos los pasos para generar, autorizar y obtener nuestra API KEY el siguiente paso es integrarlo, que ocurre, que muchos trabajan con builders o plugins que a base de un par de clics y unos parámetros de geolocalización integran el mapa pero no tienen un campo donde insertar la API KEY, como es algo bastante reciente muchos desarrolladores no han realizado las actualizaciones a esta nueva directriz de Google y no queda mas remedio que insertar el código a «capón».

En la propia interfaz de Google Maps nos indica el código que tenemos que utilizar y en función de la aplicación.

API KEY google maps

Importante que cambiemos YOUR API KEY por la que hemos generado y autorizado para nuestra web en Google Maps, de otra forma no funcionará, si te manejas un poco con el código no será muy complicado añadir estas lineas de código con tu API KEY, localiza con la pestaña HTML el código insertado por tu builder o plugin, normalmente entre etiquetas iframe y añade tu linea de código con tu API KEY, si todo ha ido correcto tu mapa se verá correctamente ya que está autorizado.

Si no te apañas con código no te queda mas remedio que recurrir al desarrollador del builder o plugin para que incluya en su próxima distro un campo para añadir el API KEY y esta se integre con el código o tirar de un programador para que te añada esas líneas necesarias para el correcto funcionamiento de tu mapa.

Hosting para WordPress Host-Fusion.ComHost-Fusion te ofrece Planes de Hosting para WordPress con SSD + SSL +Backups Configurables + CDN + 15% descuento en hosting utilizando este código HFXTRA y registro y transferencia de dominio Gratis.