Qfyilyi

Ok so I am stuck at this point in my project, I have created a google Map and are able to use foursquare to get a bunch of location places and turn them into markers for my map, the problem is that the markers do not load initially and will only show up after the search feature is used, I know I am getting the information asynchronously but have no idea how to tell the code to load the markers as soon as the promise is fulfilled. here is the code.

import React, { Component } from 'react';

import { Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps react';

import axios from 'axios';



var  AllPlaces = [



]





axios.get("https://api.foursquare.com/v2/venues/search?ll=40.7589,-73.9851&query=food&radius=2000&categoryId=4d4b7105d754a06374d81259&client_id=API&client_secret=API&v=20201215&limit=6").then(

response => {

response.data.response.venues.forEach(function(item){

  AllPlaces.push(

    {

      name: item.categories[0].name.toLowerCase(),

      lat: item.location.lat,

      lng: item.location.lng

    }

  )

})

}

)





class MapContainer extends Component {

state = {

showingInfoWindow: false,

activeMarker: {},

selectedPlace: {},

query:'',

filteredPlaces: 

};



markers = 





onMarkerClick = (props, marker, e) => {

this.setState({

selectedPlace: props,

activeMarker: marker,

showingInfoWindow: true

});

}



onLiClick = (i) =>{

this.setState({

showingInfoWindow: true,

activeMarker: this.markers[i],

selectedPlace: AllPlaces[i]

})

}





onMapClicked = (props) => {

if (this.state.showingInfoWindow) {

this.setState({

showingInfoWindow: false,

activeMarker: null

})

}

}





CreateInputField = () => (

<input

placeholder = "Search Nearby Places"

onChange={(event) => this.setState({filteredPlaces: AllPlaces.filter(place => !place.name.startsWith((event.target.value).toLowerCase()))})}

/>

)



render() {

return (

<div className = 'map-container' role='application' style=

{{marginleft:'250px'}}>

<div>

  <div className = 'navMenu'>

    <div className = 'List'>

      <h1 className = 'title'> Places to Eat

</h1>

        {this.CreateInputField()}

    </div>

    <div className = 'PlaceList'>

      <ol className='Places'>

        {AllPlaces.map((arrayItem, index)=>

        !this.state.filteredPlaces.includes(arrayItem) &&

          <li

          key = {index}

          className='Place'

          onClick={() => {this.onLiClick(index)}}

          >{arrayItem.name}</li>

        )}

      </ol>

    </div>

  </div>

</div>

<Map google={this.props.google} zoom={14}

  initialCenter = {{lat:40.7589, lng:-73.9851}}

  onClick={this.onMapClicked}>

  {AllPlaces.map((marker, i) =>

    !this.state.filteredPlaces.includes(marker) &&

      <Marker

      ref={(e) => {if (e) this.markers[i] = e.marker}}

      onClick={this.onMarkerClick}

      title = {marker.name}

      key = {i}

      name={marker.name}

      position =

 {{lat:marker.lat,lng:marker.lng}}

      />

  )}

  <InfoWindow

    onOpen={this.windowHasOpened}

    onClose={this.windowHasClosed}

    marker={this.state.activeMarker}

    visible={this.state.showingInfoWindow}>

    <div>

      <h1>{this.state.selectedPlace.name}</h1>

    </div>

  </InfoWindow>

 </Map>

 </div>

);

}

}



export default GoogleApiWrapper({

apiKey: 'KEY'

})(MapContainer)

Do the async request inside the component itself, then put that new value to component state. React will know to rerender when state changes, so all you need to worry about is managing the state. Async / await syntax also makes it cleaner

e.g.

class MapContainer extends Component {



  async componentWillMount() {

    const axiosData = await axios

      .get(

        'https://api.foursquare.com/v2/venues/search?ll=40.7589,-73.9851&query=food&radius=2000&categoryId=4d4b7105d754a06374d81259&client_id=API&client_secret=API&v=20201215&limit=6'

      )

      .then(response =>

        response.data.response.venues.map(v => ({

          name: v.categories[0].name.toLowerCase(),

          lat: v.location.lat,

          lng: v.location.lng,

        }))

      );

    this.setState({axiosData})  

  }