Now, I am trying to create an app with react and I am using Google Map API for the project.

I got this error but I have no idea why this occurs.

If anyone knows any clues please let me now.

import React from 'react';
import GoogleMapReact from 'google-map-react';
import { Paper, Typography, useMediaQuery } from '@material-ui/core';

import useStyles from './styles'


const Map = () => {
  const classes = useStyles()
  const isMobile = useMediaQuery('(min-width:600px)')

  const coordinates = { lat: 0, lng: 0 }

  return (
    <div className={classes.mapContainer}>
      <GoogleMapReact>
        bootstrapURLKeys={{ key: 'AaosjbnsajsnbjIUYIkbbaskjbd' }}
        defaultCenter={coordinates}
        center={coordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={''}
        onChange={''}
        onChildClick={''}
      </GoogleMapReact>
    </div>

  )
}

export default Map;

CodePudding user response：

a simple > is misplaced. Instead of passing props , unintentionally, you are passing children to the component.

   <GoogleMapReact>
        bootstrapURLKeys={{ key: 'AaosjbnsajsnbjIUYIkbbaskjbd' }}
        defaultCenter={coordinates}
        center={coordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={''}
        onChange={''}
        onChildClick={''}
      </GoogleMapReact>

change it to this:

   <GoogleMapReact
        bootstrapURLKeys={{ key: 'AaosjbnsajsnbjIUYIkbbaskjbd' }}
        defaultCenter={coordinates}
        center={coordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={''}
        onChange={''}
        onChildClick={''}>
      </GoogleMapReact>

CodePudding user response：

Look at GoogleMapReact props <GoogleMapReact ...props></GoogleMapReact>