Google Map Inside a List Card Size issue

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">
  <div id="map"></div>
  <a class="item item-icon-left assertive" ng-click="Map.getDirections(pin)">
    <i class="icon ion-ios-location-outline"></i>

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.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.

did you find a solution ?