Skip to content

Instantly share code, notes, and snippets.

@julienroubieu
Last active November 12, 2015 18:14
Show Gist options
  • Save julienroubieu/fa56c598d6b422d48297 to your computer and use it in GitHub Desktop.
Save julienroubieu/fa56c598d6b422d48297 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
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