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

🎒 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:

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 )

[options]="{
    type: 'address',
    componentRestrictions: { country: 'FR' }
    }"

#Tested in:

• Chrome
• Firefox
• Safari

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