angular-google-place
This is a Angular-Google-Place Module publish with Angular Format Package ( ng-packgr)
#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
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