Giter Club home page Giter Club logo

ngx-google-places-autocomplete's Issues

Limiting Fields Returned

I'd like to limit the fields returned from the api call, as Google recommends limiting the returned results to avoid unnecessary data charges.

I see issue #36 is related to my question, and the recent commit to add fields to the options object. However I'm not sure that is the correct setup, and when I add the following code to my options object, the handleAddressChange() method is no longer triggered:

[options]="{ 
  types: ['(regions)'],
  fields: ['address_components']
}"

According to the documentation, the fields are not part of the options object, but are set via the setFields() method.
https://developers.google.com/maps/documentation/javascript/places-autocomplete#placeholder_text
(see: "For address forms, it is useful to get the address in structured format. To return the structured address for the selected place, call Autocomplete.setFields() and specify the address_components field.")

I think the way things are coded currently, having the fields property in the options object breaks the functionality of the directive. I think we need to pass the fields in a different directive property or pull the fields from the existing options property and use the setFields() method to properly supply the desired fields in the api call.

Please let me know if I'm missing something or approaching this incorrectly. And thank you so much for your work on this!

Angular 8 with SSR - Ivy:true

When running angular 8 with ivy:true
" ngx-google-places-autocomplete " shows ERROR , There is no format with import statements in '..../node_modules/ngx-google-places-autocomplete' entry-point

Lat Long

How to get lat long ? currently there is empty response for lat long in geometry.

Using this package with Angular 5 and Karma/PhantomJS gives error

When testing a component that uses GooglePlaceModule I get below error:

        ReferenceError: Can't find variable: google in http://localhost:9876/_karma_webpack_/vendor.bundle.js (line 213542)
        isGoogleLibExists@http://localhost:9876/_karma_webpack_/vendor.bundle.js:213542:25
        initialize@http://localhost:9876/_karma_webpack_/vendor.bundle.js:213554:36

How to use types in options object ?

mapOptions: any = { types: [], componentRestrictions: { country: 'USA' } }

// what does types here in this object mean ? May be there is a lack of information on readme

The Directive doesn't accept dynamic options

Hello,

I would like to use the directive with an options object and change some params based on user input in runtime.

I found that the directives accepts options only once - when I change the options object, directive doesn't know about it.

Is it known issue?

thanks.


HTML:

<input type="text" matInput placeholder="Primary Address" formControlName="primaryAddressFormControl"
ngx-google-places-autocomplete
[options]="placesAutocompleteOptions" (onAddressChange)="handleAddressChange($event)"/>


TS:

// onInit
this.placesAutocompleteOptions = {
types: [ '(cities)' ],
componentRestrictions: { country: 'us'}
};

// when user selects new country in dropdown
handleCountryChange($event) {
this.placesAutocompleteOptions.componentRestrictions.country = $event;
}

Script tag not accessible to Modals & Auxiliary Routes

The only problem with this approach is that the google API <script> tag in index.html is not available to modals or named router-outlets? How do you give modals & named router-outlets access to the API key?
Is there a way to provide access the Google API key through a environment configuration setup rather?

google is not defined

I needed to put google map api js reference in index.html in order to solve this error, though I have already imported the agm module in app module. any better solution?

[bug report] Drop down result list does not stick to <input> on modal dialog

I use google place automcomplete on a modal dialog. If the screen is not scrolled, it works fine. but if the screen is scrolled, the dropdown list is not at the bottom of input, it could be anywhere and even not visible depends on how much the screen is scrolled.

image

I use:

"ngx-google-places-autocomplete": "^2.0.4",
"@angular/common": "~7.2.0",

Is it a bug? If not, how to fix the issue?
Thank you very much in advance for your help.

How to use current location

Am beginner to Angular. Its awesome tool to use and easy to use.

But my issue us , Its not showing "Current location" option in autocomplete.
Please help me in this.

Server side rendering with universal

I get the following error:

