Menu
i am trying to use google places in ionic modal but not able to select the place.
the main screen it's working fine. i could able to search and select a location. but when you open modal window by clicking the "Google Place" button, i am not able to select the address in the modal window. i am not getting the lat and long in modal window.
any help would be greatly appreciated.
see my plunker:
http://plnkr.co/edit/e01DFWDvicLJa6Ouluz7?p=preview1
here is my html:
<ion-content>
<div>
<div>Google Places Autocomplte integration in Angular</div>
<div>To Test, start typing the name of any Indian city</div>
<div>selection is: {{chosenPlace}}</div>
<div>
<input ng-model="chosenPlace" details="chosenPlaceDetails" googleplace/>
</div>
<div>lat: {{chosenPlaceDetails.geometry.location.lat()}}</div>
<div>lang: {{chosenPlaceDetails.geometry.location.lng()}}</div>
</div>
<!-- <div id="map" data-tap-disabled="true"></div> -->
</ion-content>
modal html:
<div class="modal">
<ion-header-bar>
<h1 class="title">Choose </h1>
<a ng-click="closeGooglePlaceModal()()" class="button button-icon icon ion-close"></a>
</ion-header-bar>
<ion-content>
<ul class="list">
<li class="item" ng-click="clickLocationItem(item.ID)" ng-repeat="item in locations" ng-bind-html="item.Nome"></li>
</ul>
<div>
<div>Google Places Autocomplte integration in Angular</div>
<div>To Test, start typing the name of any Indian city</div>
<div>selection is: {{chosenPlace1}}</div>
<div>details object is Lattitude: {{chosenPlaceDetails1.geometry.location.lat()}}</div>
<div>
<input ng-model="chosenPlace1" details="chosenPlaceDetails1" googleplace/>
</div>
</div>
</ion-content>
</div>
app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
/*https://github.com/jvandemo/angularjs-google-maps*/
.directive('googleplace', function() {
return {
require: 'ngModel',
scope: {
ngModel: '=',
details: '=?'
},
controller: function($scope) {
//$scope.gPlace;
console.log("....1");
},
link: function(scope, element, attrs, model) {
var options = {
types: [],
componentRestrictions: {}
};
scope.gPlace = new google.maps.places.Autocomplete(element[0], options);
google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
console.log("....2");
scope.$apply(function() {
scope.details = scope.gPlace.getPlace();
console.log(scope.details.geometry.location.lat());
model.$setViewValue(element.val());
});
});
}
};
})
.controller('MapCtrl', function($scope, $ionicLoading, $compile, $cordovaGeolocation, $ionicPlatform, $ionicModal) {
$scope.gPlace;
$ionicModal.fromTemplateUrl('googleplace.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modalGooglePlace = modal;
// $scope.modal.show();
});
$scope.openGooglePlace = function() {
/*prepare modal*/
$scope.modalGooglePlace.show();
}
$scope.closeGooglePlaceModal = function() {
$scope.modalGooglePlace.hide();
}
});
regards,
350
After hours of web-research I started searching a solution by myself and finally found it.
Ionic adds a "pointer-events: none" css-style when opening a modal view. This suppresses all cursor events, such as hover, etc. so we cant get the Places-Ites-Hover-Event.
Just add the "pointer-events: auto;" style to the .pac-container class.
This did the trick for me.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
