diff --git a/.gitignore b/.gitignore index 309b424..6bdc209 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ /bower_components node_modules +.idea/ diff --git a/ion-google-place.css b/ion-google-place.css index 8cd1801..5f0f907 100644 --- a/ion-google-place.css +++ b/ion-google-place.css @@ -6,6 +6,23 @@ left: 0; z-index: 20; display: none; + background: rgba(0,0,0,0.4); +} + +.ion-google-place-container .spinner-container{ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + width: 30px; + height: 30px; + z-index: 10; +} + +.ion-google-place-container .spinner-container .spinner{ + stroke: #eee; } diff --git a/ion-google-place.js b/ion-google-place.js index 7382ab6..244be3b 100644 --- a/ion-google-place.js +++ b/ion-google-place.js @@ -16,42 +16,50 @@ angular.module('ion-google-place', []) scope: { ngModel: '=?', geocodeOptions: '=', - currentLocation: '@' + currentLocation: '@', + playServices: "=?" }, link: function(scope, element, attrs, ngModel) { var unbindBackButtonAction; scope.locations = []; var geocoder = new google.maps.Geocoder(); + var service = new google.maps.places.AutocompleteService(); + var searchEventTimeout = undefined; + scope.$on('ion-google-place:setViewValue',function(e,args){ + ngModel.$setViewValue({formatted_address:args.location}); + ngModel.$render(); + }); scope.displayCurrentLocation = false; scope.currentLocation = scope.currentLocation === "true"? true:false; - + if(!!navigator.geolocation && scope.currentLocation){ scope.displayCurrentLocation = true; } var POPUP_TPL = [ '' ].join(''); @@ -64,12 +72,30 @@ angular.module('ion-google-place', []) popupPromise.then(function(el){ var searchInputElement = angular.element(el.element.find('input')); - scope.selectLocation = function(location){ - ngModel.$setViewValue(location); - ngModel.$render(); - el.element.css('display', 'none'); - $ionicBackdrop.release(); - + scope.selectLocation = function (location) { + if(scope.playServices){ + scope.isCallInProgress = true; + geocoder.geocode({address: location.description}, function (results, status) { + if (status == google.maps.GeocoderStatus.OK) { + scope.isCallInProgress = false; + scope.$apply(function () { + ngModel.$setViewValue(results[0]); + ngModel.$render(); + el.element.css('display', 'none'); + $ionicBackdrop.release(); + }); + } else { + scope.isCallInProgress = false; + // @TODO: Figure out what to do when the geocoding fails + } + }); + } + else{ + ngModel.$setViewValue(location); + ngModel.$render(); + el.element.css('display', 'none'); + $ionicBackdrop.release(); + } if (unbindBackButtonAction) { unbindBackButtonAction(); unbindBackButtonAction = null; @@ -117,26 +143,43 @@ angular.module('ion-google-place', []) }); }; - scope.$watch('searchQuery', function(query){ + scope.$watch('searchQuery', function (query) { if (searchEventTimeout) $timeout.cancel(searchEventTimeout); - searchEventTimeout = $timeout(function() { - if(!query) return; - if(query.length < 3); + searchEventTimeout = $timeout(function () { + if (!query) return; + if (query.length < 3); + var req = {}; + req.input = query; + if(scope.playServices){ + scope.isCallInProgress = true; - var req = scope.geocodeOptions || {}; - req.address = query; - geocoder.geocode(req, function(results, status) { - if (status == google.maps.GeocoderStatus.OK) { - scope.$apply(function(){ - scope.locations = results; - }); - } else { - // @TODO: Figure out what to do when the geocoding fails - } - }); + service.getQueryPredictions(req, function (predictions, status) { + if (status == google.maps.places.PlacesServiceStatus.OK) { + scope.locations = predictions; + scope.$apply(); + } + scope.isCallInProgress = false; + }); + } + else{ + scope.isCallInProgress = true; + var req = scope.geocodeOptions || {}; + req.address = query; + geocoder.geocode(req, function(results, status) { + if (status == google.maps.GeocoderStatus.OK) { + scope.$apply(function () { + scope.locations = results; + scope.isCallInProgress = false; + }); + } else { + // @TODO: Figure out what to do when the geocoding fails + scope.isCallInProgress = false; + + } + }); + } }, 350); // we're throttling the input by 350ms to be nice to google's API }); - var onClick = function(e){ e.preventDefault(); e.stopPropagation(); @@ -198,9 +241,15 @@ angular.module('ion-google-place', []) if(!ngModel.$viewValue){ element.val(''); } else { - element.val(ngModel.$viewValue.formatted_address || ''); + element.val(ngModel.$viewValue.street_address || ngModel.$viewValue.formatted_address || ''); } + }; + $timeout(function () { + //initialize model value + ngModel.$setViewValue(ngModel.$modelValue); + ngModel.$render(); + },200); scope.$on("$destroy", function(){ if (unbindBackButtonAction){