2

When combining the new slides (aka Swiper) and angular-google-maps, dragging is not possible inside of Google Maps and leads to grey space instead.

This even happens when we disable swiping via .lockSwipes()

What I also unsuccessfully tried are these attributes:

onlyExternal: true
touchMoveStopPropagation: false
preventClicksPropagation: false

Finally, I found that using google.maps.event.trigger(MapInstance, 'resize') like suggested here does not work either.

This is my code:

<ion-slides options="swiper">
  <ion-slide-page>
    <ui-gmap-google-map control="map.control" center='map.center' zoom='map.zoom'
    </ui-gmap-google-map>
  </ion-slide-page>
</ion-slides>

and in my .js:

angular.module('ionicApp', ['ionic', 'uiGmapgoogle-maps'])
.controller('MainCtrl', function($scope) {
  $scope.swiper = {
    onInit: function(swiper){
      swiper.lockSwipes();
    }
  };
  $scope.map = { control:{}, center: { latitude: 45, longitude: -73 }, zoom: 8 };
});

Here's a plunkr that shows my issue: http://plnkr.co/edit/JiAw0oXRxLGgL3SrE6PK?p=preview2

Community
  • 1
  • 1
horstwilhelm
  • 305
  • 1
  • 15

1 Answers1

1

After pulling my own hair out for two hours, the solution I finally found here worked for me: https://forum.ionicframework.com/t/google-map-inside-ion-slides-display-issue/53743/2

The long and short is that the Swiper messes with the CSS underneath google maps. Since I am using ng-map, this line worked for me:

ng-map img { max-height: none !important; }
davidfurber
  • 5,274
  • 1
  • 20
  • 11