C:\xampp\htdocs\travelbuddhi-ng5\node_modules\ngx-google-places-autocomplete\ngx
-google-places-autocomplete.directive.js:1
(function (exports, require, module, __filename, __dirname) { import { Directive
, ElementRef, EventEmitter, Input, NgZone, Output } from '@angular/core';
^^^^^^

SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.mvfG (C:\xampp\htdocs\travelbuddhi-ng5\dist-server\main.bundle.js:
1:1838418)

Set the language of the result

In our project, we would like to force the result of the autocomplete and the resulted address to be in French (since the users are French). However, even though this is possible in Places API https://developers.google.com/places/web-service/search, it's not available in this package.
We know that the workaround is to set the Browser's language to French, but we can't force that on everyone. We would very much appreciate it if there was a more permanent solution.

Thank you!

Store Address Value

Hello,

I'm using this package, and I'm actually stuck...

I've a FormGroup, and i want to know wich value i need store of the encoded address in my formControlName. I tried to setValue, but it's not working..

// My Form Group

this.createForm = this.fb.group({
    cityProject: ['', Validators.required],
})

    this.createForm.valueChanges.subscribe(console.dir)

}

@ViewChild('placesRef') placesRefAddress: GooglePlaceDirective;

public handleAddressChange(address: Address, type: string) {
// How can i change the value of cityProject ?
}

Can someone help me ? I'm a bit confused

disabled chrome autofill

screen shot 2018-06-19 at 4 04 40 pm

from the photo you can see autofill goes over the top which makes the user experience not very nice. I wasn't able to find a fix for this.

Form Submission on Enter

Use Keyboard to navigate options and press enter immediately Form is get Submitted

  1. Possible solutions are avoiding Enter keypress but i need enter key press too.

Restaurant types does not show any predictions

I am trying to implement options like this:
options = { types: ['restaurant'], componentRestrictions: {country: 'NL'} };

This does not show me any results, when I leave out the types it shows me results how can I restrict the searches to only restaurants?

utc_offset is deprecated as of November 2019 and will be turned off in November 2020. Use utc_offset_minutes instead.

Hello,

I have this new deprecation warning:

- utc_offset is deprecated as of November 2019 and will be turned off in November 2020. Use utc_offset_minutes instead.

https://developers.google.com/maps/documentation/javascript/place_field_js_migration#utc_offset_field

Can you please do the required changes?

  • objects/address.d.ts
utc_offset: number;

has to be replaced by:

utc_offset_minutes: number;
  • objects/address.js
Address.prototype.utc_offset;

has to be replaced by:

Address.prototype.utc_offset_minutes;

How to work with multiple autocomplete boxes in same component.

Hi,

I have a real-time scenario, I need to use multiple autocomplete boxes (mostly dynamic) in one component like, in that case, how can I get which autoComplete box address has changed,

HTML Code
<input class="form-control" placeholder="Starting Point" ngx-google-places-autocomplete #places="ngx-places" (onAddressChange)="handleAddressChange($event)" />

Component Code
public handleAddressChange(address: Address) { console.log(address); }

Help me how to deal with this.

[options] object is not responsive to mutation

If I want to do a 'select your city in one input, and then select your address in a second input, I'd do it something like this'.

    <input
      autocomplete="off"
      placeholder="City"
      name="city"
      ngx-google-places-autocomplete
      [options]="addressOptionsCity"
      #placesRef2="ngx-places"
      [value]="address.city"
      (change)="handleAddressTextChange($event)"
      (onAddressChange)="handleCityChange($event)"
    />
    <input
      autocomplete="street-address"
      placeholder="Property Address"
      name="address"
      ngx-google-places-autocomplete
      [options]="addressOptions"
      #placesRef="ngx-places"
      [(value)]="address.formatted_address"
      (change)="handleAddressTextChange($event)"
      (onAddressChange)="handleAddressChange($event)"
    />


  addressOptionsCity: Options = {
    bounds: null,
    componentRestrictions: {
      country: 'NZ'
    },
    types: ['(cities)']
  };
  addressOptions: Options = {
    bounds: null,
    componentRestrictions: {
      country: 'NZ'
    },
    types: ['address']
  };

  public handleCityChange(address: Address) {
    //this.addressOptions.location = address.geometry.location;  
    //this.addressOptions.radius = "150000"; //150km

    this.addressOptions.types = ['establishment']; //This is just to demonstrate that options isn't working. 

 }

nb. Options.location and Options.radius aren't in your Options interface, but they are in the Google Places API . My understanding is that they should still pass through. I was looking at the wrong AutocompleteOptions object on the API. . This is the correct one.. The question still remains though.

In anycase - for this example - we'll just change the addressOptions type when the city changes.
But in this example, the change the referenced options object does not propagate through to the autocompleter.

Component does not work if page refreshes

I have an initial page and after filling some data I navigate to address page
At this point it's ok, but if you refresh the page with f5 the component stops working

How to use option code

I'm working in Angular7 and I have three input fields one for the city name, one for a venue and one for the address of the venue selected. Can you help me with how to use options here to get the desired output.
The second option is straightforward but I need help for the first and the third input.

How to set text on init?

Tried this
this.placesRef.place = new Address();
this.placesRef.place.formatted_address = 'TEST PLACE';

Not sure how the this.place = this.autocomplete.getPlace() decides that formatted_address goes in the text box

Bug Report: Unexpected value 'GooglePlaceModule' error on import

Error Statement

ERROR in : Unexpected value 'GooglePlaceModule in [dir]/node_modules/ngx-google-places-autocomplete/ngx-google-places-autocomplete.module.d.ts' imported by the module 'AppModule in [dir]/src/app/app.module.ts'. Please add a [at]NgModule annotation.

Steps to Reproduce

  1. Install dependency
  2. import module in app.module.ts and add it to imports array
  3. run with ng serve --aot

Environment

ngx-google-places-autocomplete: 1.0.0
cli: 1.6.3
angular: 5.1.3

node: 9.2.1
npm: 5.6.0

Text box is disabled

Whenever I click on the textbox, placeholder changes to oops! Something went wrong.
And even I don't have to click on that textbox after the page is reloaded, within 5-6 seconds it get's disabled

Duplicated drop down

When you change the config the previous version stays there so you have multiple helpers at the same time.

Check this out:
screen shot 2018-08-02 at 18 19 46

Angular Universal: google is not defined

When running in Universal Mode, google is not defined there should be a wrapper around the google lib access to check for platformIsBrowser.

 ERROR ReferenceError: google is not defined
    at GooglePlaceDirective../node_modules/ngx-google-places-autocomplete/ngx-google-places-autocomplete.directive.js.GooglePlaceDirective.isGoogleLibExists (....)

Unexpected token import after angular universal

Giving following issue after enabling SSR using Angular Universal

Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/node_modules/ngx-google-places-autocomplete/ngx-google-places-autocomplete.directive.js:1
(function (exports, require, module, __filename, __dirname) { import { Directive, ElementRef, EventEmitter, Input, NgZone, Output } from '@angular/core';
^^^^^^

SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:152:10)
at Module._compile (module.js:605:28)
at Object.Module._extensions..js (module.js:652:10)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
at Module.require (module.js:585:17)
at require (internal/module.js:11:18)
at Object.ngx-google-places-autocomplete/ngx-google-places-autocomplete.directive (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:15441:18)
at webpack_require (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:20:30)
at Object../src/app/home/home.component.ngfactory.js (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:12836:10)
at webpack_require (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:20:30)
at Object../src/app/app.server.module.ngfactory.js (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:12612:10)
at webpack_require (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:20:30)
at Object../src/main.server.ts (/Volumes/Rockup/Projects/Urstack/Lowcost/lowcost-api/dist/server/main.js:14891:37)

google is not defined

issue

I have followed the same steps given in readme, I have noted that the package installed from npm doesn't have GooglePlaceDirective. However, I have added one but still facing same issues. Can anyone help me how to resolve this issue?

How to avoid onSubmit

Whenever i select place from the dropdown the form gets submitted, is there anyway to prevent form from auto submission

There is no directive with "exportAs" set to "ngx-places"

Hi,
I'm trying to migrate my project to "aot" compilation and I got this error when running ng serve --aot

ERROR in : There is no directive with "exportAs" set to "ngx-places" ("[options]='options' [ERROR ->]#placesRef="ngx-places" (onAddressChange)="handl") : Can't bind to 'options' since it isn't a known property of 'input'. (" <input ngx-google-places-autocomplete [ERROR ->][options]='options' #placesRef="ngx-places" ")

I tried to import GooglePlaceModule in app.module.ts and in my component's module but nothing changes. I also tried with

@ViewChild("placesRef") placesRef : GooglePlaceDirective;

and directly importing the directive to my component, bu nothing changes.

What am I missing ,

Thanks a lot!

Google is not defined

I am trying to implement the component but some issue appears , ERROR ReferenceError, google is not defined in this line.

<input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"/>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.