{!loading ? ( <GoogleMapReact defaultZoom={isEqual(latLong, USLatLong) ? 4 : 18} defaultCenter={latLong.lat && latLong.lng ? latLong : USLatLong} bootstrapURLKeys={{ key: process.env.REACT_APP_GMP_API_KEY }} yesIWantToUseGoogleMapApiInternals onGoogleApiLoaded={handleApiLoaded} hoverDistance={20} onTilesLoaded={() => setLoading(false)} /> ) : ( <Loader />)}Tengo una carga variable de estado. Si es cierto, quiero mostrar Loader. Si es falso, quiero mostrar el mapa de Google.
Ahora el problema es que, en google-map-react, ¿cómo puedo configurar la variable después de que se complete la carga del mapa?
const [loading, setLoading] = useState(false);Mi código se ve así.
const [mapApiLoaded, setMapApiLoaded] = React.useState(false); , similar a su variable de estado de loading .
Observe a continuación que tengo un atributo onGoogleApiLoaded={({ map, maps }) => apiHasLoaded(map, maps)} . apiHasLoaded es donde configuro la variable después de cargar el mapa.
<GoogleMapReact center={center} zoom={zoom} draggable={draggable} onChange={onChange} onChildMouseDown={onMarkerInteraction} onChildMouseUp={onMarkerInteractionMouseUp} onChildMouseMove={onMarkerInteraction} onChildClick={onStoreMarkerClick} onClick={onClick} bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_MAP_API_KEY!, libraries: ["places", "geometry"], }} yesIWantToUseGoogleMapApiInternals onGoogleApiLoaded={({ map, maps }) => apiHasLoaded(map, maps)} >Y mi función apiHasLoaded se define así:
const apiHasLoaded = (map: any, maps: any) => { console.log("apiHasLoaded"); setMapApiLoaded(true); setMapInstance(map); setMapApi(maps); generateAddress(); };