El problema es que al poner in active
, el segundo y tercer mapa debería aparecer al cambiar de tab
, pero no lo hace:
<div class="services-tab border-10px bg-white-light">
<ul class="nav nav-tabs">
<li class="active ancho"><a href="#tab11" data-toggle="tab"></i>Encarnación</a></li>
<li class="ancho"><a href="#tab12" data-toggle="tab">Asunción</a></li>
<li class="ancho"><a href="#tab13" data-toggle="tab">Ponta Pora Brasil</a></li>
</ul>
<div class="tab-content space2">
<div class="tab-pane fade in active" id="tab11">
<div class="row">
<div class="col-md-5">
<!-- Google Map HTML Codes -->
<div id="map" style="width:100%;height:500px" class="map-canvas autoload-map"
data-mapstyle="style2"></div>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(-27.336761, -55.865042),
zoom: 15
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<div class="text-center">
<h3>Víctor Bogarín Odontología</h3>
<p>Curupayty 435 – Edificio Ivasiuten</p>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrld71nSGZl1spbIOxaJVaQhj2EW5b1Gg&callback=myMap"></script>
</div>
<div class="col-md-6">
<div class="service-content">
<h3 class="sub-title mb-0 mt-30">Consultorio</h3>
<h1 class="title mt-0">Encarnación</h1>
<p>One Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae.</p>
<div class="row mt-30 mb-20">
<div class="col-xs-6">
<ul class="mt-10">
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Qualified Doctors</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> 24×7 Emergency Services</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> General Medical</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="mt-10">
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Feel like Home Services</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Outdoor Checkup</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Easy and Affordable Billing</li>
</ul>
</div>
</div>
<a class="btn btn-lg btn-dark btn-theme-colored" href="#">Más detalles</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab12">
<div class="row">
<div class="col-md-5">
<!-- Google Map HTML Codes -->
<div id="map2" style="width:100%;height:500px" class="map-canvas autoload-map"
data-mapstyle="style2"></div>
<script>
function myMap2() {
var mapCanvas2 = document.getElementById("map2");
var mapOptions2 = {
center: new google.maps.LatLng(-25.272622, -57.591226),
zoom: 15
};
var map2 = new google.maps.Map(mapCanvas2, mapOptions2);
}
</script>
<div class="text-center">
<h3>ODONTOLOGÍA KAYATT </h3>
<p>Gral Garay 654 esq/ Eusebio Lillio</p>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFotF4q8XFdhwQPB97bTgaG_Lkx65sSUw&callback=myMap2"></script>
</div>
<div class="col-md-6">
<div class="service-content">
<h3 class="sub-title mb-0 mt-30">Consultorio</h3>
<h1 class="title mt-0">Asunción</h1>
<p>One Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae.</p>
<div class="row mt-30 mb-20">
<div class="col-xs-6">
<ul class="mt-10">
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Qualified Doctors</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> 24×7 Emergency Services</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> General Medical</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="mt-10">
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Feel like Home Services</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Outdoor Checkup</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Easy and Affordable Billing</li>
</ul>
</div>
</div>
<a class="btn btn-lg btn-dark btn-theme-colored" href="#">Más detalles</a>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab13">
<div class="row">
<div class="col-md-5">
<div id="map3" style="width:100%;height:500px" class="map-canvas autoload-map"
data-mapstyle="style2"></div>
<script>
function myMap3() {
var mapCanvas3 = document.getElementById("map3");
var mapOptions3 = {
center: new google.maps.LatLng(-22.528551, -55.726986),
zoom: 15
};
var map3 = new google.maps.Map(mapCanvas3, mapOptions3);
}
</script>
<div class="text-center">
<h3>Víctor Bogarín Odontología</h3>
<p>Avda Pdte Vargas 787</p>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyApP9RAbkP4S5p_XZRcQfXUo5ATzSGqBGg&callback=myMap3"></script>
</div>
<div class="col-md-6">
<div class="service-content">
<h3 class="sub-title mb-0 mt-30">Consultorio</h3>
<h1 class="title mt-0">Ponta Pora Brasil</h1>
<p>One Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, iste, architecto ullam tenetur quia nemo ratione tempora consectetur quos minus ut quo nulla ipsa aliquid neque molestias et qui sunt. Odit, molestiae.</p>
<div class="row mt-30 mb-20">
<div class="col-xs-6">
<ul class="mt-10">
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Qualified Doctors</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> 24×7 Emergency Services</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> General Medical</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="mt-10">
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Feel like Home Services</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Outdoor Checkup</li>
<li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i> Easy and Affordable Billing</li>
</ul>
</div>
</div>
<a class="btn btn-lg btn-dark btn-theme-colored" href="#">Más detalles</a>
</div>
</div>
</div>
</div>
</div>
</div>