When start writing in the input just appear "loading" instead of the places drowpdown

[mariaMPSerra]

Hi, I'm using react-places-autocomplete and when I start typing in the input to search for a place the only thing that appears is "loading..." instead of the dropdown with the suggestions. This is my code:

export default class LocationSearchInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: '',googleMapsLoading: false };
  }

  componentDidMount(){

    window.initMap = this.initMap
    const gmapScriptEl = document.createElement(`script`)
    gmapScriptEl.src = `https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places&callback=initMap`
    document.querySelector(`body`).insertAdjacentElement(`beforeend`, gmapScriptEl)
  }

  initMap = () => {
    this.setState({
      googleMapsLoading: true,
    })
  }

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

  handleSelect = address => {
    geocodeByAddress(address)
      .then(results => getLatLng(results[0]))
      .then(latLng => console.log('Success', latLng))
      .catch(error => console.error('Error', error));
  };

  render() {
    return (
        <div>
        {

            this.state.googleMapsLoading ?
            <PlacesAutocomplete
        value={this.state.address}
        onChange={this.handleChange}
        onSelect={this.handleSelect}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              {...getInputProps({
                placeholder: 'Search Places ...',
                className: 'location-search-input',
              })}
            />
            <div className="autocomplete-dropdown-container">
              {loading && <div>Loading...</div>}
              {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> : null
        }
      </div>
    );
  }
}

I had to add the initMap function because I had the loader error. Thanks

[pgiouroukis]

I have the same issue!

[codepurse]

Same too, sometimes i need to refresh it multiple times to work. Any workarounds?

[Huzaifaahmed20]

Encountered the same issue, any workaround?

[Shaninnik]

Same issue. It is intermittent, most of the time it works fine but sometimes it just sits in "loading" forever.

[Huzaifaahmed20]

Are you using google maps also in your app?

Same issue. It is intermittent, most of the time it works fine but sometimes it just sits in "loading" forever.

[Huzaifaahmed20]

Previously I was using google-map-react and this autocomplete library, which is making this loading problem, I think this library is not compatible with google-map-react, try using this react-google-maps, it will solve this loading issue and render places correctly