Ndtyjky

Last Query from me about this,
I have done everything I need to at this point except for one thing, no mater what I try I cant seem to get the search to show items on the list and markers on the map.
Ive tried to use filter but can only get the list to narrow down when the input field has something. I cant seem to get the markers and List to change.
Here is the code I have so far

import React, { Component } from 'react';

import { Map, InfoWindow, Marker, GoogleApiWrapper 

} from 'google-maps-react';



var  AllPlaces = [

{

"name" : "Pizza",

"lat": "40.7589",

"lng":"-73.9851",

},



{

"name" : "Cookies",

"lat": "40.7690",

"lng":"-73.9952",

},

{

"name" : "Bagels",

"lat": "40.7489",

"lng":"-73.9751",

}

]



class MapContainer extends Component {

state = {

showingInfoWindow: false,

activeMarker: {},

selectedPlace: {},

query:'',

};



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"

/>

)



findPlaces = () => (

<ol className='Places'>

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

    <li

    key = {index}

    className='Place'

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

    >{arrayItem.name}</li>

  )}

</ol>

);



render() {

return (

  <div className = 'map-container' style= 

{{marginleft:'250px'}}>

    <div>

      <div className = 'sideMenu'>

        <div className = 'List'>

          <h1 className = 'title'> Places to Eat 

</h1>

            {this.CreateInputField()}

        </div>

        <div className = 'PlaceList'>

          {this.findPlaces()}

        </div>

      </div>

    </div>

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

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

      onClick={this.onMapClicked}>

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

          <Marker

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

 e.marker}}

          onClick={this.onMarkerClick}

          title = {marker.name}

          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: 'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'

})(MapContainer)

I have been stuck on this for about 2 weeks now and just need a little guidance on it.

Try this, I've created an array inside state to store the filtered out locations. When you type it filters and updates the locations. :)

import React, { Component } from 'react';

import { Map, InfoWindow, Marker, GoogleApiWrapper 

} from 'google-maps-react';



var  AllPlaces = [

{

"name" : "Pizza",

"lat": "40.7589",

"lng":"-73.9851",

},



{

"name" : "Cookies",

"lat": "40.7690",

"lng":"-73.9952",

},

{

"name" : "Bagels",

"lat": "40.7489",

"lng":"-73.9751",

}

]



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))})}

/>

)



render() {

return (

  <div className = 'map-container' style= 

{{marginleft:'250px'}}>

    <div>

      <div className = 'sideMenu'>

        <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}

          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: 'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'

})(MapContainer)