class About extends Component {
  constructor(props) {
    super(props);
    this.state = {
      address: '',
      directions: null,
      markers: false,
      currentPosLat: 41.8507300,
      currentPosLng: -87.6512600
    };
  }

  handleChange = (address) => {
    this.setState({ address });
  };

  handleSelect = (address) => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => {
        console.log(this.state.address);
        this.setState({
          currentPosLng: latLng.lng,
          currentPosLat: latLng.lat,
          markers: true
        });
        console.log('Success', latLng);
      })
      .catch(error => console.error('Error', error));
  };

  render() {
    return (
      <div>
        <MyGoogleMap
          isMarkerShown
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7mvCqVEORmN9sP9xLPKsmag1yqbltU3E&v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: '100%' }} />}
          containerElement={<div style={{ height: '600px' }} />}
          mapElement={<div style={{ height: '100%' }} />}
          directions={this.state.directions}
          markers={this.state.markers}
          currentPosLat={this.state.currentPosLat}
          currentPosLng={this.state.currentPosLng}
        />
        <PlacesAutocomplete
          value={this.state.address}
          onChange={this.handleChange}
          onSelect={this.handleSelect}
        >
          {({ getInputProps, suggestions, getSuggestionItemProps }) => (
            <div>
              <input
                {...getInputProps({
                  placeholder: 'Search Places ...',
                  className: 'location-search-input'
                })}
              />
              <div className="autocomplete-dropdown-container">
                {suggestions.map(suggestion => {
                  const className = suggestion.active ? 'suggestion-item--active' : 'suggestion-item';
                  // inline style for demonstration purpose
                  const style = suggestion.active
                    ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                    : { backgroundColor: '#ffffff', cursor: 'pointer' };
                  return (
                    <div {...getSuggestionItemProps(suggestion, { className, style })}>
                      <span>{suggestion.description}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </PlacesAutocomplete>
      </div>
    );
  }
}