Google Maps iframe is not displayed correctly with an error.
This should show 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 displays the map correctly as it has an "in" class.
The London panel doesn't have this class, which means bootstrap applies display: none; to this panel. I am assuming that the iframe stops the HTTP request from executing as expected.
Can Google Maps Embed API be used to achieve this? I've seen a lot of questions related to v3 API calls and initialize () but struggled to find anything related to generating iframe code to embed.
Thanks in advance.
=================
Edit: The code I used that solved the problem (slight modification to Christina's answer to update only the corresponding iframe):
$('[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');
}
});
source to share
Update iframe source in show.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 .googlemap is the parent of the iframe.
Update Paul Highten so it doesn't update:
$('[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');
}
});
source to share