Multi tool use

Google Map Autocomplete in Ionic 1 Modal

I am implementing Google map autocomplete in Ionic 1 Modal.

Modal HTML Code:

<style type="text/css">
.pac-container {
z-index: 3000 !important;
}

.modal-open {
pointer-events: auto !important;
}
</style>
<ion-modal-view>
<ion-header-bar>
</ion-header-bar>
<ion-content class="feed-content" scroll="true">
<input type="text" id="location" name="location" placeholder="City
or ZIP code">
</ion-content>
</ion-modal-view>


My Controller Code:

$ionicModal.fromTemplateUrl('templates/ride/googleplace.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modalGooglePlace = modal;
// $scope.modal.show();
});
$scope.openGooglePlace = function() {
console.log("Modal");
/*prepare modal*/
$scope.modalGooglePlace.show();
var input = document.getElementById('location');
autocomplete = new google.maps.places.Autocomplete(input,
options);
}


Issue which I am facing that after I start typing in input field the list appears but when I try to select the place just by clicking on that list the list closes and nothing is shown in input.
Can anyone help me in solving this issue.???

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.