Strange behaviour when setting bg to transparent on view (duplicate non-scrolling view under my view)

I’ve been trying to get the google maps api working in my app and have been pulling my hair out as to why it’s not displaying in my div. (no errors)

However I had seen an artifact when removing my header that looked like a google map; and could see this during the slide transition to the map page. So I set my <view> to have a transparent background and VOLIA my google map (and other page elements) are sitting there working just fine in the background (though unable to interact with them).

All the while I have a non-working view that’s directly on top of it that can scroll… but it doesn’t contain the google map.

So what the heck is going on? Is there 2 instances of my view being rendered somehow? Because that means getelementbyid grabs the first view and not the 2nd?

I have both <ui-view></ui-view> <nav-view></nav-view> in my app index.html which certainly makes a difference to the behaviour.

What’s the difference between ui and nav view? which should I use? I certainly can’t use both by the looks of it. (the only reason I have both is it was in the sample I started from)

Mind posting your code in a plunkr/jsfiddle/codepen? It’s very hard for us to help otherwise, thanks!