[FEATURE] Add google-address component

[ohizkiya]

I would like to work on adding support for a text-box that captures a particular location and supports auto-complete.

As per the original readME, the functionality would be as follows: {{google-address value=theText resolvedGoogleData=thePropertyToStoreGoogleData resolvedLat=thePropertyWhereToStoreAddressLatitude resolvedLng=thePropertyWhereToStoreAddressLongitude boundNorthWestLat=optionalBoundNorthWestLatitude boundNorthWestLng=optionalBoundNorthWestLongitude boundSouthEastLat=optionalBoundSouthEastLatitude boundSouthEastLng=optionalBoundSouthEastLongitude map=theOptionalMapToBeLinked }}

Can you please provide guidance for how you think this should be implemented? Do you have existing Ember code that we can leverage and componentize?

[huafu]

I believe we should use the one google is providing and emberize it. I started a bit of work on that but too long time ago and don't even remember the date, you might see it commented in the code or maybe more in the logs. But yeah, google has an auto-complete already, so you could use that. Else you could also use the geo google service but that means you'd have to implement auto-complete, or need another component, which would add too much size related to what is supposed to be doing the addon first. I am very tired, will look at it tomorrow, but it you have thoughts... or want to start, go go go! ;-)

[srsgores]

I'm implementing this now, myself. I'm not sure this library will be used, as it seems kind of overkill for a simple text input, but I'll keep you updated. For example, I am more inclined to add the scripts manually via bower (download the JS locally), then write the logic in the component.

@ohizkiya, I would imagine a more simplified API:

{{address-input address=model.address required=true title="Please indicate your current address"}}

[huafu]

No, I meant, google map libraries includes a feature to auto-complete address given an html input field, so no need to re-implement the auto-completion feature since google provides it ;-) Thanks for your time working on this!

Btw, I like your API @srsgores

[maddijoyce]

Hey all, I've been using this little component in an ember project:

### global google ###
`import Ember from 'ember'`

class LocationInput extends Ember.TextArea
  classNames: ['ember-location-input']
  rows: 2
  auto: null
  notfound: false

  didInsertElement: ->
    c = this
    try
      jinput = c.$()
      autocomplete = new google.maps.places.Autocomplete(jinput[0])
      google.maps.event.addListener autocomplete, 'place_changed', ->
        place = autocomplete.getPlace()
        c.value = jinput.val()
        c.location =
          point: place.geometry.location
          formatted: c.value
      c.value = c.location.formatted
    catch
      c.location = { formatted: '', point: null } if !c.location
      c.value = c.location.formatted
      c.notfound = true

  +observer value, notfound
  update: ->
    if !@value
      @location = null
    else if @notfound
      @location =
        point: null
        formatted: @value

`export default LocationInput`

It is written in emberscript but it would be easy to change back to js if needed. I put in some backwards compatibility if the google maps library is not loaded for whatever reason. I also use it in conjunction with this transformer for storing locations in ember data.

{{ location-input location=operator.address placeholder="Address" }}

Because it extends Ember.TextArea (could also extend text field but I like address boxes with a couple of rows) it has all of the functionality of a normal text box.

### global google ###
`import DS from 'ember-data'`

class Location extends DS.Transform
  deserialize: (serialized)->
    if serialized && serialized.lat && serialized.lng && serialized.formatted
      try
        point = new google.maps.LatLng(serialized.lat, serialized.lng)
      catch
        point = {
          _lat: serialized.lat
          _lng: serialized.lng
          lat: -> this._lat
          lng: -> this._lng
        }
      {
        point: point
        formatted: serialized.formatted
      }
    else if serialized && serialized.formatted
      {
        point: null
        formatted: serialized.formatted
      }
    else
      null
  serialize: (deserialized)->
    if deserialized && deserialized.point && deserialized.formatted
      {
        lat: deserialized.point.lat()
        lng: deserialized.point.lng()
        formatted: deserialized.formatted
      }
    else if deserialized && deserialized.formatted
      {
        lat: null
        lng: null
        formatted: deserialized.formatted
      }
    else
      null

`export default Location`

Once again, I like it to still work, even if I can't access the google js. One thing it doesn't have (which I use the ember-google-map library for), is it doesn't load the places api itself.

[srsgores]

@maddijoyce, I ended up taking a different approach, using an initializer to inject the Google api library, and in JavaScript. I was going to open-source my implementation, but haven't yet gotten around to it. Thanks for sharing, though.