Agfdhyk

I currently working on Google Map ReactJS of https://tomchentw.github.io, i used this because it's recommended.

Problem:

I have certain question and problem.

Why i cannot pass the value of state of lat lng to the defaultcenter properties of google map. the props that i pass has no value that's why it turns to grey box.., how to pass the value of props to the defaultCenter?

Google Map Code:

    const google = window.google



const MyMapComponent = compose(

  withProps({

    googleMapURL: "https://maps.googleapis.com/maps/api/js?&v=3.exp&libraries=geometry,drawing,places&key=AIzaSyDWCz4V5r29GxcGZKNtFzE9v4gOSnKVMYA",

    loadingElement: <div style={{ height: `100%` }} />,

    containerElement: <div style={{ height: `400px` }} />,

    mapElement: <div style={{ height: `100%` }} />,



  }),

  withHandlers({

    onMarkerClustererClick: () => (markerClusterer) => {

      const clickedMarkers = markerClusterer.getMarkers()

      console.log(`Current clicked markers length: ${clickedMarkers.length}`)

      console.log(clickedMarkers)

    },

  }),

  withScriptjs,

  withGoogleMap

)(props =>



      <GoogleMap

    defaultZoom={8}

    defaultCenter={{lat: parseFloat(props.lat_value_props), lng: parseFloat(props.lang_value_props) }}

    //defaultCenter={{lat:53.569967, lng:-113.393261}}

>



{props.markers.map(marker => (



    <Marker

        key={marker.id}

        position={{ lat: parseFloat(marker.store_lat), lng: parseFloat(marker.store_long) }}

    />



))}



</GoogleMap>

);

JSX:

    export default class FindStore extends Component {





      constructor(props) {

        super(props);



        this.state = {

          text:'',

          city:'',

          store_details:,

          searchTerm: '',

          lat_value:'',

          lng_value:'',

          markers: ,



        }



        this.searchUpdated = this.searchUpdated.bind(this)

      }



      componentDidMount() {



        const id = this.props.match.params.id;

        axios.get('/api/find_store_location/' + id).then(response => {

            this.setState({

                markers: response.data,

                lat:response.data[0].store_lat,

                long:response.data[0].store_long,

            })



             console.log(this.state.lat_value);

             console.log(this.state.lng_value);



        }).catch(error => console.log(error));



        axios.get('/api/store_details').then(response => {

            this.setState({



              store_details:response.data



            })

           }).catch(error => console.log(error.response));

      }





      //store details oveflow leftside

    render() {



      const filteredEmails = this.state.store_details.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))

      return (



        <div>



          <div className="header">

              <div className="jumbotron">

                  <h1>Store Directory</h1>

              </div>

          </div>

          <br/><br/><br/>



          <div className="container">

            <div className="row">

              <div className="col-md-5">

                <form method="get" onSubmit={this.SubmitFilterStore}>

                  <div className="form-group">

                    <label htmlFor="exampleSelect1">Select City</label>

                    <select value={this.state.city} className="form-control" id="exampleSelect1">

                      <option readOnly={true} selected={true} >Choose City</option>

                      <option value="Winnipeg">Winnipeg</option>

                      <option value="Edmonton">Edmonton</option>

                      <option value="Calgary">Calgary</option>

                    </select>

                  </div>

                  <div className="input-group mb-3" id="text_search">



                    <SearchInput className="search-input" onChange={this.searchUpdated} />



                    <br/> <br/>

                    <div style={{overflowY:'scroll', height:'500px'}}>

                      {filteredEmails.map(store => {



                        if(store.image == "")

                        {

                          return (

                            <div className="store" key={store.id}>

                              <div className="card" style={{width: '18rem' }}>

                                  <div className="container">

                                  <br/>

                                    <p>No Store Image Uploaded</p>

                                  </div>

                                  <div className="card-body">

                                     <div id="store-description">

                                     <label>{store.branch_name}</label><br/> 

                                      <label>{store.store_type}</label><br/> 

                                      <label>{store.store_contactnumber}</label><br/> 

                                      <label>{store.store_businesshour}</label>

                                      <br/><br/>

                                      <Link to={'/find-store-location/'+store.id}><button className="btn">Direction <i className="fas fa-directions"></i> </button></Link>

                                     </div>

                                  </div>

                                </div>      

                                <br/>    

                            </div>

                          )

                        }

                        else

                        {

                          return (

                            <div className="store" key={store.id}>

                              <div className="card" style={{width: '18rem' }}>

                                  <div className="container">

                                  <br/>

                                  <img src={"/storage/"+store.image}

                                    height="120" 

                                  className="img-responsive"></img>



                                  </div>

                                  <div className="card-body">

                                      <div id="store-description">

                                        <label>{store.branch_name}</label><br/> 

                                        <label>{store.store_type}</label><br/> 

                                        <label>{store.store_contactnumber}</label><br/> 

                                        <label>{store.store_businesshour}</label>

                                        <br/><br/>

                                        <Link to={'/find-store-location/'+store.id}><button className="btn">Direction <i className="fas fa-directions"></i> </button></Link>

                                      </div>



                                  </div>

                                </div>      

                                <br/>    

                            </div>

                          )

                        }



                    })}

                    </div>

                  </div>

                </form>  

              </div>         

              <div className="col-md-7">





                  <MyMapComponent 

                markers={this.state.markers}  

                lat_value_props={this.state.lat_value}

                lang_value_props={this.state.lng_value}



             />





              </div>

            </div>





          </div>

        </div>





      )

    }



    searchUpdated (term) {

      this.setState({searchTerm: term})

    }



}

The error is because MyMapComponent is not a React.Component and therefore this.state does not exist.

The solution is to send the latlng along with your markers data to the Map Component.

Change to

<MyMapComponent 

    markers={this.state.markers}  

    latlng={this.state.latlng}

/>

and

<GoogleMap

    defaultZoom={8}

    defaultCenter={props.latlng}

>