google-place-auto-complete
is a customized component for google place AutocompleteService.
GoogleAddressSearch
: example of how to use PlacesAutocomplete
and GoogleApiWrapper
Example
Below is using the <GoogleAddressSearch {...props}/> components is using google-place-auto-complete <PlacesAutocomplete {...prop}/ > created example.
;; const GoogleApiWrapper = 'your api key'; Component { superprops; thisstate = address: '' errorMessage: '' latitude: null longitude: null isGeocoding: false ; } { this; }; { this; ; }; { this; }; { console; // eslint-disable-line no-console this; }; { const address errorMessage latitude longitude isGeocoding = thisstate; return <div> <PlacesAutocomplete onChange=thishandleChange value=address onSelect=thishandleSelect onError=thishandleError shouldFetchSuggestions=addresslength > 2 restrictionedCountry='au' > { return <div className="Google__search-bar-container"> <div className="Google__search-input-container"> <input ... /> thisstateaddresslength > 0 && <button className="Google__clear-button" onClick=thishandleCloseClick > x </button> </div> suggestionslength > 0 && <div className="Google__autocomplete-container"> suggestions </div> </div> ; } </PlacesAutocomplete> errorMessagelength > 0 && <div className="Google__error-message">thisstateerrorMessage</div> latitude && longitude || isGeocoding && <div> <h3 className="Google__geocode-result-header">Geocode result</h3> isGeocoding ? <div> <i className="fa fa-spinner fa-pulse fa-3x fa-fw Google__spinner" /> </div> : <div> <div className="Google__geocode-result-item--lat"> <label>Latitude:</label> <span>latitude</span> </div> <div className="Google__geocode-result-item--lng"> <label>Longitude:</label> <span>longitude</span> </div> </div> </div> </div> ; } apiKey: GOOGLE_API_KEY GoogleAddressSearch