I am trying to use google sites in an ionic modal but cannot select a site.
The main screen is working fine. I was able to find and choose a location. but when you open the modal window by clicking the "Google Place" button, I can’t select the address in the modal window. I do not get lat and long in the modal window.
Any help would be greatly appreciated.
see my pluker:
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> </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(); } });
Yours faithfully,