esbanarango / ember-place-autocomplete

Ember cli addon to provide a component that uses Google Places API to autocomplete place information when people write their address

Ember Place Autocomplete

Installation

ember install ember-place-autocomplete

Documentation

All documentation can be found in the addon website https://dmuneras.github.io/ember-place-autocomplete/

Running Tests

• yarn test:all (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

ember-place-autocomplete's Issues

Fix Acceptance Tests instructions in Readme

The Google Places Autocomplete mocked object in Readme is missing the setOptions() function, which is present in addon's tests' google-place-autocomplete-object

Hope this helps someone else saving time! 🙂

Possible to pass in the google keys outside of the config?

Hi,

I would like to send over the google keys after the user is authenticated, is this something that could be done? I see the google api is setup on app load.

Thanks

Multiple input destroy issue

I have 2 autocomplete inputs on my page. If I destroy (simply remove the component from the page) one of them the other one doesn't work until the remove and replace again.

I believe the issue relevant with elementId. I can't add an id to inputs also.

Thank you.

Cannot read property 'maps' of undefined

Getting this.

Uncaught TypeError: Cannot read property 'maps' of undefined
    at Class.getAutocomplete (place-autocomplete-field.js:76)
    at Class.setupComponent (place-autocomplete-field.js:49)
    at invoke (ember.debug.js:339)
    at Queue.flush (ember.debug.js:407)
    at DeferredActionQueues.flush (ember.debug.js:531)
    at Backburner.end (ember.debug.js:601)
    at ember.debug.js:1167

i guess because google api isn't loaded at the time.

ember-cli: 2.10.0
node: 4.5.0

Interested in ability to enable/disable autocomplete from property?

What does disabled attribute do in the component? I'd like for a way to enable/disable this component via the disabled property.

Issue with using inside component

Is anyone else having issues with this getting used inside a component? The network calls are getting made, but it seems like the actions aren't working properly. I have not been able to get the autocomplete dropdown, been working on this for awhile too..

I think the readme should be updated for clarity

I think the README should be updated to be crystal clear with what is happening.
It too me a bit of time to get it up and running after digging through issues.

How to use in HBS

{{place-autocomplete-field
  ...
}}

For more types look under: https://developers.google.com/places/web-service/supported_types

How to setup ENV

ENV['place-autocomplete'] = {
  exclude: true, // true means library wont include the maps script | false means it will
  key: 'AIZ...', // Your API Key from the google console
  client: 'gme-myclientid', // Client ID if necessary
  version: 3.27, // Optional - if client is set version must be above 3.24
  language: 'en', // Optional - be default will be based on your browser language
  region: 'GB' // Optional
};

You can get an API key from here: https://developers.google.com/places/web-service/autocomplete

Also, thank you for making this. Honestly, it saved me a tonne of time. :)

new release?

Hi, any chance a new release gets pushed to npm soon?

Application initializes before Google Places library loads

Description

I'm running into an issue where my very small application loads and initializes before the Google Places library loads.

This is problematic because "window.google" is not defined when the google and navigator instance initializers execute due to the places library being loaded asynchronously. This causes the GooglePlaceAutocomplete component to fail initialization.

It looks like the addon used to read "window.google" directly, which would have been fine.

This occurs in both Ember 3.28.6 and 4.12.2, with the following versions of this addon: v2.1.2, master, and the "Upgraded to Ember 4.12" pull request.

Add a Demo app.

Cannot read property 'getPlacePredictions'

Hi, I'm getting error when I try to this sample.
https://dmuneras.github.io/ember-place-autocomplete/usage/service

Cannot read property 'getPlacePredictions' of undefined

thanks.

Latest version not released (exclude parameter)

Hey, was scratching my head about the 'exclude' parameter I read in the documentation not working, and then realized that it's because those changes haven't been replaced. Is there something you're waiting on?

A

Can creation of script tag be deferred until page load?

First of all, I'm an Ember newbie, so please forgive and correct any misconceptions I have.

Basically, we have a situation where we have to add the Google Maps API key after the client has loaded. This is because of some details of our build process which we can't change. For example, sometimes we'll build in production mode but still deploy to a testing environment, and we don't want to use our production key in this case. However, we do load the page with bootstrap data, which will contain the desired key.

It looks like the script tag is being generated at build time right now (index.js). Is there currently any way to defer this? If not, would you accept a PR to add that functionality?

Assertion Failed: Cannot call set with 'address' on an undefined object.

Recreated your example:

I keep getting the following. It's not very clear what to do, I would really appreciate a demo. If someone else has experienced this can someone please help me?
Assertion Failed: Cannot call set with 'address' on an undefined object.

If I update the value=model.address I get the same error,

if I just change it to value=address I get no errors but I also receive nothing back at all from google.

(Just a question) Is there a way to customize the pac container if you are using it multiple places?

