title: google map not rendering under .collapse bootstrap
body: <p>I have looked every where and am starting to go crazy. I know I am close, but can't get it.</p>
  
  <p>I have my html:</p>
  
  <pre><code>&lt;div id="glasgow-map" class="collapse"&gt;
      &lt;div class="map"&gt;
  &lt;div id="map-canvas" style="width:100%; height:350px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;&lt;!--end collapse--&gt;
  </code></pre>
  
  <p>my JS is:</p>
  
  <pre><code>function initialize() {
    var myLatlng = new google.maps.LatLng(55.860949,-4.244938);
    var mapOptions = {
    zoom: 16,
    center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Taylor Hopkinson Associates'
    });
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
  
  $('#glasgow-map').on('shown.bs.collapse', function () {
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  })
  </code></pre>
  
  <p>From all the other info I have seen I know I need the (map, "resize) but I am getting this error in the console:</p>
  
  <p>Uncaught ReferenceError: map is not defined </p>
  
  <p>Any help would be fantastic. It's been a long day!!</p>