skynet2/ngx-google-places-autocomplete

Google Places autocomplete for angular web project

ngx-google-places-autocomplete

This module is a wrapper for Google Places Autocomplete js library.

Installation

npm

npm install ngx-google-places-autocomplete

yarn

yarn add ngx-google-places-autocomplete

Integration

1. Add google library in your index.html file :

    <script src="https://maps.googleapis.com/maps/api/js?key=<Your API KEY>&libraries=places&language=en"></script>

2. Replace with google places api key. Ref - https://developers.google.com/places/web-service/get-api-key

Usage

1. Add a module into your application (as a rule app.module.ts)

import { GooglePlaceModule } from "ngx-google-places-autocomplete";

@NgModule({
    imports: [GooglePlaceModule, BrowserModule, FormsModule, ...],
        ....
        })

2. Add directive ngx-google-places-autocomplete to your input field (options is an optional parammeter)

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

3. Additionally you can reference directive in your component

    @ViewChild("placesRef") placesRef : GooglePlaceDirective;
    
        public handleAddressChange(address: Address) {
        // Do some stuff
    }

Angular Universal

In order to use under angular universal please check that comment #15 (comment)

Options

Refer to original google maps api - https://developers.google.com/maps/documentation/javascript/places-autocomplete Options object - https://github.com/skynet2/ngx-google-places-autocomplete/blob/master/src/objects/options/options.ts Google doc for Options : https://developers.google.com/maps/documentation/javascript/reference/places-widget#AutocompleteOptions Example :

[options]="{
    types: [],
    componentRestrictions: { country: 'UA' }
    }"

GitHub

Please feel free to declare issues or contribute: https://github.com/skynet2/ngx-google-places-autocomplete

ngx-google-places-autocomplete's Issues

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

Google map library can not be found

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)

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.

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;

google is not defined

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?

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)

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

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

How we can bind latlang to narrow our search.

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.

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

Location Object

ngx-google-places-autocomplete/src/objects/geometry.ts

Line 4 in 3e800ef

location: Location;

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.

[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.

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?

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:

[BUG] Dropdown List also move with page scroll

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

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.

Initializing default place

How can I have a default place selected?

Add the restriction for the particular country

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

Get the city entered

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

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

[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.

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.

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?

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

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

Question: Is this Directive uses Session tokens ?

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

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 customize the fields?

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

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.

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?

Lat Long

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

how to extract address,city,state form response

how to extract address,city,state form response

How to avoid onSubmit

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

How to pass rank by distance based on current location?

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!

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

disabled chrome autofill

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.

onAddressChange should emit even if `place_id` is not included in the `fields` array

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

Cannot find name 'GooglePlaceDirective'. angular 6

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

Autocomplete after x characters

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

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

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!

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

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.

click is not working in iOS 9

Autocomplete click is not working in iOS 9 version.

Not able to get photo_reference

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

Reset Autocomplete form from own component

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

How can i remove powered by google trademark?

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!

Google maps image from Address object

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