jquery - Multiple Google Maps within Bootstrap Tabs -

i have bootstrap tab structure single google map iframe inside each tab. first tab's iframe looks fine other ones unzoomed , uncentered. it's not iframe src code because tried replacing first 1 second , others; first 1 works fine.

i have seen solutions none of them worked me; don't generate maps javascript (i thought bit complicated 'coz there 11 tabs, meaning 11 maps triggered separately js).

how can make them first one?

<ul id="tablist" class="nav mt20" role="tablist">                     <li role="presentation" class="active">                         <a href="#location1" aria-controls="location1" role="tab" data-toggle="tab">edİrne</a>                     </li>                     <li role="presentation">                         <a href="#location2" aria-controls="location2" role="tab" data-toggle="tab">İstanbul</a>                     </li>                     <li role="presentation">                         <a href="#location3" aria-controls="location3" role="tab" data-toggle="tab">İstanbul</a>                     </li>                 </ul>  <div class="tab-content">                     <div role="tabpanel" class="tab-pane active" id="location1">                         <h2>edirne</h2>                          <div class="map">                             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1490.0295508854501!2d26.554026500000006!3d41.676066999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14b32f70d8d07e91%3a0x66cefa22bb2159ed!2stahmis+sk%2c+sabuni+mh.%2c+22030+edirne%2c+t%c3%bcrkiye!5e0!3m2!1str!2s!4v1417465718288" width="100%" height="300" frameborder="0" style="border:0"></iframe>                         </div>                     </div>                     <div role="tabpanel" class="tab-pane" id="location2">                         <h2>İstanbul / Ümraniye</h2>                          <div class="map">                             <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1505.0782255145343!2d29.11706899999999!3d41.021833000000015!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cac8c2a634cb7d%3a0x2a689ffda344dbd3!2zqwxlbwrhxj8gq2qsidm0mzk4imswc3rhbmj1bcwgvmo8cmtpewu!5e0!3m2!1str!2s!4v1417467819597" width="100%" height="300" frameborder="0" style="border:0"></iframe>                         </div>                     </div>                     <div role="tabpanel" class="tab-pane" id="location3">                         <h2>buyaka</h2>                          <div class="map">                             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6019.895047795627!2d29.126492999999996!3d41.02640399999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cac8dbf23cc11f%3a0x726fb77d4e9c67c5!2sbuyaka!5e0!3m2!1str!2s!4v1417468135827" width="100%" height="300" frameborder="0" style="border:0"></iframe>                         </div>                     </div>                 </div> 

possible approach:

create iframes via js(it's not complicated) when tab has been activated first time.

the markup: store iframe-src in attribute of div.map, e.g. instead of:

<div class="map">   <iframe src="https://www.google.com/......."></iframe> </div> 

only this:

<div class="map" data-map="https://www.google.com/......." ></div> 

the script creates iframes:

$(function(){   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {   var that=$($(e.target).attr('href')).find('.map');   if(!that.find('iframe').length){      that.append($('<iframe/>',{src:that.data('map')})                   .css({height:'300px',width:'100%',border:'none'}));   } }).first().trigger('shown.bs.tab'); }); 

demo: http://jsfiddle.net/doktormolle/x8gkx64k/