Skip to content

Instantly share code, notes, and snippets.

@Sarfarazsajjad
Forked from victorb/app.js
Created November 14, 2016 11:24
Show Gist options
  • Save Sarfarazsajjad/8283e75159f8a0372254bbf19b751b9b to your computer and use it in GitHub Desktop.
Save Sarfarazsajjad/8283e75159f8a0372254bbf19b751b9b to your computer and use it in GitHub Desktop.
Easy AngularJS Directive for Google Places Autocomplete
var myApp = angular.module('myApp', []);
myApp.directive('googleplace', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, model) {
var options = {
types: [],
componentRestrictions: {}
};
scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
scope.$apply(function() {
model.$setViewValue(element.val());
});
});
}
};
});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.gPlace;
}
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div>Google Places Autocomplte integration in Angular</div>
<div>To Test, start typing the name of any Indian city</div>
<div>selection is: {{chosenPlace}}</div>
<div><input ng-model="chosenPlace" googleplace/></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment