return placeID?

It looks like the component is discarding the placeID instead of using it to retrieve the coordinates via geocode.

I assume that addresses are usually 1:1 with geocode when taken directly from Places results, but would it be safer to geocode on placeID instead?

At the very least, it’d be helpful if placeID was returned along with suggestion

[brandonmp]

i edited it for my own local use (sorry, was in a hurry so didn’t wanna mess with a PR/tests etc)

it was a pretty basic change. here are the parts of the main component I changed.

// add fullPrediction to the new state set by the autocomplete callback
  autocompleteCallback(predictions, status) {
    if (status !== this.autocompleteOK) {
      this.props.onError(status)
      if (this.props.clearItemsOnError) { this.clearAutocomplete() }
      return
    }
    this.setState({
      autocompleteItems: predictions.map((p, idx) => ({
        suggestion: p.description,
        fullPrediction: p,
        placeId: p.place_id,
        active: false,
        index: idx
      }))
    })
  }

// change a few handlers to take the fullPrediction instead of 'address'
selectAddress(fullPrediction) {
    this.clearAutocomplete()
    this._handleSelect(fullPrediction)
  }

  _handleSelect(fullPrediction) {
    this.props.onSelect ? this.props.onSelect(fullPrediction) : this.props.onChange(fullPrediction)
  }


// in the render function, change the data passed to selectAddress 
<div
            key={p.placeId}
            onMouseOver={() => this._setActiveItemAtIndex(p.index)}
            onClick={() => this.selectAddress(p.fullPrediction)}
            style={{
              ...defaultStyles.autocompleteItem,
              ...styles.autocompleteItem,
              ...this.autocompleteItemStyle(p.active)
            }}>
            {this.props.autocompleteItem({ suggestion: p.suggestion })}
          </div>

I also changed the geocode-by-address function to take a placeid instead of an address (& return a promise b/c it’s 2017 😛 ). I needed specific fields off of the return value, but for general purpose i think it’s fine to return just the lat, long, and entire geocode results if a user wants to peel-off their own fields. here’s what i came up with

// @flow
import _ from 'lodash'

type GeocodeResults = {
  latitude: ?number,
  longitude: ?number,
  formattedAddress: ?string,
  googlePlaceID: ?string
};


export const geocodeByAddress = ({ placeId }: { placeId: string }): GeocodeResults => {
  const geocoder = new google.maps.Geocoder()
  const OK = google.maps.GeocoderStatus.OK
  return new Promise((resolve, reject) => {
    geocoder.geocode({ placeId }, (results, status) => {
      if (status !== OK) {
        reject(status)
      }
      resolve(makePlace(results))
    })
  })
}

const makePlace = (geocodeResults) => {
  const address = geocodeResults[0]
  const place = {}
  place.latitude = _.get(address, 'geometry.location.lat', () => null)()
  place.longitude = _.get(address, 'geometry.location.lng', () => null)()
  place.formattedAddress = address.formatted_address || null
  place.googlePlaceID = address.place_id || null
  return place
}

[brandonmp]

@kenny-hibino maybe i can try but we’re trying to launch something in a few weeks so not sure 😕 your lib is the best implementaiton of autocomplete i’ve seen though (primarily b/c it lets u use whatever input component you want), so happy to help if i can