Solución: esta página no puede cargar Google Maps correctamente

Google Maps es un servicio de mapas basado en la web que proporciona regiones geográficas y mapas de ruta en cualquier parte del mundo. Sin embargo, algunos propietarios de sitios web están recibiendo algunos errores «Esta página no puede cargar mapas de Google correctamente”En lugar de cargar Google Maps. Este error también se puede mostrar como «Esta página no cargó Google Maps correctamente. Consulte la consola de JavaScript para obtener detalles técnicos”.

¡UPS! Algo salió mal: esta página no cargó Google Maps correctamente

Nota: Esta solución está dirigida a los propietarios de sitios web y no al usuario medio.

¿Qué causa que Google Maps no se cargue correctamente?

Los complementos de Google Map funcionarían muy bien sin errores, pero las cosas han cambiado en los últimos años cuando Google cambió sus reglas para sitios web con mapas incrustados. Anteriormente, los propietarios de sitios web podían hacer este trabajo simplemente usando el código incrustado, pero ahora necesitan la clave API para que Google Map funcione correctamente. Si ha agregado la clave API, puede ver la pestaña ‘Inspeccionar elemento -> Consola’ en Chrome para ver la razón exacta por la que Google no permite Maps en su sitio. Esto podría deberse a una clave incorrecta, una clave restringida, etc.

Agregue la clave API de Google a la configuración de su sitio

Para que Google Map funcione para su proyecto o sitio web, debe crear una clave API de Google y colocarla en la configuración de su sitio. Debe iniciar sesión con Google Developers para crear la clave y resolver cualquier otro error.

Si envió manualmente el script para mapas, debería verse como su clave API en lugar de YOUR_API_KEY

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

Dado que WordPress es el CMS más popular, con más de 172 millones de sitios web en uso; mostraremos los pasos solo para WordPress.

  1. Vaya a la configuración del complemento, lo que esté usando para Google Maps y debería tener una opción para agregar la clave API. Si no tiene uno, probablemente esté usando una versión anterior o desactualizada de un complemento.
    Complementos de API de Google en WordPress
  2. Mantenga la configuración abierta para la clave API en su sitio de WordPress.
  3. Vamos Administrador de recursos de Google Cloud
  4. Inicie sesión en Google si aún no ha iniciado sesión
  5. Haga clic en «Crear un proyecto«, Nombre el proyecto y haga clic en»Crear«
    Creando un Proyecto
  6. Vamos API habilitada por Google Página web.
  7. Haga clic en «Seleccionar proyecto«En la parte superior, seleccione el nuevo proyecto que creó y continúa en
  8. Prensa «Habilitar API y servicios«
  9. Buscar «API de JavaScript de Maps«Y ábrelo
  10. Luego presione el botón «PermitirBotón «
    Habilite la API para el proyecto
  11. Haga clic en el menú de navegación, seleccione «API y servicios«E ir a»Cartas credenciales«
  12. Haga clic en Crear credenciales y seleccione «Clave API«
    Nota: Puede convertirla en una clave restringida para evitar el uso no autorizado si lo desea
  13. Haga clic en «CerrarLuego haga clic en la clave creada
  14. Seleccione «Redireccionamientos HTTP«En las restricciones de la aplicación
  15. Agregue la URL de su sitio web y haga clic en «Ahorrar«
  16. Ahora copie la clave y vuelva al sitio de WordPress
    Cree la clave de API para el sitio
  17. Desplácese hacia abajo debajo del panel izquierdo y vaya a «Ajustes«
  18. Obtendrá una opción para «CLAVE API de Google”, Ábrelo y luego pega la clave.
  19. Guarde la configuración, vaya a su página y actualícela.

Nota: Asegúrese de que su facturación esté habilitada porque Google solo permite un crédito por valor de $ 300 o 12 meses de uso gratuito (lo que se reduzca más rápido). Después de eso, la facturación debe configurarse y aplicarse.