Así que he estado tratando de construir mi propio mapa de Google agregando múltiples marcadores y mostrando ventanas de información basadas en datos de esos marcadores como ubicación, descripción, título, etc. Cuando tengo una variable que contiene los datos ficticios, funciona bien al abrir las ventanas de información, pero cuando lo moví para guardar los datos de props.data de cuando ingresé como una hoja de Excel, no me permite hacer clic en los marcadores. Los marcadores aparecen y todos están en los lugares correctos, pero cuando hago clic en el marcador, mi mapa vuelve a donde se encuentran mis coordenadas centrales predeterminadas y no abre la ventana de información.

Pensé que esto podría ser un problema de accesorios, así que traté de configurar un gancho de efecto de uso para guardar los accesorios entrantes en el estado y luego los marcadores se guardan en el estado en lugar de una variable, pero eso tampoco funciona cuando hago clic en los marcadores. No estoy seguro de si es algo en mi código o si necesito convertirlo en grupos de marcadores o algo así, pero no entiendo por qué funciona cuando uso variables de datos ficticios pero no datos de utilería.

 import React, { useState, useEffect } from "react"; import { GoogleMap, LoadScript, Marker, InfoWindow, } from "@react-google-maps/api"; import apiKey from "../config.js"; export const MapContainer = (props) => { const [selected, setSelected] = useState({}); const [accounts, setAccounts] = useState([]); useEffect((props) => { setAccounts(props.data); }, [props.data]) const onSelect = (item) => { setSelected(item); }; const mapStyles = { height: "50vh", width: "100%", }; let defaultCenter = (selected.location) ? selected.location : {lat: 37.9101, lng: -122.0652} return ( <LoadScript googleMapsApiKey={apiKey.apiKey}> <GoogleMap mapContainerStyle={mapStyles} zoom={12} center={defaultCenter}> { accounts.length > 0 && accounts.map((item) => { console.log(item) return ( <Marker key={item._id} position={{lat: item.latitude, lng: item.longitude}} onClick={() => onSelect(item)}> {selected.location && ( <InfoWindow position={selected.location} clickable={true} onCloseClick={() => setSelected({})} > <p>{selected.name}</p> <p>{selected.description}</p> </InfoWindow> )} </Marker> ); }) } </GoogleMap> </LoadScript> ); }; export default MapContainer;

Gracias de antemano por la ayuda, este me tiene totalmente perplejo.