how to set center on StandaloneSearchBox in react google maps - reactjs

Question

i'm using react google maps standalonesearchbox,every thing is ok,but how can i show first near by location in google map search hints(places),generally when we use map with search box then we attach both each other but here i didn't add map.
so here my question is how can i set center or show nearby search first on google places search hints.
here is my code
import React from 'react';
import {connect} from 'react-redux';
import { Input,Icon} from 'antd';
import 'antd/dist/antd.css';
import {pickupHandler,pickupAddHandler,dropoffHandler} from '../actions';
import config from '../../../config'
const { compose, withProps, lifecycle,withHandlers } = require("recompose");
const {
withScriptjs,
} = require("react-google-maps");
const { StandaloneSearchBox } = require("react-google-maps/lib/components/places/StandaloneSearchBox");
const SearchBox = compose(
withProps({
googleMapURL: config.MapApi,
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
}),
lifecycle({
componentWillMount() {
const refs = {}
this.setState({
onSearchBoxMounted: ref => {
refs.searchBox = ref;
},
onBoundsChanged: () => {
this.setState({
bounds: refs.map.getBounds(),
center: refs.map.getCenter(),
})
},
onPlacesChanged: () => {
const places = refs.searchBox.getPlaces();
places.map(({ place_id, formatted_address, geometry: { location } }) =>{
this.props.latlngHandler({lat:location.lat(),lng:location.lng()})
this.props.AddressHandler(formatted_address)
})
this.setState({
places,
});
},
suffix: () =>{
this.props.AddressHandler('')
this.props.latlngHandler(false);
}
})
},
}),
withHandlers(() => {
return{
cutPickIcon:<Icon type="close-circle" />
}
}),
withScriptjs
)(props =>
<div data-standalone-searchbox="">
<StandaloneSearchBox
ref={props.onSearchBoxMounted}
bounds={props.bounds}
onBoundsChanged={props.onBoundsChanged}
onPlacesChanged={props.onPlacesChanged}
>
<Input
prefix={<Icon type="environment-o" style={props.name === 'pick' ? { color: '#EA4335' }: { color: '#00E64D' }} />}
type="text"
placeholder={props.placeHoler}
onChange={props.Field}
onFocus={props.FocusGA}
value={props.Address}
className='input'
suffix={props.Suffix ? <Icon type="close-circle" onClick={props.suffix}/> :''}
/>
</StandaloneSearchBox>
</div>
);
export default connect(null,{pickupAddHandler,pickupHandler,dropoffHandler})(SearchBox)

Answer 1

You can use the maps geocode to set bounds prop on StandaloneSearchBox.
Please refer to my answer on this post.
https://stackoverflow.com/a/53396781/1661712