I have an app based on the side menu template. Within a certain view I also use tabs. The tabs work fine for most content but not when I try to use google maps. This seems to be down to my Google maps JS looking for an element which isn’t in the DOM until you navigate to the tab, by which time it’s too late. I suspect this is down to how I’ve structured things.
I have 3 “main” views
- menu (the side menu as per the template)
- a case list (a standard list view)
- a case view (to view the case details).
When inside the case view I set some case details at the top of the view then have ion-tabs with a tab for each part of the case underneath. This works fine apart from when I want a google map to render on one of the tabs.
My CaseController (for the case view) sets the data for the top data (which is present across all the views) and also for each tab. The issue that my google analytics code is looking for an element to attach the map to which isn’t in the dom until I click on the tab, by which time it’s too late.
I think I’m maybe structuring things incorrectly? Should I have a separate view and controller for each tab view as well as for the case data above the tabs?
Or is there some way to delay some controller code until a tab has loaded (and been added to the dom?).
Can add code if needed.
Thanks in advance for any help.