Last active
November 12, 2015 18:14
-
-
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
This file contains 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