source : places-auto-complete.js 

  1. /**
  2.  * @ngdoc directive
  3.  * @name places-auto-complete
  4.  * @param Attr2MapOptions {service} convert html attribute to Google map api options
  5.  * @description
  6.  *   Provides address auto complete feature to an input element
  7.  *   Requires: input tag
  8.  *   Restrict To: Attribute
  9.  *
  10.  * @attr {AutoCompleteOptions}
  11.  *   [Any AutocompleteOptions](https://developers.google.com/maps/documentation/javascript/3.exp/reference#AutocompleteOptions)
  12.  *
  13.  * @example
  14.  * Example:
  15.  *   <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
  16.  *   <input places-auto-complete types="['geocode']" on-place-changed="myCallback(place)" component-restrictions="{country:'au'}"/>
  17.  *
  18.  */
  19. /* global google */
  20. (function() {
  21.   'use strict';
  22.   var placesAutoComplete = function(Attr2MapOptions, $timeout) {
  23.     var parser = Attr2MapOptions;
  24.     var linkFunc = function(scope, element, attrs, ngModelCtrl) {
  25.       if (attrs.placesAutoComplete ==='false') {
  26.         return false;
  27.       }
  28.       var filtered = parser.filter(attrs);
  29.       var options = parser.getOptions(filtered, {scope: scope});
  30.       var events = parser.getEvents(scope, filtered);
  31.       var autocomplete = new google.maps.places.Autocomplete(element[0], options);
  32.       autocomplete.setOptions({strictBounds: options.strictBounds === true});
  33.       for (var eventName in events) {
  34.         google.maps.event.addListener(autocomplete, eventName, events[eventName]);
  35.       }
  36.       var updateModel = function() {
  37.         $timeout(function(){
  38.           ngModelCtrl && ngModelCtrl.$setViewValue(element.val());
  39.         },100);
  40.       };
  41.       google.maps.event.addListener(autocomplete, 'place_changed', updateModel);
  42.       element[0].addEventListener('change', updateModel);
  43.       attrs.$observe('rectBounds', function(val) {
  44.         if (val) {
  45.           var bounds = parser.toOptionValue(val, {key: 'rectBounds'});
  46.           autocomplete.setBounds(new google.maps.LatLngBounds(
  47.             new google.maps.LatLng(bounds.south_west.lat, bounds.south_west.lng),
  48.             new google.maps.LatLng(bounds.north_east.lat, bounds.north_east.lng)));
  49.           }
  50.       });
  51.       attrs.$observe('circleBounds', function(val) {
  52.         if (val) {
  53.           var bounds = parser.toOptionValue(val, {key: 'circleBounds'});
  54.           var circle = new google.maps.Circle(bounds);
  55.           autocomplete.setBounds(circle.getBounds());
  56.         }
  57.       });
  58.       attrs.$observe('types', function(val) {
  59.         if (val) {
  60.           var optionValue = parser.toOptionValue(val, {key: 'types'});
  61.           autocomplete.setTypes(optionValue);
  62.         }
  63.       });
  64.       attrs.$observe('componentRestrictions', function (val) {
  65.         if (val) {
  66.           autocomplete.setComponentRestrictions(scope.$eval(val));
  67.         }
  68.       });
  69.     };
  70.     return {
  71.       restrict: 'A',
  72.       require: '?ngModel',
  73.       link: linkFunc
  74.     };
  75.   };
  76.   placesAutoComplete.$inject = ['Attr2MapOptions', '$timeout'];
  77.   angular.module('ngMap').directive('placesAutoComplete', placesAutoComplete);
  78. })();