Can modals have maps?

#1

I have a directive that displays a map on a small corner of my app. But I would rather the map was large. A full screen would do. So I’m trying to use a modal. The modal shows fine and I can populate it with text, cards, basically anything and then close it.

But it doesn’t show my map. Though, the directive still works on every other screen which is not a modal.

<div class="modal">
    <header class="bar bar-header">
      <h1 class="title">Map</h1>
      <button class="button button-royal button-primary" ng-click="modal.hide()">Close</button>
    </header>
    <content has-header="true">
      <div class="padding">
        <item>
          <map location="place"></map>
          <!-- map is of course my map directive -->
        </item>
      </div>
    </content>
</div>

Can a modal display a map ? If yes I’d be glad to get some pointers as to how to go about that.

1 Like
#2

It SHOULD be possible. Sometimes there are some problems with modals and content because the modal takes a while to instantiate after the views controller is loaded. The rough work around for this is to wrap a $timeout around any data so it will show after the Modal has loaded.

Can you setup a CodePen sample to help us figure it out?

1 Like
#3

Sure. This is how best I could replicate the scenario; http://codepen.io/mturkson23/pen/bfxgC/

#4

The problem is that when the modal is not actually shown, the google-map directive is running. However, there is no “map_canvas” element yet. I’ve tried all kinds of ways to delay it’s firinig but keep coming up blank.

Here’s some sample work: http://codepen.io/calendee/pen/Cebkd

Anyone else have ideas?

#5

Has anyone figured this out? I am having the same issue. :smiley: