# Debug Script para Vista Pública del Mapa

Si la vista pública se ve mal (mapa en sidebar o pantalla blanca), abre la consola del navegador (F12) y ejecuta estos comandos:

## 1. Verificar estado del DOM

```javascript
// Verificar si los elementos existen
console.log('=== VERIFICACIÓN DE ELEMENTOS ===');
console.log('Map div:', document.getElementById('map'));
console.log('Main container:', document.querySelector('.main-container'));
console.log('Sidebar:', document.querySelector('.sidebar'));
console.log('POI cards:', document.querySelectorAll('.poi-card').length);

// Ver estilos del mapa
const mapDiv = document.getElementById('map');
if (mapDiv) {
    const styles = window.getComputedStyle(mapDiv);
    console.log('=== ESTILOS DEL MAPA ===');
    console.log('Width:', styles.width);
    console.log('Height:', styles.height);
    console.log('Display:', styles.display);
    console.log('Position:', styles.position);
    console.log('Flex:', styles.flex);
}

// Ver estilos del contenedor principal
const mainContainer = document.querySelector('.main-container');
if (mainContainer) {
    const styles = window.getComputedStyle(mainContainer);
    console.log('=== ESTILOS DEL CONTENEDOR ===');
    console.log('Display:', styles.display);
    console.log('Flex-direction:', styles.flexDirection);
    console.log('Width:', styles.width);
    console.log('Height:', styles.height);
}

// Ver estilos del sidebar
const sidebar = document.querySelector('.sidebar');
if (sidebar) {
    const styles = window.getComputedStyle(sidebar);
    console.log('=== ESTILOS DEL SIDEBAR ===');
    console.log('Width:', styles.width);
    console.log('Display:', styles.display);
    console.log('Position:', styles.position);
}
```

## 2. Verificar estado del mapa de Google

```javascript
// Verificar si el mapa está inicializado
console.log('=== ESTADO DEL MAPA ===');
console.log('Map object:', map);
console.log('Markers count:', Object.keys(markers || {}).length);
console.log('POIs loaded:', pois ? pois.length : 0);
console.log('Event data:', event ? event.name : 'No event');
```

## 3. Forzar redimensionamiento

```javascript
// Intentar forzar redimensionamiento
if (map) {
    console.log('🔄 Forzando redimensionamiento...');
    google.maps.event.trigger(map, 'resize');
    
    // Re-centrar en el área si existe
    if (event && event.max_view_area && event.max_view_area.length > 0) {
        const bounds = new google.maps.LatLngBounds();
        event.max_view_area.forEach(point => {
            bounds.extend({ lat: parseFloat(point.lat), lng: parseFloat(point.lng) });
        });
        map.fitBounds(bounds, {
            padding: {
                top: 20,
                right: 20,
                bottom: 20,
                left: 20
            }
        });
        console.log('✅ Mapa redimensionado y recentrado');
    }
} else {
    console.error('❌ El mapa no está inicializado');
}
```

## 4. Verificar errores en consola

Busca estos posibles errores:

- `Cannot read property 'maps' of undefined` → API de Google Maps no cargada
- `Division by zero` → Bounds inválidos
- `Map: Expected mapDiv of type Element but was passed null` → Div del mapa no existe
- Errores de red (Failed to load resource) → Problemas con archivos SVG o imágenes

## 5. Verificar viewport (móvil)

En modo móvil (DevTools → Toggle device toolbar):

```javascript
// Verificar dimensiones
console.log('Viewport:', {
    width: window.innerWidth,
    height: window.innerHeight,
    isMobile: window.innerWidth <= 768
});

// Verificar si el sidebar está oculto en móvil
const sidebar = document.querySelector('.sidebar');
if (sidebar) {
    console.log('Sidebar display:', window.getComputedStyle(sidebar).display);
}
```

## Soluciones Comunes

### Si el mapa aparece dentro del sidebar:
1. Verifica que `.main-container` tenga `display: flex`
2. Verifica que `#map` tenga `flex: 1`
3. Verifica que `.sidebar` tenga `flex-shrink: 0`

### Si aparece pantalla blanca en móvil:
1. Verifica que `#map` tenga `height: 100vh` en media query
2. Verifica que Google Maps API esté cargando
3. Verifica que no haya errores de JavaScript bloqueando la inicialización

### Si los POIs no aparecen:
1. Verifica en consola: `console.log(pois)`
2. Verifica: `console.log(Object.keys(markers))`
3. Ejecuta: `Object.values(markers).forEach(m => m.setVisible(true))`