Como usar la Api de Google Maps en Una Web

4 minuto(s)

En esta página:

La API de Google Maps te permite insertar un mapa en tu página web.

Brindar a tus usuarios un mapa con la ubicación de tu empresa o el mostrar un mapa por alguna otra razón que tú desees, hará que tu web sea más dinámica.

En este tutorial te enseñaré a Como usar la Api de Google Maps en Una Web, vamos con ello.

Configuración de la API de Google Maps — Configurar la API de Google Maps es muy útil

Como usar la Api de Google Maps en Una Web

Usar la Api de Google Maps en Una Web es muy fácil, solo pon atención a los pasos que te indico a continuación.

Ve a este enlace de Google Cloud y elige Maps JavaScript API, si no te aparece a primera vista, puedes buscarlo en la caja de búsqueda e ingresa a el:

Maps JavaScript API en Google Cloud — Ten cuidado con elegir una API diferente, ya que puedes obtener errores más adelante

En la siguiente pantalla, presiona el botón que dice CREAR PROYECTO:

Crear proyecto en Google Cloud — Debes crear un proyecto para cada API que uses, así mantienes un orden

Por defecto Google Cloud le pone un nombre al proyecto, puedes ponerle un nombre o dejar el que le asignó Google Cloud.

Presiona el botón CREAR para crear el proyecto:

Crear nuevo proyecto en Google Cloud — Yo le puse el nombre: Mi Mapa de Google, para recordarlo más adelante

Ahora presiona el botón que dice HABILITAR, para activar la API de Google Maps en tu cuenta:

Habilitar la API de Google Maps — Activa la API para poder usar Google Maps en tu página web

Google Cloud es una plataforma generosa y nos regala un crédito mensual de $200 sin cargo para las API de Google Maps.

Asimismo, puedes obtener un crédito adicional de $300 para cualquier producto de Google Cloud durante 90 días.

En la siguiente pantalla elige tu País y presiona el botón ACEPTAR Y CONTINUAR:

Paso 1 información de la cuenta — Google Cloud detecta tu País

En la siguiente ventana coloca los datos de tu tarjeta y presiona el botón que dice COMENZAR GRATIS:

Google Cloud no te cobrará nada, solo es una rutina de seguridad, porque hay muchos usuarios con malas intenciones. Puedes cancelar tu cuenta cuando desees.

Si te aparece algo más, solo sigue el proceso de pago que es rápido, tal como te indica Google Cloud.

Obtener Credenciales Para Usar la API de Google Maps

Ahora ve a este enlace para las credenciales y presiona el botón que dice CREAR CREDENCIALES, no olvides verificar que tengas seleccionado tu proyecto en la lista de arriba:

Se te creará una API KEY que te servirá para usar la API de Google Maps, copia la API KEY o credencial:

API KEY creada para usarla en Google Maps — Cuida tu API KEY y no la compartas con alguien que no sea de confianza

Ahora coloca tu API KEY o credencial, dentro del siguiente fragmento de código.

Reemplaza la palabra que dice ACA-TU-API-KEY con tu API KEY o credencial generada anteriormente:


<iframe
  width="600"
  height="450"
  style="border:0"
  loading="lazy"
  allowfullscreen
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/place?key=ACA-TU-API-KEY&q=Space+Needle,Seattle+WA">
</iframe>

<iframe

width="600"

height="450"

style="border:0"

loading="lazy"

allowfullscreen

referrerpolicy="no-referrer-when-downgrade"

src="https://www.google.com/maps/embed/v1/place?key=ACA-TU-API-KEY&q=Space+Needle,Seattle+WA">

</iframe>

Por último abre el archivo de tu página web, ya sea HTML, PHP, etc. y pega todo el código anterior.

Si vamos al navegador, podemos ver que nuestro mapa de Google carga sin problemas usando la Api de Google Maps:

Mapa de Google usando la API de Google Maps — Puedes cambiar la ubicación del marcador rojo, es otro tema

Recuerda configurar tu tarjeta, correctamente, si no Google Cloud no te dejará mostrar el mapa y en su lugar mostrará un mensaje de error o no autorizado.

Conclusión

En este artículo has aprendido a Como usar la Api de Google Maps en Una Web, lo hemos realizado siguiendo las buenas prácticas recomendadas por Google. Saber como usar la API de Google Maps, te servirá para realizar cosas más avanzadas con la API de Google Maps.