Working with react : "cannot read property 'lat' of undefined

I would like to mention it that I am new to react,this is my first try.
For the course I am following I need to create a single-page-app which loads google maps api and shows markers from foursquare.
I have an issue when I try to load up the markers,there is an error "cannot read property 'lat' of undefined,it has been many hours since I am trying to solve this issue and simply I can not get the hack of it. I was wondering if anyone can help.
I read through a lot of questions here but none seem to offer a solution.
I have attached a screenshot of the error and my code.

class App extends Component {
state = {
locations: ,
venueInfo: {},
query: ''
}
componentDidMount() {
this.setState({ isLoading: true });

// Foursquare api request
fetch(`https://api.foursquare.com/v2/venues/explore?ll=34.9003,33.6232&client_id=${Credentials.client_id}&client_secret=${Credentials.client_secret}&v=${Credentials.version_date}`)
.then(repsonse => repsonse.json())
.then(data => {
const locations = data.response.groups[0].items.map(item => {
return {
position: { lat: item.venue.location.lat, lng: item.venue.location.lng },
title: item.venue.name,
id: item.venue.id,
category: item.venue.categories[0].name,
address: item.venue.location.address,
crossStreet: item.venue.location.crossStreet,
state: item.venue.location.state,
coordinates: item.venue.location.lat + ', ' + item.venue.location.lng,
postalCode: item.venue.location.postalCode
}
})
this.setState({ locations })
})
.catch(err => {
console.log('Failed to fetch foursquare data', err)
})
}

import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react'
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export class MapContainer extends Component {
state = {
activeMaker: {},
selectedPlace: {},
showingInfoWindow: false
}

render() {
const bound = new this.props.google.maps.LatLngBounds()

for (let i = 0; i < this.props.locations.length; i++) {
bound.extend(this.props.locations[i].position)
}
return (
<Map
onClick={this.onMapClicked}
google={this.props.google}
initialCenter={{
lat: 34.9003,
lng: 33.6232
}}
zoom={15}
bounds={bound}>
return (
<Marker
key={window.location.id}
position={{ lat: window.location.position.lat, lng: window.location.position.lng }}
title={window.location.title}
onClick={this.onMarkerClick}
animation={this.props.google.maps.Animation.Fo}
category={window.location.category}
address={window.location.address}
crossStreet={window.location.crossStreet}
state={window.location.state}
coordinates={window.location.coordinates}
postalCode={window.location.postalCode} />
)

{/* <InfoWindow onClose={this.onInfoWindowClose}>
<div>
<h1>{this.state.selectedPlace.name}</h1>
</div>
</InfoWindow>*/}
</Map>
);
}
}

export default GoogleApiWrapper({
apiKey: 'AIzaSyDX5cjWZkxQXkCByGJKqVYes-K2_gMn2yQ'
})(MapContainer)


window.location.position

position

lat

undefined

map

locations

Marker

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.