skynet2 / ngx-google-places-autocomplete Goto Github PK
View Code? Open in Web Editor NEWGoogle Places autocomplete for angular web project
License: MIT License
Google Places autocomplete for angular web project
License: MIT License
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
Use Keyboard to navigate options and press enter immediately Form is get Submitted
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.
Can you please do the required changes?
utc_offset: number;
has to be replaced by:
utc_offset_minutes: number;
Address.prototype.utc_offset;
has to be replaced by:
Address.prototype.utc_offset_minutes;
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 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.
ng serve --aot
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 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
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)"/>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.