Google map react

Question

 {!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);

const handleApiLoaded: (maps: { map: any; maps: any; ref: Element | null }) => void = async ({ map, maps }) => { setGoogleAPI({ map, maps }); }; — Mohammed Mak, Feb 16 '22 at 14:08
So, onTilesLoaded={() => setLoading(false)} is not changing the state? — yovchokalev, Feb 16 '22 at 14:30

score 0 · Answer 1 · answered Mar 13 '22 at 02:23

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();
  };

Google map react

1 Answers1