La in­te­gra­ción de Google Maps en páginas web o en apli­ca­cio­nes garantiza una presencia online pro­fe­sio­nal y una mejor ex­pe­rie­n­cia de usuario. Para ello se necesitan API keys de Google Maps, que pueden crearse y uti­li­zar­se a través de la propia cuenta de Google y de la página para de­sa­rro­lla­do­res de Google Maps.

Qué es una API key de Google Maps

Si quieres integrar funciones de Google Maps, como un mapa, en páginas web o apli­ca­cio­nes, necesitas acceso a la API. El acceso se realiza a través de la interfaz de pro­gra­ma­ción de apli­ca­cio­nes, abreviada API, que permite el in­te­r­ca­m­bio de datos y el uso entre apli­ca­cio­nes de Google Maps. Si quieres utilizar la API de Google Maps, necesitas una API key única y secreta de Google Maps.

Esta clave de au­te­n­ti­ca­ción ide­n­ti­fi­ca el acceso au­to­ri­za­do a la API y autoriza el in­te­r­ca­m­bio sin errores de datos y funciones de Google Maps. De­pe­n­die­n­do de cómo se integre Google Maps, Google también utiliza la clave API para comprobar si el número de accesos sigue estando dentro del rango libre.

¿Cuáles son las ventajas de integrar Google Maps?

La in­te­gra­ción de Google Maps favorece una apa­rie­n­cia pro­fe­sio­nal y mejora las páginas web y apli­ca­cio­nes. Además, Google Maps ofrece una variedad de API con sus propias ventajas y di­fe­re­n­tes fu­n­cio­na­li­da­des. Con un mapa de Google integrado, se puede optimizar o compartir con otros la lo­ca­li­za­ción de la empresa o la ex­pe­rie­n­cia de usuario con función de mapa.

Si quieres integrar Google Maps, es posible, por ejemplo, a través de WordPress para Google Maps con o sin plugin. Con esta función, el valor añadido para la ex­pe­rie­n­cia de usuario es evidente.

Si quieres incrustar mapas en tu página web pero no quieres usar Google Maps, puedes usar al­te­r­na­ti­vas a Google Maps como Apple Maps, Waze o Maps.me.

API gratuita de IONOS
Gestione sus productos de Hosting a través de nuestra Interfaz de Pro­gra­ma­ción de Apli­ca­cio­nes (API)
  • Registros DNS
  • Ad­mi­ni­s­tra­ción SSL
  • Do­cu­me­n­ta­ción API

Habilitar la API de Google Maps

Antes de generar e integrar una API key, debes activar las API de Google Maps deseadas. La clave re­s­pe­c­ti­va es válida para estas y permite el in­te­r­ca­m­bio de datos y funciones.

Paso 1: primero abre la pla­ta­fo­r­ma Google Clouds e inicia sesión. Aquí en­co­n­tra­rás el elemento “Bi­blio­te­ca” en el menú bajo “APIs & Servicios”.

Imagen: El submenú Biblioteca del menú APIs & Servicios
El submenú Bi­blio­te­ca de APIs & Servicios con todas las APIs di­s­po­ni­bles en Google Cloud Platform

Paso 2: ve a “Maps” en la bi­blio­te­ca. Ahora verás un resumen de las API de Google Maps. Son las si­guie­n­tes:

  • API de geo­lo­ca­li­za­ción: para de­te­r­mi­nar la ubicación de los vi­si­ta­n­tes de la página.
  • API de in­cru­s­ta­ción de mapas: para incrustar un mapa estándar de Maps como iFrame.
  • API Ja­va­S­cri­pt de mapas: para incrustar el mapa como Ja­va­S­cri­pt para un mayor control e in­ter­ac­ti­vi­dad.
  • API de mapas estáticos: para incrustar un mapa como imagen estática.
  • API de lugares: para encontrar y mapear di­re­c­cio­nes es­pe­cí­fi­cas en el mapa.
Imagen: Google Maps APIs
Resumen de todas las API de Google Maps di­s­po­ni­bles.

Si la API deseada no aparece au­to­má­ti­ca­me­n­te en la bi­blio­te­ca, utiliza la función de búsqueda.

Paso 3: se­le­c­cio­na la API co­rre­s­po­n­die­n­te y abre la vista detallada. Haz clic aquí en el botón “Activar”.

Imagen: Activación de la API de Google Maps
Para utilizar una API de Google Maps se­le­c­cio­na­da, es necesario activarla.

Re­qui­si­tos para obtener una API key de Google Maps

Para crear una clave API, no solo necesitas tu propia cuenta de Google, sino también tu propia cuenta de fa­c­tu­ra­ción para la pla­ta­fo­r­ma de Google Maps. Incluso si utilizas Google Maps de forma gratuita, es obli­ga­to­rio disponer de una cuenta de fa­c­tu­ra­ción. Además, debes vincular al menos una API key a un proyecto o servicio en el que incluyas Maps.

Crear la API key de Google Maps

Paso 1: abre la consola de Google Clouds y ve a “Se­le­c­cio­nar proyecto”.

Paso 2: se­le­c­cio­na el proyecto co­rre­s­po­n­die­n­te para la API key y crea un nuevo proyecto. Ve al icono de menú en la parte superior izquierda y en el menú a “APIs & Servicios” y a “Datos de acceso”.

Imagen: Datos de acceso en APIs & Servicios
Las API keys pueden crearse en Datos de acceso, en la opción de menú APIs & Servicios.

Paso 3: ve a “Crear datos de acceso” en el menú de inicio de sesión y a “API key”. Ahora verás la API key creada en el campo “Mi API key” del cuadro de diálogo “API key creada”. También verás la clave creada en el menú de datos de acceso, debajo de todas las claves API an­te­rio­res. La clave API se utilizará po­s­te­rio­r­me­n­te para in­se­r­tar­la en el código, en la co­n­fi­gu­ra­ción de plugin o en el CMS (Content Ma­na­ge­me­nt System).

Consejo

¿Quieres aprender a crear API keys para ChatGPT, Steam, Ope­n­Wea­ther o YouTube? Echa un vistazo a nuestros artículos sobre estos temas:

Re­s­tri­n­gir la API key para Google Maps

Desde el mismo cuadro de diálogo de “API key creada”, Google sugerirá que debes re­s­tri­n­gir la API key. Al re­s­tri­n­gi­r­la, impides que servicios o personas no au­to­ri­za­das utilicen la clave. Para re­s­tri­n­gir la clave, ve al elemento “Re­s­tri­n­gir clave” di­re­c­ta­me­n­te después de la creación. Para re­s­tri­n­gir la clave más tarde, ve a “Se­le­c­cio­nar proyecto” para el proyecto asociado en Google Cloud Console, “APIs & Servicios” en el menú superior izquierdo y “Datos de acceso”. Luego, se­le­c­cio­na la clave.

Posibles re­s­tri­c­cio­nes:

  • Re­s­tri­c­cio­nes de la apli­ca­ción
  • Re­s­tri­c­cio­nes de la página web
  • Re­s­tri­c­cio­nes de la API

Utilizar la API key para Google Maps

Para utilizar la clave, cópiala y pégala en el código HTML, la co­n­fi­gu­ra­ción de plugin o el CMS en el lugar adecuado. Para utilizar un fragmento de código para incrustar Google Maps, debes sustituir la sección “YOUR_API_KEY” por la API key co­rre­s­po­n­die­n­te.

Ir al menú principal