Here is the error that I got after following the tutorial until 1:03:45.

TypeError: undefined is not an object (evaluating 'sw.lat')

Can somebody help me please ?

I am stuck @ 1:05:26 ...

I am getting this error <TypeError: Cannot read properties of undefined (reading 'lat') at getPlacesData (bundle.js:287:25)>

any help !!

Why I get this error, make no sense?

TypeError: Cannot read property 'ne' of null (anonymous function) src/App.js:23 20 | }, []) 21 | 22 | useEffect(() => {

23 | console.log(bounds.ne) | ^ 24 | getPlacesData() 25 | .then((data) => { 26 | setPlaces(data);

Getting the error below, any suggestions to fix it?

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'filter') (anonymous function) src/App.js:45 ` getPlacesData(type, bounds.sw, bounds.ne) .then((data) => { setPlaces(data.filter((place) => place.name && place.num_reviews > 0)); setFilteredPlaces([]); setRating(''); setIsLoading(false);

I followed the tutorial but about a week after completing I cant seem to get the 'length' property to work with the GoogleMapReact component without getting this error back. Looking forward to feedback.

This page can't load Google Maps correctly.

This was the message I got while trying to follow the tutorial. Thanks a lot, you are doing a great job :)

Tried following the Travel Companion App up to https://youtu.be/GDa8kZLNhJ4?t=1287 (time where I stopped) but after adding the header, list, map, in the app.js file, all that's rendering on the browser is "header, header, header". I've rewatched it multiples times, compared my code to your github but no luck. Any ideas where I can check?

Here's my repo: https://github.com/enosV/travelapp

App.js component that makes Travel Advisor API call that populates the data object:

import React from 'react'
import GoogleMapReact from 'google-map-react'
import {Paper, Typography, useMediaQuery} from '@material-ui/core'
import  LocationOnOutlinedIcon  from '@material-ui/icons/LocationOnOutlined'
import Rating from "@material-ui/lab"

import useStyles from './styles'

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

  const classes = useStyles()
  const isMobile = useMediaQuery('(min-width: 600px)')
  
  //console.log(coordinates)
  //const coordinates= {lat: 0, lng: 0}
  
  return (
    <div className={classes.mapContainer}>
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'AIzaSyDRtM04BLKwgBtvMIXRD1xRPe1bdHSUDmo'}}
            defaultCenter ={coordinates}
            center = {coordinates}
            defaultZoom = {14}
            margin = {[50, 50, 50, 50]}
            options = {''}
            onChange = {(e) => {
              console.log(e)
              setCoordinates({lat: e.center.lat, lng: e.center.lng});
              
            }}
          
            onChildClick = {''}
        >

        </GoogleMapReact>
    </div>
  )
}

export default Mapconst App = () => {
  const [places, setPlaces] = useState([]);
  const [coordinates, setCoordinates] = useState({});
  const [bounds, setBounds] = useState(null);

  useEffect(() => {
    getPlacesData().then((data) => {
    console.log(data) // data is there
      setPlaces(data);
    });
  }, []);

  return (
    <>
      <CssBaseline />
      <Header />
      <Grid container spacing={3} style={{ width: "100%" }}>
        <Grid item xs={12} md={4}>
          <List />
        </Grid>

        <Grid item xs={12} md={8}>
          <Map
            setCoordinates={setCoordinates}
            setBounds={setBounds}
            coordinates={coordinates}
          />
        </Grid>
      </Grid>
    </>
  );
};

export default App;

For some reason coordinates prop is not populated in onChange as seen in the video. I double check the code and cannot find what is stopping it from getting the data:

import React from 'react'
import GoogleMapReact from 'google-map-react'
import {Paper, Typography, useMediaQuery} from '@material-ui/core'
import  LocationOnOutlinedIcon  from '@material-ui/icons/LocationOnOutlined'
import Rating from "@material-ui/lab"

import useStyles from './styles'

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

  const classes = useStyles()
  const isMobile = useMediaQuery('(min-width: 600px)')
  
  //console.log(coordinates)
  //const coordinates= {lat: 0, lng: 0}
  
  return (
    <div className={classes.mapContainer}>
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'AIzaSyDRtM04BLKwgBtvMIXRD1xRPe1bdHSUDmo'}}
            defaultCenter ={coordinates}
            center = {coordinates}
            defaultZoom = {14}
            margin = {[50, 50, 50, 50]}
            options = {''}
            onChange = {(e) => {
              console.log(e) // this is empty
              setCoordinates({lat: e.center.lat, lng: e.center.lng});
              
            }}
          
            onChildClick = {''}
        >

        </GoogleMapReact>
    </div>
  )
}

export default Map

The API call returns a bunch of restaurants, so the call works. But I cannot get {coordinates} prop populated....

Hello,

when I try to run the program I get this error:

Compiled with problems:

ERROR in ./src/index.js 8:38-41 export 'default' (imported as 'App') was not found in './App' (module has no exports)

It seems like an easy error to solve. I tried to export as a function and import and export as non-default etc and no luck. Any ideas about what going on? FYI i copy pasted the GitHub files so the code is the same.

Thank you, J.R.

Array.fill() should have at list one argument, and right it hasn't, in this case it's not make sens to write Array(places.length).fill().map(), why not make it simpler places.map()