Ionic angular-google-maps

@Blurri wrote:

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();
          }
        }
      }
    };
  }
}
})

`

Posts: 1

Participants: 1

Read full topic