Closed bicky-tmg closed 2 years ago
Please provide more context to how what features you are using and what you are trying to accomplish, to give everyone more info to help with.
The GoogleMap
component does take children as a prop:
interface GoogleMapProps {
children?: ReactNode | undefined;
id?: string | undefined;
mapContainerStyle?: CSSProperties | undefined;
mapContainerClassName?: string | undefined;
options?: google.maps.MapOptions | undefined;
/** Additional map types to overlay. Overlay map types will display on top of the base map they are attached to, in the order in which they appear in the overlayMapTypes array (overlays with higher index values are displayed in front of overlays with lower index values). */
extraMapTypes?: google.maps.MapType[] | undefined;
/** The initial Map center. */
center?: google.maps.LatLng | google.maps.LatLngLiteral | undefined;
/** When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable. */
clickableIcons?: boolean | undefined;
/** The heading for aerial imagery in degrees measured clockwise from cardinal direction North. Headings are snapped to the nearest available angle for which imagery is available. */
heading?: number | undefined;
/** The initial Map mapTypeId. Defaults to ROADMAP. */
mapTypeId?: string | undefined;
/** A StreetViewPanorama to display when the Street View pegman is dropped on the map. If no panorama is specified, a default StreetViewPanorama will be displayed in the map's div when the pegman is dropped. */
streetView?: google.maps.StreetViewPanorama | undefined;
/** Controls the automatic switching behavior for the angle of incidence of the map. The only allowed values are 0 and 45. The value 0 causes the map to always use a 0° overhead view regardless of the zoom level and viewport. The value 45 causes the tilt angle to automatically switch to 45 whenever 45° imagery is available for the current zoom level and viewport, and switch back to 0 whenever 45° imagery is not available (this is the default behavior). 45° imagery is only available for satellite and hybrid map types, within some locations, and at some zoom levels. Note: getTilt returns the current tilt angle, not the value specified by this option. Because getTilt and this option refer to different things, do not bind() the tilt property; doing so may yield unpredictable effects. */
tilt?: number | undefined;
/** The initial Map zoom level. Required. Valid values: Integers between zero, and up to the supported maximum zoom level. */
zoom?: number | undefined;
/** This event is fired when the user clicks on the map. An ApiMouseEvent with properties for the clicked location is returned unless a place icon was clicked, in which case an IconMouseEvent with a placeId is returned. IconMouseEvent and ApiMouseEvent are identical, except that IconMouseEvent has the placeId field. The event can always be treated as an ApiMouseEvent when the placeId is not important. The click event is not fired if a Marker or InfoWindow was clicked. */
onClick?: ((e: google.maps.MapMouseEvent) => void) | undefined;
/** This event is fired when the user double-clicks on the map. Note that the click event will also fire, right before this one. */
onDblClick?: ((e: google.maps.MapMouseEvent) => void) | undefined;
/** This event is repeatedly fired while the user drags the map. */
onDrag?: (() => void) | undefined;
/** This event is fired when the user stops dragging the map. */
onDragEnd?: (() => void) | undefined;
/** This event is fired when the user starts dragging the map. */
onDragStart?: (() => void) | undefined;
/** This event is fired whenever the user's mouse moves over the map container. */
onMouseMove?: ((e: google.maps.MapMouseEvent) => void) | undefined;
/** This event is fired when the user's mouse exits the map container. */
onMouseOut?: ((e: google.maps.MapMouseEvent) => void) | undefined;
/** This event is fired when the user's mouse enters the map container. */
onMouseOver?: ((e: google.maps.MapMouseEvent) => void) | undefined;
/** This event is fired when the DOM mousedown event is fired on the map container. */
onMouseDown?: ((e: google.maps.MapMouseEvent) => void) | undefined;
/** This event is fired when the DOM mouseup event is fired on the map container. */
onMouseUp?: ((e: google.maps.MapMouseEvent) => void) | undefined;
/** This event is fired when the DOM contextmenu event is fired on the map container. */
onRightClick?: ((e: google.maps.MapMouseEvent) => void) | undefined;
/** This event is fired when the mapTypeId property changes. */
onMapTypeIdChanged?: (() => void) | undefined;
/** This event is fired when the visible tiles have finished loading. */
onTilesLoaded?: (() => void) | undefined;
/** This event is fired when the viewport bounds have changed. */
onBoundsChanged?: (() => void) | undefined;
/** This event is fired when the map center property changes. */
onCenterChanged?: (() => void) | undefined;
/** This event is fired when the map heading property changes. */
onHeadingChanged?: (() => void) | undefined;
/** This event is fired when the map becomes idle after panning or zooming. */
onIdle?: (() => void) | undefined;
/** This event is fired when the projection has changed. */
onProjectionChanged?: (() => void) | undefined;
/** This event is fired when the map size has changed. */
onResize?: (() => void) | undefined;
/** This event is fired when the map tilt property changes. */
onTiltChanged?: (() => void) | undefined;
/** This event is fired when the map zoom property changes. */
onZoomChanged?: (() => void) | undefined;
/** This callback is called when the map instance has loaded. It is called with the map instance. */
onLoad?: ((map: google.maps.Map) => void | Promise<void>) | undefined;
/** This callback is called when the component unmounts. It is called with the map instance. */
onUnmount?: ((map: google.maps.Map) => void | Promise<void>) | undefined;
}
looks like you have conflicting multiple versions of @types/react and/or @types/react-dom
Hi,
I found this issue via Google search. I have no @types packages installed, and I get the same error, children not allowed. These are packages I am using:
"react": "16.8",
"react-dom": "16.8",
"react-google-maps": "^9.4.5",
I import maps like this:
import { GoogleMap, GoogleMapProps } from "react-google-maps";
When I Ctrl+click on GoogleMapProps
, my IDE opens this file:
node_modules/react-google-maps/types/index.d.ts
and the Interface does not contain children:
declare module 'react-google-maps/lib/components/GoogleMap' {
import { Component } from 'react'
export interface GoogleMapProps {
defaultCenter?: google.maps.LatLng | google.maps.LatLngLiteral
defaultClickableIcons?: boolean
defaultHeading?: number
defaultMapTypeId?: google.maps.MapTypeId | string
defaultOptions?: google.maps.MapOptions
defaultStreetView?: google.maps.StreetViewPanorama
defaultTilt?: number
defaultZoom?: number
center?: google.maps.LatLng | google.maps.LatLngLiteral
clickableIcons?: boolean
heading?: number
mapTypeId?: google.maps.MapTypeId | string
options?: google.maps.MapOptions
streetView?: google.maps.StreetViewPanorama
tilt?: number
zoom?: number
onBoundsChanged?(): void
onCenterChanged?(): void
onClick?(e: google.maps.MouseEvent | google.maps.IconMouseEvent): void
onDblClick?(e: google.maps.MouseEvent): void
onDrag?(): void
onDragEnd?(): void
onDragStart?(): void
onHeadingChanged?(): void
onIdle?(): void
onMapTypeIdChanged?(): void
onMouseMove?(e: google.maps.MouseEvent): void
onMouseOut?(e: google.maps.MouseEvent): void
onMouseOver?(e: google.maps.MouseEvent): void
onProjectionChanged?(): void
onResize?(): void
onRightClick?(e: google.maps.MouseEvent): void
onTilesLoaded?(): void
onTiltChanged?(): void
onZoomChanged?(): void
}
export default class GoogleMap extends Component<GoogleMapProps> {
fitBounds(bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral): void
panBy(x: number, y: number): void
panTo(latLng: google.maps.LatLng | google.maps.LatLngLiteral): void
panToBounds(latLngBounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral): void
getBounds(): google.maps.LatLngBounds
getCenter(): google.maps.LatLng
getClickableIcons(): boolean
getDiv(): Element
getHeading(): number
getMapTypeId(): google.maps.MapTypeId | string
getProjection(): google.maps.Projection
getStreetView(): google.maps.StreetViewPanorama
getTilt(): number
getZoom(): number
}
}
Sorry, this was an IDE issue for me. VSCode ships with its own (current) Typescript version. I installed typescript@3.8 (3.9 did not work) after looking at the create-react-app
script. Set the IDE to use that and the error disappeared.
I have the same issue.
I have the same issue, I copied code straight from the documentation and installed all packages, also I installed @types packages and this still didn't solve this issue
This solution work for me:
I added declaration and add manually type for children in local .d.ts file:
declare module "react-google-maps" { interface GoogleMapProps { children?: ReactNode | undefined } }
@Wolfram2159 sorry, wrong repo. react-google-maps
is not maintained for over 5 years, this is different library @react-google-maps/api
Hello @bicky-tmg @henrilp @urkin-dev were you able to solve this. I am also getting the same issue.
Wrong repo. You are using outdated react-google-maps-api. This is different project, we had changed a lot of stuff for 5 years
Type error: No overload matches this call. Overload 1 of 2, '(props: GoogleMapProps | Readonly): GoogleMap', gave the following error.
Type '{ children: Element; zoom: number; mapContainerClassName: string; onLoad: (map: Map) => void; onDrag: () => void; options: { fullscreenControl: false; zoomControl: false; ... 4 more ...; styles: { ...; }[]; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Overload 2 of 2, '(props: GoogleMapProps, context: any): GoogleMap', gave the following error.
Type '{ children: Element; zoom: number; mapContainerClassName: string; onLoad: (map: Map) => void; onDrag: () => void; options: { fullscreenControl: false; zoomControl: false; ... 4 more ...; styles: { ...; }[]; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.