Is there a way to customize the pac container if you are using it multiple places? Currently I am overriding the styling of the google dropdown. I am using the places autocomplete multiple places but I do not want the styling to be applied everywhere just that specific template. Is there any way to accomplish this? I am also just using CSS and not SASS.

Addon is not FastBoot-compatible

The addon assumes that window (window.google and window.navigator) are present, which is not true in FastBoot.

Guidance for resolving these issues in Fastboot are available at https://ember-fastboot.com/docs/addon-author-guide

Doesn't work

I may be doing something wrong, but nothing happens when I insert text into the input field. I can't see any call to Google's API. And no autocomplete is generated. Weird.

What action is supposed to be used to call the Google API?

Selecting item in dropdown doesn't update model

{{place-autocomplete-field value=adventure.address
              handlerController=this
              id="create-location" inputClass="input-group-field"
              placeholder="Where are you adventuring?" required=true
              types="geocode" focusOutCallback='changeLocation'}}
              {{adventure.address}}

Support for session token

Hello,

With the new Places API Usage and Billing we can now specify a session token with every Autocomplete request.
Does your addon provide a way to do that or is there any plan to make it possible?

Thanks!

Set search bounds with component attributes.

Hi @esbanarango @dmuneras, thanks for this addon. Are you interested in the ability to set the bounds of the search via attributes passed in to the component?

Scroll issue on IOS devices

The drop down list doesnt stick to input box instead it scrolls with the body and if user selects any element from the list on IOS device in scrolled down view. It hangs the screen and whitens the background.

Push latest version to bower

Hi,

Can you push/register the latest version to bower so my package.json can be just referring to a version :)

Thnx!

Deprecation on latest Ember

