diff --git a/geomapp/src/components/GoogleMap.jsx b/geomapp/src/components/GoogleMap.jsx index e9e9c35..92aff9f 100644 --- a/geomapp/src/components/GoogleMap.jsx +++ b/geomapp/src/components/GoogleMap.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api'; import UpdateLocationButton from './MapsButton'; // Asegúrate de importar el componente del botón + /* Ajusta los estilos del contenedor principal para eliminar márgenes y padding */ // Ajusta los estilos del contenedor principal para eliminar márgenes y padding const containerStyle = { @@ -40,19 +41,95 @@ const GoogleMapComponent = ({ onMapLoad, filterType }) => { const [map, setMap] = useState(null); const [userLocation, setUserLocation] = useState(center); const [selectedPlace, setSelectedPlace] = useState(null); + const [showInfoPanel, setShowInfoPanel] = useState(false); const lugares = [ - { nombre: 'Costanera Center', lat: -33.4175, lng: -70.6067, tipo: 'tiendas', descripcion: 'Centro comercial más grande de Santiago y torre más alta de Latinoamérica.'}, - { nombre: 'Parque Bicentenario', lat: -33.3989, lng: -70.6001, tipo: 'alojamientos', descripcion: 'Un hermoso parque en Vitacura, ideal para actividades al aire libre.'}, - { nombre: 'Restaurante El Buen Sabor', lat: -33.4372, lng: -70.6506, tipo: 'restaurantes', descripcion: 'Un restaurante con deliciosa comida local.'}, - // Añade más lugares aquí... - ]; - + { + nombre: 'Costanera Center', + lat: -33.4175, + lng: -70.6067, + tipo: 'tiendas', + descripcion: 'Centro comercial más grande de Santiago y torre más alta de Latinoamérica.', + precio: 'Entrada libre', + contacto: '+56 2 2916 9200', + direccion: 'Avenida Andrés Bello 2425, Providencia', + categoria: 'Centro Comercial', + horario_apertura: '10:00 AM', + horario_cierre: '09:00 PM' + }, + { + nombre: 'Parque Bicentenario', + lat: -33.3989, + lng: -70.6001, + tipo: 'alojamientos', + descripcion: 'Un hermoso parque en Vitacura, ideal para actividades al aire libre.', + precio: 'Entrada libre', + contacto: '+56 2 2216 9121', + direccion: 'Avenida Bicentenario 3236, Vitacura', + categoria: 'Parque', + horario_apertura: '07:00 AM', + horario_cierre: '08:00 PM' + }, + { + nombre: 'Restaurante El Buen Sabor', + lat: -33.4372, + lng: -70.6506, + tipo: 'restaurantes', + descripcion: 'Un restaurante con deliciosa comida local.', + precio: 'Precio promedio: $15,000 CLP', + contacto: '+56 2 2234 5678', + direccion: 'Calle Falsa 123, Santiago Centro', + categoria: 'Restaurante', + horario_apertura: '12:00 PM', + horario_cierre: '11:00 PM' + }, + { + nombre: 'Museo Nacional de Bellas Artes', + lat: -33.4367, + lng: -70.6417, + tipo: 'cultura', + descripcion: 'Museo con una impresionante colección de arte chileno y latinoamericano.', + precio: '$1,000 CLP', + contacto: '+56 2 2496 1224', + direccion: 'José Miguel de La Barra 650, Santiago Centro', + categoria: 'Museo', + horario_apertura: '10:00 AM', + horario_cierre: '06:00 PM' + }, + { + nombre: 'Cerro San Cristóbal', + lat: -33.4299, + lng: -70.6344, + tipo: 'turismo', + descripcion: 'Uno de los cerros más grandes de Santiago, con vistas panorámicas de la ciudad.', + precio: 'Entrada libre', + contacto: '+56 2 2738 8600', + direccion: 'Pio Nono 450, Recoleta', + categoria: 'Turismo', + horario_apertura: '08:30 AM', + horario_cierre: '08:00 PM' + }, + { + nombre: 'Mercado Central', + lat: -33.4361, + lng: -70.6483, + tipo: 'comida', + descripcion: 'Famoso mercado donde se puede disfrutar de mariscos frescos y cocina local.', + precio: 'Precio varía por restaurante', + contacto: '+56 2 2698 1719', + direccion: 'San Pablo 967, Santiago Centro', + categoria: 'Mercado', + horario_apertura: '09:00 AM', + horario_cierre: '05:00 PM' + } +]; // Filtrar los lugares según el filtro seleccionado const lugaresFiltrados = lugares.filter((lugar) => { return filterType === '' || lugar.tipo === filterType; }); + + // Obtener ubicación actual del usuario useEffect(() => { if (navigator.geolocation) { @@ -107,11 +184,23 @@ const GoogleMapComponent = ({ onMapLoad, filterType }) => { {/* Panel de información del lugar seleccionado */} {selectedPlace && ( -
-

{selectedPlace.nombre}

-

{selectedPlace.descripcion}

+
+

{selectedPlace.nombre}

+

{selectedPlace.descripcion}

+
+

Precio: {selectedPlace.precio}

+

Categoría: {selectedPlace.categoria}

+

Horario de Apertura: {selectedPlace.horario_apertura}

+

Horario de Cierre: {selectedPlace.horario_cierre}

+

Dirección: {selectedPlace.direccion}

+

Contacto: {selectedPlace.contacto}

+

+
- )} +
)} + + +
); }; diff --git a/geomapp/src/pages/mapa.jsx b/geomapp/src/pages/mapa.jsx index bb97c10..d2bee80 100644 --- a/geomapp/src/pages/mapa.jsx +++ b/geomapp/src/pages/mapa.jsx @@ -12,8 +12,13 @@ const Mapa = () => { const [selectedPlace, setSelectedPlace] = useState(null); const [userLocation, setUserLocation] = useState(null); const [mapInstance, setMapInstance] = useState(null); // Estado para almacenar el objeto map + const [showInfoPanel, setShowInfoPanel] = useState(false) const [filterType, setFilterType] = useState(''); + const handleCloseClick = () => { + setShowInfoPanel(false); // Cierra el panel + }; + const rightPanelStyle = { width: '25%', // Ancho del panel lateral diff --git a/geomapp/src/pages/servicios.jsx b/geomapp/src/pages/servicios.jsx index 9325953..7360826 100644 --- a/geomapp/src/pages/servicios.jsx +++ b/geomapp/src/pages/servicios.jsx @@ -36,9 +36,11 @@ const Servicios = () => {



+

+