CODEWITHSUNDEEP
reactjstypescriptgoogle-maps
aahhuhuhu
aahhuhuhu

Reputation: 493

I want to pass Marker component to GoogleMapReact children

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"} />

Upvotes: 4

Views: 949

Answers (1)

Yang Liu
Yang Liu

Reputation: 741

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/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
│  ├─ @googlemaps/js-api-loader@^1.7.0
│  ├─ [email protected]
├─ [email protected]

Upvotes: 2

Related Questions