skynet2 / ngx-google-places-autocomplete Goto Github PK

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!

how can i get the google maps photo_reference from the address object

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

I added google Directive but always following error occurs.
Cannot find name 'GooglePlaceDirective'.

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

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

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

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

How I can customize the fields like here https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

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;
}

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?

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?

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.

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.

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.

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)

anyway we can trigger the autocomplete after x number of characters to optimise the google api call outs?

How to get the city of the address typed on the auto complete input box

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!

how to extract address,city,state form response

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

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.

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.

In which file we have to add the options to restrict the particular country on angular 8

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?

Hello man, I tried to use ur plugin but I realize that Location object is annotated to es6 Location object.

U should fix this by adding import { Location } from "./location"; on the top of geometry.ts file.

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;

I use google place autocomplete on a modal dialog. The dropdown is also move on with page scroll and it's look horrible.

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.

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.

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

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.

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

First Thanks for effort in developing this directive, i had start using it but i have notice i got API calls count per key stroke, and when i read google documentation i notice they mention unless you are using session token the the API calls will be charged by keystroke.

Is your directive using Session tokens ? if not is it possible to add it ?

https://developers.google.com/maps/documentation/javascript/places-autocomplete

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

Hi,

Auto complete is working fine but there is no exapmle so we can set lat and lang to get more appropriate places result. I have spent around 20hrs on it but not found any solution.

My email id is [email protected]

Thanks in advance.

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

Autocomplete click is not working in iOS 9 version.

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

Check this out:

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 (....)

Is there a way to reset the content of the input field from my own component?

How can I have a default place selected?

Since it's possible to customize which data fields are returned by the API like this

options = {
  fields: ['address_components', 'geometry'],
}

shouldn't onAddressChange event emitter emit also if place_id is not included?
Right now it will only emit if address.place_id is defined (see here).

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)

How user can able to get photo_reference in array of photo.without it user not able to display picture of place

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?

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

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!

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)"/>