Skip to content
This repository has been archived by the owner on Sep 20, 2023. It is now read-only.

Closes #91, Google Places Api Predictions and Place Details Added, Loader implemented #101

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Closes #91, Google Places Api Predictions and Place Details Added, Loader implemented #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
/bower_components
node_modules
.idea/
17 changes: 17 additions & 0 deletions ion-google-place.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}


Expand Down
137 changes: 93 additions & 44 deletions ion-google-place.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
'<div class="ion-google-place-container modal">',
'<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="' + (attrs.searchPlaceholder || 'Enter an address, place or ZIP code') + '">',
'</label>',
'<button class="button button-clear">',
attrs.labelCancel || 'Cancel',
'</button>',
'</div>',
'<ion-content class="has-header has-header">',
'<ion-list>',
'<ion-item type="item-text-wrap" ng-click="setCurrentLocation()" ng-if="displayCurrentLocation">',
'Use current location',
'</ion-item>',
'<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 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="' + (attrs.searchPlaceholder || 'Enter an address, place or ZIP code') + '">',
'</label>',
'<button class="button button-clear">',
attrs.labelCancel || 'Cancel',
'</button>',
'</div>',
'<ion-content class="has-header has-header">',
'<ion-list>',
'<ion-item type="item-text-wrap" ng-click="setCurrentLocation()" ng-if="displayCurrentLocation">',
'Use current location',
'</ion-item>',
'<ion-item ng-repeat="location in locations" type="item-text-wrap" ng-click="selectLocation(location)">',
'{{location.formatted_address || location.description}}',
'</ion-item>',
'</ion-list>',
'<div class="spinner-container" ng-if="isCallInProgress"><ion-spinner></ion-spinner></div>',
'</ion-content>',
'</div>'
].join('');

Expand All @@ -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;
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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){
Expand Down