Google Maps iframe not displaying correctly with Bootstrap Collapse panel collapsed

This should show exactly what I am struggling with: http://jsfiddle.net/PaulHighten/c5knqdgd/

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingParis">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseParis" aria-expanded="true" aria-controls="collapseParis">
          Eiffel Tower, Paris
        </a>
      </h4>
    </div>
    <div id="collapseParis" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingParis">
      <div class="panel-body">
        <div class="googlemap">
          <iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=Eiffel%20Tower%2C%20Avenue%20Anatole%20France%2C%20Paris%2C%20France&key=AIzaSyAFUKSu28KvFk67YcSlUWeUJ2TpcifSVmQ"></iframe>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingLondon">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseLondon" aria-expanded="false" aria-controls="collapseLondon">
          Trafalgar Square, London
        </a>
      </h4>
    </div>
    <div id="collapseLondon" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingLondon">
      <div class="panel-body">
        <div class="googlemap">
          <iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=Trafalgar%20Square%2C%20London%2C%20United%20Kingdom&key=AIzaSyAFUKSu28KvFk67YcSlUWeUJ2TpcifSVmQ"></iframe>
       </div>
    </div>
  </div>
</div>

The Paris panel shows the map correctly as it has a class of "in".

The London panel does not have that class which means bootstrap applies display: none; to that panel. I'm assuming that stops the iframe from running it's http request properly.

Can the Google Maps Embed API be used to achieve this? I've seen lots of questions relating to API v3 and initialize() calls, but struggled to find anything that related to making the embed iframe code work.

Thanks in advance.

=================

Edit: Code I used which solved the problem (slight modification of Christina's answer to only update the relevant iframe once):

$('[data-toggle="collapse"]').click('show.bs.collapse', function() {
  var mapFrame = $($(this).attr('href') + ' .googlemap iframe');
  if (!$(mapFrame).hasClass('map-refreshed')) {
    mapFrame.attr('src', mapFrame.attr('src')+'');
    mapFrame.addClass('map-refreshed');
  }
});

Solution

Refresh the iframe source on the shown.bs.collapse OR show.bs.collapse function

$('[data-toggle="collapse"]').click('shown.bs.collapse', function() {  
     var googleIframe = $('.googlemap iframe');
      googleIframe.attr('src',googleIframe.attr('src')+'');
});

DEMO: http://jsfiddle.net/ekba9y8w/

Assumes that the .googlemap is parent of the iframe.

Paul Highten's update so it doesn't keep on refreshing:

$('[data-toggle="collapse"]').click('show.bs.collapse', function() {
  var mapFrame = $($(this).attr('href') + ' .googlemap iframe');
  if (!$(mapFrame).hasClass('map-refreshed')) {
    mapFrame.attr('src', mapFrame.attr('src')+'');
    mapFrame.addClass('map-refreshed');
  }
});