Title: 15 - Implementación de rutas con Google Maps en React (Routes API Rendering)
Course: 2025 - LISI - Sistemas de Informacion Geografica 4-1 > Section: Introduccion a React / Github

🎯

Objetivo:

Implementar una visualización de ruta entre dos puntos usando Google Maps y la librería @react-google-maps/api, haciendo uso de la Routes API para mostrar el trazado dinámico entre origen y destino.

🧩

Instrucciones:

1.

Requisitos previos:

- Tener Node.js instalado.
- Crear un proyecto de React (npx create-react-app rutas-maps).
- Obtener una API Key desde Google Cloud Console, activando:
  - Maps JavaScript API
  - Routes API
  - Places API (opcional para autocompletado)

2.

Instalaciones necesarias:

npm install @react-google-maps/api

3.

Código base (App.js):

📌

Actividades a realizar:

1. Sustituye la API Key por la tuya.
2. Cambia los lugares por ubicaciones de tu ciudad o país.
3. Agrega estilos y botones para cambiar entre transporte en coche, caminando o en bicicleta.
4. Investiga cómo usar autocompletado con Places API para que el usuario escriba direcciones.

📋

Producto esperado:

Una aplicación React que muestre en el mapa una ruta trazada entre dos ubicaciones y permita recalcularla.