Created
November 12, 2015 18:25
-
-
Save Teino1978-Corp/40ca826979e2fdc0c7b4 to your computer and use it in GitHub Desktop.
Updated ion-google-place.js which only calls google map API when search is performed. Master at https://github.com/israelidanny/ion-google-place/blob/master/ion-google-place.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module('ion-google-place', []) | |
.directive('ionGooglePlace', [ | |
'$ionicTemplateLoader', | |
'$ionicBackdrop', | |
'$q', | |
'$timeout', | |
'$rootScope', | |
'$document', | |
'$window', | |
function($ionicTemplateLoader, $ionicBackdrop, $q, $timeout, $rootScope, $document, $window) { | |
return { | |
require: '?ngModel', | |
restrict: 'E', | |
template: '<input type="text" readonly="readonly" class="ion-google-place" autocomplete="off">', | |
replace: true, | |
link: function(scope, element, attrs, ngModel) { | |
scope.locations = []; | |
var geocoder; | |
var searchEventTimeout; | |
var POPUP_TPL = [ | |
'<div class="ion-google-place-container">', | |
'<div class="bar bar-header item-input-inset">', | |
'<label class="item-input-wrapper">', | |
'<i class="icon ion-ios7-search placeholder-icon"></i>', | |
'<input class="google-place-search" type="search" ng-model="searchQuery" placeholder="Enter an address, place or ZIP code">', | |
'</label>', | |
'<button class="button button-clear">', | |
'Cancel', | |
'</button>', | |
'</div>', | |
'<ion-content class="has-header has-header">', | |
'<ion-list>', | |
'<ion-item ng-repeat="location in locations" type="item-text-wrap" ng-click="selectLocation(location)">', | |
'{{location.formatted_address}}', | |
'</ion-item>', | |
'</ion-list>', | |
'</ion-content>', | |
'</div>' | |
].join(''); | |
var popupPromise = $ionicTemplateLoader.compile({ | |
template: POPUP_TPL, | |
scope: scope, | |
appendTo: $document[0].body | |
}); | |
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.$watch('searchQuery', function(query){ | |
if (searchEventTimeout) $timeout.cancel(searchEventTimeout); | |
searchEventTimeout = $timeout(function() { | |
if(!query) return; | |
if(query.length < 3); | |
if (!geocoder) { | |
geocoder = new $window.google.maps.Geocoder(); | |
console.log("Init geocoder", geocoder); | |
} | |
console.log("Searching %s", query); | |
geocoder.geocode({ address: query }, function(results, status) { | |
if (status == $window.google.maps.GeocoderStatus.OK) { | |
scope.$apply(function(){ | |
console.log("Geocoding results", results); | |
scope.locations = results; | |
}); | |
} else { | |
console.log("Geocoding Failed"); | |
// @TODO: Figure out what to do when the geocoding fails | |
} | |
}); | |
}, 350); // we're throttling the input by 350ms to be nice to google's API | |
}); | |
var onClick = function(e){ | |
e.preventDefault(); | |
e.stopPropagation(); | |
//$ionicBackdrop.retain(); | |
el.element.css('display', 'block'); | |
searchInputElement[0].focus(); | |
setTimeout(function(){ | |
searchInputElement[0].focus(); | |
},0); | |
}; | |
var onCancel = function(e){ | |
scope.searchQuery = ''; | |
$ionicBackdrop.release(); | |
el.element.css('display', 'none'); | |
}; | |
element.bind('click', onClick); | |
element.bind('touchend', onClick); | |
el.element.find('button').bind('click', onCancel); | |
}); | |
if(attrs.placeholder){ | |
element.attr('placeholder', attrs.placeholder); | |
} | |
ngModel.$formatters.unshift(function (modelValue) { | |
if (!modelValue) return ''; | |
return modelValue; | |
}); | |
ngModel.$parsers.unshift(function (viewValue) { | |
return viewValue; | |
}); | |
ngModel.$render = function(){ | |
if(!ngModel.$viewValue){ | |
element.val(''); | |
} else { | |
element.val(ngModel.$viewValue.formatted_address || ''); | |
} | |
}; | |
} | |
}; | |
} | |
]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment