Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onLoad prop return type error, but the map loads correctly #3316

Open
darlanZero opened this issue Dec 11, 2023 · 0 comments
Open

onLoad prop return type error, but the map loads correctly #3316

darlanZero opened this issue Dec 11, 2023 · 0 comments

Comments

@darlanZero
Copy link

on the code of a map:

`const mapRef = useRef<GoogleMap | null>(null)

const center = useMemo(() => ({
lat: -19.947128,
lng: -45.165717
}), [])

const options = useMemo(() => ({
mapId: 'd78eeda2034f463a',
clickableIcons: false,
}), [])

const onLoad = useCallback((map: GoogleMap) =>{ mapRef.current = map}, [])

return



Commute?


<Places setOffice={(position) => {
setOffice(position)
mapRef.current?.panTo(position)
}} />

  <div className=" p-10 gap-10 bg-white rounded-lg ">
    <RadioGroup
      isRequired
      label='Sistema'
      {...register('selectedSistema')}
    >
      <Radio value="agua">Água</Radio>
      <Radio value="esgoto">Esgoto</Radio>
      <Radio value="outro">Outro</Radio>
    </RadioGroup>

    <RadioGroup
      isRequired
      label="Tipo de Ativo"
      {...register('selectedTipoAtivo')}
    >
      <Radio value="visivel">Visível</Radio>
      <Radio value="enterrado">Enterrado</Radio>
    </RadioGroup>

    <RadioGroup
      isRequired
      label="Localidade"
      {...register('selectedLocalidade')}
    >
      <Radio value="localidade1">Localidade 1</Radio>
      <Radio value="localidade2">Localidade 2</Radio>
      <Radio value="localidade3">Localidade 3</Radio>
    </RadioGroup>
  </div>
</div>

<div className="w-4/5 h-full">
  <GoogleMap
    zoom={15}
    center={center}
    mapContainerClassName="map-container"
    options={options}
    onLoad={onLoad}
    onClick={handleMapClick}
  >
    {office && (
      <>
        <Marker 
          position={office} 
          icon={defaultMarker} 
          title="location"
        />
      </>
    )}
      
     {markers.map((marker) => (
       <Marker 
          key={marker.id}
          position={marker.position}
          onClick={() => handleMarkerClick(marker)}
          icon={ativo}
       />
     ))}

     {selectedMarker && (
       <InfoWindow
        key={selectedMarker.id}
        position={selectedMarker.position}
        onCloseClick={handleMarkerClose}
       >
          <div>
            <h2>Editar nome de Ativo</h2>
             <Input 
                placeholder="Nome do ativo"
                value={inputValue}
                onChange={handleInputChange}
                type="text"
             />
          </div>
       </InfoWindow>
     )}
  </GoogleMap>
</div>
; }`

the onLoad keeps getting this error:
No overload matches this call.
Overload 1 of 2, '(props: GoogleMapProps | Readonly): GoogleMap', generated the following error.
Type '(map: GoogleMap) => void' cannot be assigned to type '(map: Map) => void | Promise'.
Types of parameters 'map' and 'map' are incompatible.
Type 'Map' has no properties in common with type 'GoogleMap': state, registeredEvents, mapRef, getInstance, and 11 more.
Overload 2 of 2, '(props: GoogleMapProps, context: any): GoogleMap', generated the following error.
Type '(map: GoogleMap) => void' cannot be assigned to type '(map: Map) => void | Promise'.ts(2769)
index.d.ts(78, 5): The expected type comes from property 'onLoad', which is declared here in type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'
index.d.ts(78, 5): The expected type comes from property 'onLoad', which is declared here in type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'

I'm using the latest version of react-google-maps/api. My only choice is getting to the map a any, but it doesn't will deploy correctly with this error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant