I want to pass Marker component to GoogleMapReact children

user_10922854 0
Viewed 362

Typescript and react are used.
Markers are displayed at the clicked position using google-map-react.
The following error occurs when passing a Marker component to GoogleMapReact with children. Please let me know if you know how to solve this problem.

error

(alias) class GoogleMapReact (alias) namespace GoogleMapReact import GoogleMapReact No overloads match this call. Overload 1 of 2, '(props: Props | Readonly): googleMapReact', caused the following error type '{ children: Element; bootstrapURLKeys: { key: string; }; defaultCenter: { lat: number; lng: number; }; defaultZoom: number; onClick: (e: ClickEventValue) => void; }' cannot be assigned to types 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'children' does not exist for type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Overloading 2 of 2, '(props: Props, context: any): googleMapReact', caused the following error type '{ children: Element; bootstrapURLKeys: { key: string; }; defaultCenter: { lat: number; lng: number; }; defaultZoom: number; onClick: (e: ClickEventValue) => void; }' cannot be assigned to types 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Property 'children' does not exist for type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.

import GoogleMapReact from 'google-map-react';
export const Area = () => {
  const defaultLatLng = {
    lat: 10.99835602,
    lng: 77.01502627,
  },
return (
  <Box height="340px">
   <GoogleMapReact
    bootstrapURLKeys={{ key: Key }}
    defaultCenter={defaultLatLng}
    defaultZoom={10}
   >
    <Maker lat={59.955413} lng={30.337844} />
   </GoogleMapReact>
  </Box>
 )
}

interface SubProps {
  lat: number;
  lng: number;
}
const Maker: FunctionComponent<SubProps> = () => <img src="location.svg"} />
typescript reactjs google-maps
1 Answers

Probably has something to do with your dependencies.

My code is similar to yours:

  return (
    <div style={{ height: "100%", width: "100%" }}>
      <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)}
      >
        <GoogleMapCenterMarker />

        {storeLocations.map((storeLocation) => (
          <GoogleMapStoreMarker
            key={storeLocation.uniqueStoreName}
            lat={storeLocation.storeLocationLatitude}
            lng={storeLocation.storeLocationLongitude}
            store={storeLocation}
          />
        ))}
      </GoogleMapReact>

      <div className="mt-4">
        <div className="text-center">
          {" "}
          Latitude: <span>{lat}</span>, Longitude: <span>{lng}</span>
        </div>
        <div className="text-center">
          {" "}
          Zoom: <span>{zoom}</span>
        </div>
        <div className="text-center">
          {" "}
          Address: <span>{address}</span>
        </div>
      </div>
    </div>
  );

Here is my list of google map related dependencies:

├─ @googlemaps/js-api-loader@1.13.7
├─ @types/google-map-react@2.1.5
├─ @types/google.maps@3.48.1
├─ google-map-react@2.1.10
│  ├─ @googlemaps/js-api-loader@^1.7.0
│  ├─ workbox-google-analytics@6.5.2
├─ workbox-google-analytics@6.5.2
user_97854620
Related