angular-google-place

This is a Angular-Google-Place Module publish with Angular Format Package ( ng-packgr)

Docs | Demo

#Release Notes Please take care of Release Note before creating issues.

GitHub

Please feel free to declare issues or contribute : https://github.com/psykolm22/angular-google-place

Installation

:school_satchel: npm package can be consumed by Angular CLI, Webpack, or SystemJS

NPM

npm install --save angular-google-place

YARN

yarn add angular-google-place --save

Don't forget to add google api in your index.html

• in your index.html:

  <script  type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=GOOGLE_API_KEY"></script>

  Replace by our Google api key .

Usage

• Use it in your HTML elements, for example in your *.component.html:

  <input type="text" [(ngModel)] = "address" 
  [options]='options' 
  (setAddress) = "getAddress($event)"
  (FormatAddress)="getFormattedAddress($event)"
  (street_number) = 'street_number=$event'
  (street)= 'street=$event'
  (city)= 'city=$event'
  (state)='state=$event'
  (district)='district=$event'
  (country)='country=$event'
  (postal_code)='postal_code=$event'
  (lat)='lat=$event' 
  (lng)='lng=$event' 
  (adr_address)='adr_address=$event' 
  (name)='name=$event' 
  (place_id)='place_id=$event' 
  (types)='types=$event' 
  (url)='url=$event'  
  (utc_offset)='utc_offset=$event' 
  (vicinity)='vicinity=$event' 
  (photos)='photos=$event' 
  (CountryCodes)='CountryCodes=$event'
  id="autocomplete"
  angularGooglePlace/>

• Add in your *.component.ts:

• check CHANGELOG.md , types have change to type.

  import { Address } from 'angular-google-place';
  
  export class AppComponent {
  public options = {type : 'address', componentRestrictions: { country: 'FR' }};
  getAddress(place: Address) {
         console.log('Address', place);
     }
  getFormattedAddress(event: any) {
         console.log(event);
     }   
  }

• Add GooglePlaceModule in your *.module.ts: ```typeScript import {AngularGooglePlaceModule} from 'angular-google-place';

@NgModule({ ... import: [..., AngularGooglePlaceModule] })

#Options
Options for Google Search
* Choose one type from

[ '(cities)', '(regions)', 'country', 'postal_code', 'locality', 'sublocality', 'address', 'geocode', 'administrative_area_level_1', 'administrative_area_level_2',]

* country ( dynamic change allow) : CountryCode ISO 3166-1 Alpha-2 ( see demo )
```html  
[options]="{
    type: 'address',
    componentRestrictions: { country: 'FR' }
    }"

#Tested in:

• Chrome
• Firefox
• Safari

#For AngularJS: https://github.com/vskosp/vsGoogleAutocomplete