JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div role="tabpanel">
<ul id="tablist" class="nav nav-tabs" 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">BUYAKA</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="location1">
<h2>Edirne</h2>
<div class="map" data-map="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" ></div>
</div>
<div role="tabpanel" class="tab-pane" id="location2">
<h2>İstanbul / Ümraniye</h2>
<div class="map" data-map="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" ></div>
</div>
<div role="tabpanel" class="tab-pane" id="location3">
<h2>Buyaka</h2>
<div class="map"...
JavaScript
$(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');
});