Como usar la Api de Google Maps en Una Web

Nube Colectiva

hace 1 año

Como usar la Api de Google Maps en Una Web

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.

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:

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:

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:

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:

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:

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:

No toques otras opciones si no sabes para que sirven

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

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:

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.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.