Title: 13 - Implementación de Marker Clustering con Google Maps API en React
Course: 2025 - LISI - Sistemas de Informacion Geografica 4-1 > Section: Introduccion a React / Github

🎯 Objetivo de aprendizaje

Aplicar el uso de la API de Google Maps en una aplicación React para mostrar múltiples ubicaciones y agrupar marcadores mediante MarkerClusterer, mejorando la visualización y eficiencia en mapas interactivos.

🛠️ Requisitos previos

• Conocimientos básicos de React.

• Conocimientos previos de cómo integrar Google Maps con @react-google-maps/api.

• API Key de Google habilitada con acceso a Maps JavaScript API.

Dependencias a instalar

npm install @react-google-maps/api

 Instrucciones de desarrollo

1. Configura tu API Key

Registra una API key de Google Maps en https://console.cloud.google.com y actívala para el uso de Maps JavaScript API.

2. Crea el componente MapaConClusters.jsx

3. Importa en tu App.js

✅ Objetivo de la actividad

1. Comprender cómo funciona MarkerClustererF y por qué es útil cuando hay muchos puntos en el mapa.

2. Simular o importar una lista de coordenadas (pueden ser puntos de venta, sensores, etc.).

3. Visualizar cómo se agrupan los marcadores a diferentes niveles de zoom.

4. Explicar el impacto del clustering en el rendimiento del mapa.

📘 Entrega esperada

Cada alumno o equipo debe:

• Subir su código funcional a GitHub o entregar un ZIP.

• Presentar una breve explicación (puede ser video o PDF) del uso de MarkerClustererF.

• Agregar mejoras opcionales (como mostrar info al hacer clic en el clúster o usar coordenadas reales desde un JSON o una API externa).