Many google maps in child views



I’m new to AngularJS and ionic. I’m trying to understand how to have lots of google maps in different states/views in an ionic app. To illustrate what I mean, I’ve created a codepen:

So far, it has a tab called ‘Map’ at the bottom, which loads up some chats (which have an associated lat/lon), creates markers and plots all of them on an overall map for all the chats. Currently the overall map is an element within the tab-map.html template:

<ion-view view-title="Friends Map">
      <div id="map" class="map" data-tap-disabled="true"></div>

I also would like to have individual maps for each chat/user: when you click on on specific chat under the ‘Chats’ tab, I would like to display a map for each user.

I’m guessing that creating lots of google map objects is probably a really bad idea (e.g. if there are 1000 chats), so I’m imagining that re-using the google ‘map’ object is the way to go (with appropriate re-size so that it fills say 50% of the screen).

How does one do this in an angular way? Should I move the map element around the DOM for each chat? Create a hidden div at the top level, and re-size as appropriate??

Any ideas and code samples would be highly appreciated.


Any thoughts on this anyone??