Title: 11 - Implementacion con Google Maps
Course: 2025 - LISI - Sistemas de Informacion Geografica 4-1 > Section: Introduccion a React / Github

Que los alumnos aprendan a integrar Google Maps en una aplicación construida con React, utilizando una API Key y personalizando el mapa con marcadores y ventanas de información.

📋 Instrucciones:

1. Investiga y comprende:

• ¿Qué es la API de Google Maps?

• ¿Cómo se integra con React?

• ¿Qué es una clave API y cómo se obtiene?

➤ Google Cloud Console

2. Configura tu proyecto React:

• Crea un nuevo proyecto con Vite o CRA (Create React App):

npx create-react-app mapa-google

cd mapa-google

npm install

• Instala el paquete necesario:

npm install @react-google-maps/api

3. Implementa el mapa básico:

• Crea un componente <Mapa /> que:

• Cargue el mapa con GoogleMap y LoadScript

• Centre el mapa en una ubicación específica (por ejemplo, tu ciudad)

• Añada al menos un marcador (Marker)

• Muestra una ventana de información (InfoWindow) al hacer clic en el marcador

4. Buenas prácticas:

• Guarda tu API Key en un archivo .env y no la subas a GitHub.

• Usa componentes funcionales y hooks si es posible.

• Aplica algo de diseño con Tailwind o CSS básico para mejorar la vista.

5. Entrega:

• Sube tu proyecto a GitHub.

• Comparte el enlace del repositorio (sin subir el .env).

• Incluye un archivo README.md con:

• Explicación del proyecto

• Instrucciones para correrlo localmente

📚 Fuentes sugeridas para investigar:

• 📘 Documentación oficial de @react-google-maps/api

• 📘 Guía paso a paso en Dev.to

• 📘 Google Maps JavaScript API