Digital

Cómo solucionar el error de Google Maps API: MissingKeyMapError

4 Mins de lectura

Desde hace unos meses, Google nos obliga a insertar una clave, ApiKey, a todas las peticiones de mapas que hagamos. Por una parte, esto les permite controlar el tráfico de cada página con mapas, algo que ya controlan con Analytics. No obstante, y creo que más importante, esto les permite cobrarte por su uso.

Pero tranquilo, Google Maps sigue siendo gratuito, a no ser que tengas webs que generen muchas visualizaciones (concretamente más de 25 mil peticiones diarias). Gracias a las cuotas tienes la capacidad de revisar las peticiones que se realizan a la API, así que en todo momento puedes monitorizar el uso que haces de la API.

Como habrás podido observar en tu consola Javascript, y supongo que es tu caso si has llegado a este artículo, cuándo no has realizado los pasos necesarios, Google te muestra algunos de estos errores, que podemos ver también en la imagen.

Cuándo no tenemos nuestra APIkey generada, Google Maps nos reporta un error

Errores que nos podemos encontrar en nuestro navegador

 

Este cambio afecta a todas las nuevas implementaciones, no así para aquellas que ya estaban implementadas, y que deben actualizarse. Vamos a ver que pasos tenemos que realizar para poder usar Google Maps de forma gratuita siempre y cuando no nos pasemos del límite.

Cómo conseguir APIKey para Google Maps

Google desde hace unos años ha hecho un gran trabajo con su interfaz para desarrolladores. Para poder empezar a trabajar con su API debemos crear proyectos, tantos proyectos como páginas web estemos gestionando. Ya seas un cliente o un desarrollador vas a necesitar seguir estos pasos, así podrás tener acceso posteriormente a los paneles de estadísticas de uso de tus APIs. Cuándo hayamos realizado login en la URL anterior, deberemos crear un proyecto y habilitar cuántas APIs necesitemos.

 

La Api para Google Maps nos permite visualizar los Mapas de forma gratuita

Búsqueda de la API necesaria para publicar los Mapas de Google Maps

Crear un proyecto en la Consola de desarrolladores de Google

Siempre es necesario crear un nuevo proyecto para, dentro de él, habilitar todas las APIs necesarias

Una vez hayamos creado el proyecto debemos habilitar la API llamada «Google Maps JavaScript API», pudiendo usar también el buscador superior, que nos puede ayudar mucho para encontrar mejor nuestra API objetivo.

Activar Google Maps Javascript API

Después de seleccionar la API correcta, habilitaremos esta para poder configurar y seguir unos pequeños pasos. Nota Adicional: me comenta un compañero de otro proyecto que a veces para que funcione correctamente es posible que tengamos que habilitar otra API, «Google Maps Geocoding API» según como estemos usando google maps.

 

Pantalla de activación de la Google Maps Javascript API

Una vez seleccionada cualquier API, debemos habilitarla para tener acceso a su Panel de administración

Una vez habilitada debemos crear unas credenciales, la famosa «ApiKey» que nos pedían al inicio para usar Google Maps correctamente. Debemos hacer click en el botón “Ir a las credenciales” que se ve en la imagen.

Configurar Google Maps Javascript API

Ya en la pantalla de credenciales tenemos que rellenar dos campos, dónde en el primero debemos especificar desde dónde vamos a usar nuestra Api. En general «Navegador Web»

Pantalla final de configuración de Google Javascript API, dónde se puede dar un nombre a nuestra ApiKey y restringir el acceso por dominio.

Siempre es recomendable, sobre todo en entornos de producción, restringir el acceso a la API a través de nuestro dominio o subdominios, si se da el caso.

Después de seleccionar el tipo debemos ponerles un nombre, recomendable sobre todo si estas en mucho proyectos, que sean descriptivos. Recuerda que no deberías poner la misma en un entorno de desarrollo que producción, así que tenlo en cuenta a la hora de nombrarla. También y muy importante, para que otros no usen tu ApiKey, restringe el uso de tu Apikey en función del dominio de tu página.

Una vez completado el proceso ya puedes facilitar este número a tu desarrollador de confianza o implementar tu mismo el cambio para que tu página esté al día con Google.

Paso final para la obtención de la ApiKey para Google Maps

Pantalla de obtención de la APIKey para insertar en nuestro código fuente

Introducir nuestra clave ApiKey para Google Maps en nuestra web

Para ello debemos localizar los puntos de la aplicación en los que realizamos llamadas a l API de Google. En sitios web sencillos debería para bastar con añadir una línea de código, pero en otros podrías necesitar realizar más cambios. Localizados los ficheros afectados debemos añadir el parámetro «key» a la petición. Recuerda que el parámetro sensor ya no es Requerido, por lo que podrías encontrarte con un mensaje similar al siguiente:

Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

Ahora si, el cambio, si antes teníamos:

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js'></script>

Ahora debería ser así:

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCe30oLPh7uH3vWngw96bjZ0HLPq51Byf8'></script>

Donde el valor de la key es la clave que hemos obtenido en el punto anterior. Importante recordar que si no hay parámetros adicionales en nuestra consulta, deberemos poner «?» antes, si ya hubiera otro deberemos usar «&» para concatenar ambos parámetros.

ApiKey para WordPress

En WordPress podemos hacer uso de este sencillo plugin (API KEY for Google Maps) que introducirá el parámetro “key” en la llamada a la API de Google Maps por nosotros sin necesidad de editar ningún fichero adicional.

En Hiberus tenemos un área especializada en negocios digitales, contacta con nosotros y estaremos encantados de ayudarte.

Hacemos realidad la transformación digital de tu compañía

En Hiberus Digital trabajamos conjuntamente con nuestros clientes uniendo los servicios de agencia digital y consultora tecnológica, dos puntos de vista normalmente fragmentados para conseguir que toda la organización se centre en conseguir los objetivos. Ayudamos a las empresas a transformarse conectando la visión de negocio con la tecnología necesaria.

¿Te ayudamos?

Artículos relacionados
Digital

Las 6 fases de un proyecto de CRO

5 Mins de lectura
En anteriores artículos abordamos el concepto de CRO, una estrategia clave para el marketing online que busca maximizar la conversión de usuarios…
DigitalNext Tech

Aumenta la productividad en Power BI con Tabular Editor

5 Mins de lectura
Tabular Editor es una herramienta externa de Power BI que facilita el desarrollo del modelo y la construcción de medidas DAX, permite crear…
DigitalNext TechSomosHiberus

Caso de éxito: mejoramos la experiencia de usuario del ecosistema digital de EduCaixa

3 Mins de lectura
EduCaixa es la plataforma educativa de Fundación “La Caixa” dirigida al profesorado, a los equipos directivos de las escuelas y al alumnado….

1 Comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada.