Como muchos de vosotros habréis comprobado, últimamente en muchas webs no funciona Google Maps y da mensajes de error de que no se puede mostrar el mapa. Un ejemplo para que sepáis de hablo:

Esto es debido a que Google ha cambiado el sistema de APIs para todas sus aplicaciones, y claro, aquí también se incluye Google Maps. Y esto no es solo un tema de que quede mal verlo así en la web. Esto puede llegar a ser bastante molesto, e incluso perjudicial, pues los mapas los usamos en las webs para mostrar la ubicación de nuestras oficinas o empresa, o como directorio de empresas, asociados, etc. Y si no se ve el mapa, lógicamente los clientes no van a poder ver dónde encontrarnos.

Seguramente todos los que tenéis webs con uno o varios mapas habéis sufrido o estáis sufriendo de este problema. Y si como yo no habéis encontrado la solución googleando, os voy a ayudar para que lo podáis resolver de una vez por todas.

Paso 1: crear cuenta de Gmail

En primer lugar lo que hay que hacer es crear una cuenta de Gmail. Creo que este paso es bastante evidente, y que seguramente todos lo tengáis ya, pero por si acaso 😉 Es de todos sabido que para hacer cualquier cosa con un servicio de Google es necesario contar con cuenta de Gmail (igual que para Analytics, Search Console, etc.)

Paso 2: crear cuenta en Google Cloud

El segundo paso es crear una cuenta en Google Cloud, que podéis hacer a través de este enlace: https://cloud.google.com/ En términos muy generals y rápidamente, Google Cloud es la nueva plataforma en la nube que ha creado Google para albergar todos sus servicios en un mismo sitio. Podréis registraros con vuestra cuenta de Gmail sin problema.

Paso 3: crear cuenta de facturación

El siguiente paso es crear una cuenta de facturación. El proceso es bastante sencillo, pues os irán guiando a través de diferentes pasos. Tendréis que introducir datos de una tarjeta de crédito (no os preocupéis, no os van a cobrar nada). De esta manera, vais a tener 300$ dólares de crédito para las peticiones que se hagan a vuestras APIs. Si, tener Google Maps en la web ahora puede dejar de ser gratuito. Para un uso normal de una web no deberían cobraros nada, pues los 300$ son más que suficientes. Sin embargo, si tenéis una web con muchísimas visitas y tiráis mucho de esta API, cuidado porque os puede salir más caro de lo esperado.

Paso 4: generar API de Google Maps

Una vez ya tenéis la cuenta de Gmal, la de Google Cloud y la de facturación, tenéis todo configurado. El cuarto paso consiste en ir a la siguiente dirección: API Google Maps. Cómo veis, es una página de ayuda de Google (si por otra cosa se caracteriza Google, es porque solo vas a recibir soporte suyo a través de estas páginas). En esa página, dándole al botón de GET STARTED os saldrá el siguiente cuadro de diálogo:

¿Cómo poner la API de Google Maps en tu web?

Ahí elegís la opción u opciones que mejor os venga y le dais a continuar. El siguiente cuadro de diálogo será para crear o elegir un proyecto. Esta plataforma de Google funciona por lo que llaman «projects» Por poneros un ejemplo, si quiero poner Google Maps en mi web, podría llamar al proyecto «diariodeunmarketero web» y así lo tengo identificado para el futuro. Como es posible que gestionéis varias webs, os recomiendo que le pongáis nombres claros para evitar problemas en el futuro.

*Nota: al darle a continuar, si no habéis configurado bien la cuenta de facturación, aquí os puede dar error. 

Paso 5: configurar seguridad de la API

Si has seguido correctamente los pasos, os habrá generado un código bastante largo de este estilo: AyhgDoGFHUvlKyTRBqKLfuPRfFTSsFghDEOaSEsP Esa es vuestra codiciada API que solucionará el problema. Para evitar problemas de seguridad y que alguien no autorizado pueda usar es clave, podéis darle a editar en el cuadro de diálogo que os habrá salido y tendréis una pantalla como esta:

Cómo añadir la API de Google Maps

 

Ahí podréis configurarla a vuestra gusto. Para acceder aquí también lo podéis hacer desde la página principal de Google Cloud Platform, eligiendo el proyecto creado y seleccionando la opción de de APIs y servicios > credenciales.

Paso 6: insertar la API en la web

Si tenéis WordPress instalado con un tema premium, seguramente tengáis un apartado en las opciones del propio tema que sea integraciones o servicios de Google (si usáis Enfold, en «Google Services»; si usáis DIVI, en «Integration») Simplemente buscad esa sección e introducid la API que habéis generado anteriormente. Si no usáis WordPress, tendréis que hacerlo con código. Este es el código que desde Google recomiendan usar:

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

Sustituyendo lógicamente donde pone YOU API KEY por vuestra clave. 

*Recordad que si estáis usando algún plugin que use Google Maps de forma específica, seguramente tengáis que añadir la API también en las opciones del plugin y no solo en las del tema.

Con esto ya tendríais todo lo necesario para saber cómo poner la API de Google Maps y olvidaros del dichoso problema de que Google Maps no funcione en la web. ¿Os ha parecido fácil?

Infografía

¿Cómo poner la API de Google Maps en tu web?