Google maps breaks on scroll = true

ionic-v1
1

Hey,

I’m building an app that revolves around a google map. On that map you have markers that you can click, on click it opens a modal via the ionicModal service.

Now on my ion-content (where my gmaps houses) i need to set the scroll to false, but when teh modal opens i can’t click anything within that modal. If i turn scroll=true -> then my maps doesn’t work (my guess that it can’t read the 100 height/width) and my modal works like it is supposed to.

So case 1 = ion content scroll=false -> map loads, modal opens showAlert doesn’t trigger
Case 2 = ion content scroll=true -> map doesn’t load -> showAlert triggers

I got a feeling that my modal isn’t on top in the DOM. Can somebody help me with this, i’ve been working at this for hours and hours and can’t seem to get it right.

My main view

<ion-view view-title="Test" >
<ion-content scroll="false">
    <div class="content" style="height: 100%; width: 100%">
        <div style="width:100%;height:100%; background-color: #e9e9e9;" id="map_canvas" ></div>
    </div>
</ion-content>

Main modal JS

$ionicModal.fromTemplateUrl('/templates/modals/artwork-detail.html', {
   scope: $scope,
   animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
   $scope.modal.show();
 });

Modal view

<ion-modal-view>
    <ion-header-bar>
        <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content ng-controller="ArtworkDetailCtrl">
        <button class="button button-calm" ng-click="showAlert()">Alert!</button>
    </ion-content>
</ion-modal-view>

Plugin used for gmaps