Passing props down on 1.1.4 version

[matheus-rosin]

Yesterday, I upgraded to 1.1.4 because I was getting an error, namely, window is not defined. Since then, that was fixed, but now a lot of props is being passed down to children components (at least I suppose). These errors do not break the application, but my console is pretty red.

I will list them here just in case you are interested in fix this:

• Received false for a non-boolean attribute $hover.;
• React does not recognize the $getDimensions prop on a DOM element. [...];
• React does not recognize the $dimensionKey prop on a DOM element. [...];
• React does not recognize the $geoService prop on a DOM element. [...];
• React does not recognize the $onMouseAllow prop on a DOM element. [...];
• Received true for a non-boolean attribute $prerender.;
• Invalid attribute name: $hover;
• Invalid attribute name: $getDimensions;
• Invalid attribute name: $dimensionKey;
• Invalid attribute name: $geoService;
• Invalid attribute name: $onMouseAllow;
• Invalid attribute name: $prerender.

[itsmichaeldiego]

@matheus-rosin Thanks for reporting this, the only change I did not revert of 1.1.3 is #728, @barakplasma could you take a look at this? Otherwise I might need to revert that too.

[barakplasma]

I'll take a look in about 12 hours

[barakplasma]

I took a look at the latest version of google-map-react using https://github.com/barakplasma/google-map-react-examples on version 1.1.4 to see if I could recreate the console errors @matheus-rosin encountered, but was unable to recreate them.

[itsmichaeldiego]

Thanks @barakplasma

@matheus-rosin Could you double-check cleaning cache? And if not provide a live example? As we cannot repro we cannot help, thanks.

Will re-open when live example available

[matheus-rosin]

So here is the deal: I used the rest operator for getting all props (e.g. {abc, def, ...props}) and spread them on the markers, and in the midst of them were those $hover etc. It was all my fault!

Sorry for wasting your time 😅

[itsmichaeldiego]

@mattydoincode No problem, that makes sense.

[exrhizo]

I am having the same problem,

const OrderMap = ({ classes, lat, lng }) => 
<GoogleMapReact
        bootstrapURLKeys={{ key: GOOGLE_API_KEY }}
        center={{ lat, lng }}
        zoom={zoom}
      >
        {children}
 </GoogleMapReact>

And using it like this:

<GoogleMap lat={order.latitude} lng={order.longitude}>
      <div lat={order.latitude} lng={order.longitude}>
        <Avatar className={classes.customerAvatar} src={CustomerIcon} />
      </div>
</GoogleMap>

At first I tried without the div, seeing if react would have a different way of dealing, but still getting:

index.js:1 Warning: Invalid attribute name: `$onMouseAllow`
    in div (at OrderMap.jsx:27)
    in div (created by GoogleMapMarkers)
    in div (created by GoogleMapMarkers)
    in GoogleMapMarkers (created by GoogleMapMarkersPrerender)
    in div (created by GoogleMapMarkersPrerender)
    in GoogleMapMarkersPrerender (created by GoogleMap)
    in div (created by GoogleMap)
    in GoogleMap (at GoogleMap.jsx:33)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at GoogleMap.jsx:32)
    in GoogleMap (created by WithStyles(GoogleMap))
    in WithStyles(GoogleMap) (at OrderMap.jsx:17)
    in OrderMap (created by WithStyles(OrderMap))

[itsmichaeldiego]

@exrhizo This library expects react components, not html elements, you should follow the main example in the README and do something like:

const AnyReactComponent = (_props) => <Avatar className={classes.customerAvatar} src={CustomerIcon} />;

<GoogleMap {...props}>
  <AnyReactComponent 
    lat={order.latitude} 
    lng={order.longitude}
  />
</GoogleMap>

[exrhizo]

Okay thank you, the problem I was having is that the Material UI Avatar does this:
"Any other props supplied will be provided to the root element (native element)."

[itsmichaeldiego]

I am glad you folks could fix that!

[mohamedshahrul]

I am having the similar issue. Can you please help me?

[giorgiabosello]

I am having the similar issue. Can you please help me?

see comment before.

[boy331990]

I solved it.
lot of people probably wrote it like this.
<GoogleMapReact bootstrapURLKeys={{key: API_KEY}} center={coordinates} defaultZoom={14} margin = {[50, 50, 50, 50]} options={{ disableDefaultUI: true, zoomControl: true, styles: mapStyles, }} onChange={(e) => { setCoordinates({lat: e.center.lat, lng: e.center.lng}); setBounds({ne : e.marginBounds.ne, sw: e.marginBounds.sw}); }} yesIWantToUseGoogleMapApiInternals onChildClick={(child) => setChildClicked(child)} > { places?.map((place, i) => ( <div className={classes.markerContainer} lat={place.latitude} lng={place.longitude} key={i} > { !isDesktop ? ( <LocationOnOutlinedIcon color="primary" fontSize="large" /> ) : ( <Paper elevation={3} className={classes.paper}> <Typography className={classes.typography} variant="subtitle2" gutterBottom> {place.name} </Typography> <img className={classes.pointer} src={place.photo ? place.photo.images.large.url : "http://sniblog.co.kr/wp-content/uploads/2018/08/20180819_202541.jpg"} alt={place.name} /> <Rating size="small" value={Number(place.rating)} readOnly /> </Paper> ) } </div> )) } </GoogleMapReact>
The problem here is the places.map
The solution is to define the components and use them.

`
const AnyReactComponent = ({ place, key, lat, lng }) => {
const classes = useStyles();
const isDesktop = useMediaQuery('(min-width:600px)');
return (

{
!isDesktop ? (

) : (


{place.name}

<img
className={classes.pointer}
src={place.photo ? place.photo.images.large.url : "http://sniblog.co.kr/wp-content/uploads/2018/08/20180819_202541.jpg"}
alt={place.name}
/>


)
}

);
}

const Map = ({setCoordinates, setBounds, coordinates, places, setChildClicked}) => {
return (

<GoogleMapReact
...
>
{
places?.map((place, i) => (

))
}

)
`

In fact, I don't know if this is the right solution, but the error has disappeared anyway.