Hi,
I try to develop a meteor ionic. In one view I added a the angular-google-maps plugin with a searchbox.
Everthing works great in the browser. But I got one problem on the iOS Device. When I search for a place in the searchbox I see the list of places but I can not select one with a finger tab.
Dose anyone have a idea how to fix this ? I searched here in the forum and on stackoverflow, but I was not able to fix this.
This is my code
View :
<ion-view view-title="mapview"> <ion-content class="has-header map-container" disableTap> <script type="text/ng-template" id="searchbox.tpl.html"> <input type="text" placeholder="Search Box"> </script> <div class="angular-google-map-container" data-tap-disabled="true" > <ui-gmap-google-map center="mapview.map.center" events="mapview.map.events" zoom="mapview.map.zoom" > <ui-gmap-search-box template="mapview.template" events="mapview.map.events" ></ui-gmap-search-box> </ui-gmap-google-map> </div> </ion-content> </ion-view>
JS:
angular.module('XXXX').config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
'API_KEY_FOR_ANDROID': 'XXX',
'API_KEY_FOR_IOS': 'XXX',
v: '3.20', //defaults to latest 3.X anyhow
libraries: 'places'
});
})
.directive('mapview', function() {
return {
restrict: 'E',
templateUrl: 'client/mapview/mapview.html',
controllerAs: 'mapview',
controller: function($scope, $reactive, $rootScope) {
$reactive(this).attach($scope);
this.template = 'searchbox.tpl.html';
let that = this;
this.map = {
center: {
latitude: 45,
longitude: -73
},
zoom: 8,
events: {
places_changed: (searchBox) => {
var places = searchBox.getPlaces();
if (places) {
this.map.center.latitude = places[0].geometry.location.lat();
this.map.center.longitude = places[0].geometry.location.lng();
}
}
}
};
}
}
})
`