DEPRECATION: Please refactor `{{input focus-out="focusOut"}}` to `{{input focus-out=(action "focusOut")}}. ('ember-place-autocomplete/templates/components/place-autocomplete-field.hbs'

After update ember 3.1.2, inputClass doesn't appear

I just to update to 3.1.2 and strangely the css class passed through inputClass attribute doesn't appear but instead there a white space. Someone knows if it is an error related with the upgrade?

Thanks!

autocomplete not working inside component template

When I add place-autocomplete-field to a template that has a controller it's working. However if I use it in another component template it's not showing the dropdown with addresses when I type, though I can see a response with all the data in the console. Looks like it's not injecting google component.

I need this feature to work inside a popup modal.

Tabindex -1?

Hey folks!

Why is the autocomplete input tabindex set to -1?

I just manually set it to 0 so the input behaves normally as far as tabs/ordering goes.

Possible to enter a value not in results list?

Is it possible for a user to enter a value that isn't in the results list? For example, say this is a search for job locations, would it be possible to enter "Remote" as an option?

Add acceptance tests instructions.

Dynamically change language

I'm using i18n and would like to get the language changed here when it is changed in i18n (https://github.com/jamesarosen/ember-i18n).

You think that's possible?

Overwrite templates

It's not possible to overwrite the place-autocomplete-field.hbs to do something like change the "placeholder" attribute. Is there a way to do this in the templates? I know there is a workaround, but this seems to be the most common pattern.

Some notes on the structure for allowing this: ember-cli/ember-cli#4587

Update addon

placeChangedCallback and focusOutCallback actions not being called

When I declare placeChangedCallback=(action "placeChanged") I get TypeError: Cannot read property 'apply' of undefined. and when I use placeChangedCallback='placeChanged' it doesn't get called at all. Is there something I need to do special if I am creating a search bar component that is going to be used else where? The logic for the action is defined in my component js file. I am also noticing the same behavior with the focusOutCallback

Here is a snippet:

Template (search-bar-address):

<p id=“message”>Message: {{message}}</p>

<p>Full adddress from JSON sent to the callback: {{{fullAddress}}}</p>

<p>Clean string: {{cleanFullAddress}}</p>

<p> Model address: {{address}}</p>

<div id=“search-bar” data-google-auto="{{googleAuto}}">

<label class=“visually-hidden” for=“input-search”>Add a new address</label>

{{place-autocomplete-field

id=“input-search”

value= address

handlerController= this

placeholder=“Add a new address”

inputClass= ‘place-autocomplete–input’

placeChangedCallback= “addressChanged”

focusOutCallback=“done”

restrictions=googleMapsRestrictions

withGeoLocate= true

}}

<pre style=“font-size: 6px;”>

{{placeJSON}}

</pre>


googleMapsRestrictions: { country: ‘us’, }, 
fullAddress: null, 
googleAuto: null,
 action: { done()
{ console.log(“Reached”); }, 
addressChanged(place) { console.log("***********"+place);

  }
}

Where it is implemented

 {{search-bar-address
          id="search-bar-component"
          }}

put an example that actually works

I am still at this-there was a PR that someone created a semiworking example but even that has issues. It's very frustrating-I'm not a developer per se, I rely on working examples. Which you have none. Perhaps you could just take the 5 minutes of time and re-create it with a working model. You reference a controller which I didn't have. The other guys did - but didn't have a component.

I really just need to get the lat-long from an address.

Can't use ember-place-autocomplete component in acceptance tests

Trying to use the component in an acceptance test caused this exception:

Assertion failed: You have turned on testing mode, which disabled the run-loop's autorun. 
You will need to wrap any code with asynchronous side-effects in an Ember.run

This guide was helpful in figuring out what the heck was going on:
http://discuss.emberjs.com/t/guide-asynchronous-side-effects-in-testing/2905

Opened up a pull request: #40
This wraps the place_changed handler in a run loop.

Anyone have issues with the 'focusOutCallback' handler?

In ember 2.4.1, handling the 'focusOutCallback' seems to cause the google auto-suggest API to fail to pick up clicking on a place (because the action does not bubble to the browser, I guess?) although it still works if you arrow down and select and item with the enter key:

But if you let it bubble (or just don't handle it at all), ember is cranky:

I read in the docs that you can preventDefault in an inline action handler, but this is using the 'send' action from the component

 this.get('handlerController').send(actionName, this.get('autocomplete').get('place'));

and I can't figure out how to get this to work:
a: with send
b: by telling Ember to ignore this one
c: refactor to a better pattern than send

Any help would be appreciated. Thanks!

Use Qunit instead of Mocha

Description

Use Qunit instead of Mocha to test the addon. The support of Qunit is better within the Ember community and it is simpler.

New release (2.1.3?)

@dmuneras, could you please push a new release with the has-block deprecation fixes?

Issue when using 'address' type

Hello, There seems to be an issue when using 'address' as the type... maybe other types too, but I've experienced the issue only when using the address type.

Essentially, the call to getPlace returns the wrong place sometimes.
For example. If you search for 324 2nd St. Camino, CA the result comes back as something entirely different. The suggestion is correct, but the call to getPlace is off. I suspect that this happens when you enter an address that either google does not know exists, or an address that doesn't exist. I have my suspicions, but I've yet to confirm. I provided a code pen for you to review, and illustrated the response from getPlace. I'm not sure what the right call is here, but It may be nice to compare the place to getPlace() and if they are in a different city etc... handle that. If it is an invalid address, and someone has the time to confirm that this is indeed what's happening, then maybe fire a callback that we can use so that we can handle it how we see fit.

CodePen Example

DOC: Update tests support section wording and examples code.

Description

• Mocha is not used anymore and we are not using beforeEach either. It is required to change the wording.

• Examples work, but the code is not the best, it is required to improve the quality of the examples to promote good practices instead of bad ones.

Latitude and Longitude on City

Is there a simple way to get latitude and longitude from the city response? I see a key in the object but it's formatted a bit weird..

Test Mocks are not usable by consumers

The test mock setup is not accessible by consumers.

Currently, these test helpers live inside of the tests folders and they are not shipped to NPM.

Even if they were shipped to NPM, that's not the right place to have test helpers to be consumed by others.

If an addon wants to ship a test helper, they should have them at addon-test-support.

For more references, check other addons. One example is ember-power-select.

How to get complete address?

@esbanarango
Hello,

1. Currently able to get only formatted_address but I want complete address. How can I get it?
2. How to restrict by country for Ex: country="uk"?

The `initialize` method for Application initializer 'register-google' should take only one argument

it's happening if:

DEBUG: -------------------------------
vendor.js?v=1.4.38:1505 DEBUG: Ember      : 2.2.0
vendor.js?v=1.4.38:1505 DEBUG: Ember Data : 2.2.0
vendor.js?v=1.4.38:1505 DEBUG: jQuery     : 2.1.3
vendor.js?v=1.4.38:1505 DEBUG: -------------------------------
vendor.js?v=1.4.38:1246 DEPRECATION: The `initialize` method for Application initializer 'register-google' should take only one argument - `App`, an instance of an `Application`. [deprecation id: ember-application.app-initializer-initialize-arguments] See http://emberjs.com/deprecations/v2.x/#toc_initializer-arity for more details.
        at HANDLERS.(anonymous function) 
...

how can I resolve that?

Send optional parameters data in request

Is there any way to set optional parameters data when sending request to google ? I'm interested only in retrieving citites and as documentation says it requires from me to set types=(cities) in optional request paramater. It would be nice to have this possibility.

Default places type option should be no option instead of 'geocode'

I Spent a little too much time on this issue trying to figure out what was going wrong :D

I don't think it's safe to assume users of this addon only need geocode results. It seems to me that this component should:

• use an empty array as default option for the types parameter for Places Autocomplete
• allow types to be an array of strings
• allow types to be a string (same as current)

If this makes sense, I'm happy to open a PR