Google Map Inside a List Card Size issue

ionic-v1
1

From what I understand list have a dynamic height to them depending on the content of the list. The problem is when I want to use a google maps inside the list. Since I have to give a container height to the map. Which if I set to 100% it does not show anything.

This is the map html

<ion-view view-title="Map">
<ion-content class="padding">
<div class="list card">

  <div class="item item-avatar">
    <img src="img/{{siteInfo.capitalName}}.png">
    <h2>{{Map.siteInfo.fullName}}</h2>
    <p>{{Map.siteInfo.fisicalDirection}}</p>
  </div>
  <div id="map"></div>
  <a class="item item-icon-left assertive" ng-click="Map.getDirections(pin)">
    <i class="icon ion-ios-location-outline"></i>
    Directions
  </a>
</div>
</ion-content>
</ion-view>

My controller :

.controller('MapCtrl', function(Location) {

var self = this;
var site = Location.get('siteLocation');
self.siteInfo = Location.getSiteInfo(site);

var latLong = new google.maps.LatLng(self.siteInfo.lat, self.siteInfo.long);

var mapOptions = {
    zoom: 15,
    center: latLong,
};

var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});

And the CSS:

#map {
   height: 100%;
}

If I hard code a pixel height the mark works just fine. Would appreciate the help.

2

Hi,
did you find a solution ?