Angular directive for the Google Places Autocomplete component.
Install via bower: bower install angular-google-places-autocomplete-callback
Or if you're old skool, copy src/autocomplete.js into your project.
Then add the script to your page (be sure to include the Google Places API as well):
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="/bower_components/angular-google-places-autocomplete/src/autocomplete.js"></script>You'll probably also want the styles:
<link rel="stylesheet" href="/bower_components/angular-google-places-autocomplete/src/autocomplete.css">First add the dependency to your app:
angular.module('myApp', ['google.places']);Then you can use the directive on text inputs like so:
<input type="text" g-places-autocomplete ng-model="myScopeVar" />The directive also supports the following optional attributes:
- forceSelection — forces the user to select from the dropdown. Defaults to
false. - options — See google.maps.places.AutocompleteRequest object specification.
**The original directive fires an event called "g-places-autocomplete:select" with the prediction as parameter. My patch adds the possibility to add a callback when that event is fired, ie: when a new place is selected. To use it, just add an attribute: on-place-updated="myCallback(prediction)" to your directive. In your controller, define $scope.myCallback(place). That function will be called every time a new place is selected from the directive.
eg.
html:
<input type="text" name="address" on-place-updated="vm.googlePlaceComponentsFilter(place)" ng-model="vm.contact.addresses[0].address_line_1" g-places-autocomplete/>controller:
vm.googlePlaceComponentsFilter = googlePlaceComponentsFilter;
function googlePlaceComponentsFilter(place){
//do whatever you want to do with place data.
console.log(place);
}Create a ticket here
Issue a pull request including any relevant testing and updated any documentation if required.