fullstackreact / google-maps-react

Companion code to the "How to Write a Google Maps React Component" Tutorial
https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/
MIT License
1.64k stars 819 forks source link

zoom Props causing typescript errors #511

Open dahfool opened 3 years ago

dahfool commented 3 years ago

I am getting the following typescript error

TS2769: No overload matches this call.   Overload 1 of 2, '(props: IMapProps | Readonly<IMapProps>): Map', gave the following error.     Type '{ google: any; zoom: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Map> & Readonly<IMapProps> & Readonly<{ children?: ReactNode; }>'.       Property 'zoom' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Map> & Readonly<IMapProps> & Readonly<{ children?: ReactNode; }>'.   Overload 2 of 2, '(props: IMapProps, context: any): Map', gave the following error.     Type '{ google: any; zoom: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Map> & Readonly<IMapProps> & Readonly<{ children?: ReactNode; }>'.       Property 'zoom' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Map> & Readonly<IMapProps> & Readonly<{ children?: ReactNode;

The code


import { Map, GoogleApiWrapper, GoogleAPI } from 'google-maps-react'

export class MapContainer extends Component<GoogleAPI> {
  render() {
    if (!this.props.google) {
      return <div>Loading...</div>
    }

    return (
      <div
        style={{
          position: 'relative',
          height: 400,
        }}
      >
        <Map google={this.props.google} zoom={1} />
      </div>
    )
  }
}
export default GoogleApiWrapper({
  apiKey: '',
})(MapContainer)````
dahfool commented 3 years ago

using: "@types/google-maps-react": "^2.0.5", "google-maps-react": "^2.0.6",