Using angular-google-maps inside side-menus

ionic-v1
1

I’m trying to add a map inside a view, using the google-map directive. First time it’s fine, it loads without a problem. But if I navigate around and come back to the view containing the map, it gets resized like in this plunker http://plnkr.co/edit/9uKA2e56iTt7IllxRJvs?p=preview

What I want to know is if I you can think about something that could be related to the side menus or ionic specific.
I will try to create a plunker based on this to see if it’s angular-google-maps specific or not and I wil update this post.

2

Hmm. I see what you mean.

This works if you put it in the HomeController, though I wonder if there is an easier way to get the map that is on scope there:

     $scope.$on('viewState.viewEnter', function(e, d) {

      var mapEl = angular.element(document.querySelector('.angular-google-map'));
      var iScope = mapEl.isolateScope();
      var map = iScope.map;
      google.maps.event.trigger(map, "resize");
    });

Ideally, the angluarjs-google-maps would give you a convenient way to broadcast an event telling it to resize, but I don’t see that in their code.

Here’s the working plunker: http://plnkr.co/edit/epVP20Ox54HoneM3eFls?p=preview

3

It looks like I’m doing something wrong, for me the viewState.viewEnter event is not triggering. I have my <view> elements inside divs because I use an ng-switch to load different “partials” depending on what I have to display. Something like this:

<div ng-switch on="item.type">
  <div ng-switch-when="page_content">
    <div ng-include="'views/_default.html'"></div>
  </div>

  <div ng-switch-when="map">
    <div ng-include="'views/_map.html'"></div>
  </div>

  <div ng-switch-when="form">
    <div ng-include="'views/_form.html'"></div>
  </div>
</div>

And inside each partial I have the content wrapped in <view>.

I something wrong with this approach?

Edit:
Found the problem, I’m using ui-view and not nav-view because I don’t want the back button to appear in the navigation bar. Tried using nav-view and set the attribute hide-back-button="true" to the <view> but it doesn’t work.

Edit 2:
Did a bower update and guess what? Now it’s working even without your hack. Maybe it’s something in the latest angular that fixed it, I tried angular 1.2.9 and it still worked.