Estoy intentado agregar en tabs
diferentes mapas de Google, el problema es que cuando cambio de un tab
a otro, los mapas no muestran (calculan) el tamaño (zoom) que deberían tener.
Se crearon algunos mapas en Google Maps, y los estoy agregando al HTML, y agregándolos en tabs
diferentes, pero cando cambio de tab
, el mapa no calcula el tamaño que tiene por defecto.
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="page-content p-t-80 p-b-30">
<div class="container">
<div class="row">
<div class="tab col-md-9 col-md-push-3">
<section class="section post-section-1 p-l-10">
<div id="Barranquilla" class="tabcontent">
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1fbzWJWtL6-IkClEr1V0xYSX9XsBFZlea" width="100%;" height="480px"></iframe>
</div>
<div id="Bello" class="tabcontent">
<iframe src="https://www.google.com/maps/d/embed?mid=1t9pL3ckgEgTqobd6UhHQbv25VRMtffB-" width="100%" height="480px"></iframe>
</div>
<div id="Bogota" class="tabcontent">
<iframe src="https://www.google.com/maps/d/embed?mid=1-faYQ_VtPG_ba4OCuODv6mefLNLF9FfG" width="100%" height="480px"></iframe>
</div>
</section>
</div>
<div class="col-md-3 col-md-pull-9">
<h4 id="" class="text-bold text-bold text-med m-t-0 m-b-30">Lista de Ciudades.</h4>
<div class="container" id="ListCity">
<ul class="post-tabs post-tabs-1 m-b-40 nav-stacked anyClass">
<li>
<a class="tablinks" onclick="openCity(event, 'Barranquilla')" id="defaultOpen">Barranquilla
</a>
</li>
<li>
<a class="tablinks" onclick="openCity(event, 'Bello')">Bello
</a>
</li>
<li>
<a class="tablinks" onclick="openCity(event, 'Bogota')">Bogotá
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>