Easy AngularJS Directive for Google Places Autocomplete

app.js

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;
}

index.html

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

i am trying to same code but grtting angular.js:14525 Error: [$controller:ctrlreg] error .

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=api-key"></script> <script src="app.js"></script>

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

How can I use make this directive useful if i have multiple middle points in ionic ?

This is my code

<label class="item item-input">
          <input type="text" id="location" placeholder="Your Currunt Location" ng-model="location.address" googleplace="" class="ng-pristine ng-valid" autocomplete="on"><!-- googleplace -->
       </label>
     <label class="item item-input">
          <input type="text" id="middle" placeholder="Pick up point" ng-model="middle.address" googleplace="" class="ng-pristine ng-valid" autocomplete="on"><!-- googleplace -->
       </label>
     <label class="item item-input">
          <input type="text" id="end" placeholder="Exit point" ng-model="end.address" googleplace="" class="ng-pristine ng-valid" autocomplete="on"><!-- googleplace -->
       </label>

what if i have multiple middle points and i am making a route between them? How would i do that ?

when i am using this directive i getting error ReferenceError: google is not defined please give solution for that

@Dhaval4241 You need to add the Google script to your index.html

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&libraries=places&sensor=false"></script>

google should now be avaiable in the window scope.

Helped me a lot. Thanks!

Can you help me out in binding places for specific 1 city only?

My current directive code is,

angular.module('testApp').directive('googlePlace', function () {
       return {
           require: 'ngModel',
           link: function (scope, element, attrs, model) {

               var southWest = new google.maps.LatLng(36.970298, -87.01993499999998);
               var northEast = new google.maps.LatLng(42.5083379, -91.51307889999998);

               var SyracruiseBounds = new google.maps.LatLngBounds(southWest, northEast);

              var options = {
                   bounds: SyracruiseBounds,
                   types: ['address']
               };
               scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
               scope.gPlace.bindTo('bounds', map);
               scope.gPlace.setOptions({ strictBounds: true });

               google.maps.event.addListener(scope.gPlace, 'place_changed', function () {

                   var geoComponents = scope.gPlace.getPlace();

                   var latitude = geoComponents.geometry.location.lat();
                   var longitude = geoComponents.geometry.location.lng();
                   var addressComponents = geoComponents.address_components;

                   addressComponents = addressComponents.filter(function (component) {
                       switch (component.types[0].locality) {
                           case "Syracruse": // city
                               return true;
                           default:
                               return false;
                       }
                   }).map(function (obj) {
                       return obj.long_name;
                   });

                   addressComponents.push(latitude, longitude);

                   scope.$apply(function () {
                       scope.details = addressComponents; // array containing each location component
                       model.$setViewValue(element.val());
                   });
               });
          }
       };
   });

Hi, this helped me a lot. Thank you for sharing this. Just to get some more information on this, is it possible that using this directive, i can have two places in a form which has this directive defined? I tried attaching this directive to two input elements and it only works for one. Anything on this would be a great help. Thanks.