{!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 />)}I have one state variable loading. If it is true then I want to show Loader. If its false then I want to show Google map.
Now problem is that, In google-map-react how can I set the variable after map loading is completed.
const [loading, setLoading] = useState(false);My code looks like this.
I defined const [mapApiLoaded, setMapApiLoaded] = React.useState(false); , similar to your loading state variable.
Notice below I have an attribute onGoogleApiLoaded={({ map, maps }) => apiHasLoaded(map, maps)}. apiHasLoaded is the where I set the variable after map loading.
<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)}
>
And my apiHasLoaded function is defined like this:
const apiHasLoaded = (map: any, maps: any) => {
console.log("apiHasLoaded");
setMapApiLoaded(true);
setMapInstance(map);
setMapApi(maps);
generateAddress();
};