1

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>&emsp;Qualified Doctors</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;24×7 Emergency Services</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;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>&emsp;Feel like Home Services</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;Outdoor Checkup</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;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>&emsp;Qualified Doctors</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;24×7 Emergency Services</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;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>&emsp;Feel like Home Services</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;Outdoor Checkup</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;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>&emsp;Qualified Doctors</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;24×7 Emergency Services</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;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>&emsp;Feel like Home Services</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;Outdoor Checkup</li>
                  <li class="mb-10"><i class="fa fa-angle-double-right text-theme-colored font-15"></i>&emsp;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>

1 respuesta 1

2

El motivo por el cual no se ven es que han sido inicializados dentro un tab-pane oculto (display: none) y por esta razon, estos mapas no han podido calcular el tamaño que deberían tener.

Una posible solución:

  • (Recomendación) Incluir solamente 1 vez la librería de de gmaps. En lo posible deberías hubicarla al finalizar el documento.

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyApP9RAbkP4S5p_XZRcQfXUo5ATzSGqBGg"></script>
    

    Si lo sigues haciendo como ahora, lo unico que consigues es que la cargar de tu sitio sea mas lenta.

  • Inicializa los mapas al finalizar la cargar de la pagina, suscribete al event de cambio de tabs y avisale a al mapa (dentro del tab a mostrarse) que recalcule su tamaño.

    Por ejemplo:

    // Al finalizar la carga de la pagina
    $(function() {
    
      // Creamos todos los mapas y los guardamos dentro de `maps`
      var maps = {};
    
      // El nombre con el que guardamos la referencia a la instancia
      // del mapa es identico al `id` del `tab-pane`
      maps.tab11 = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(-27.336761, -55.865042),
        zoom: 15
      });
      maps.tab12 = new google.maps.Map(document.getElementById("map2"), {
        center: new google.maps.LatLng(-25.272622, -57.591226),
        zoom: 15
      });
      maps.tab13 = new google.maps.Map(document.getElementById("map3"), {
        center: new google.maps.LatLng(-22.528551, -55.726986),
        zoom: 15
      });
    
      // Nos suscribimos al cambio en los `tabs`
      $('.services-tab > ul a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // Obtenemos el id del tab-pane
        var mapName = $(e.target).attr('href').substr(1);
    
        if (maps[mapName]) {
          // Si existe el mapa, le avisamos que recalcule su tamaño
          google.maps.event.trigger(maps[mapName],'resize');
        }
      });
    });
    

Aquí un ejemplo funcionando:

$(function() {
  
  // Suscribimos el `click` los a con data-toggle="tab"
  $('a[data-toggle="tab"]').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  });

  // Creamos todos los mapas y los guardamos dentro de `maps`
  var maps = {};

  // El nombre con el que guardamos la referencia a la instancia
  // del mapa es identico al `id` del `tab-pane`
  maps.tab11 = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(-27.336761, -55.865042),
    zoom: 15
  });
  maps.tab12 = new google.maps.Map(document.getElementById("map2"), {
    center: new google.maps.LatLng(-25.272622, -57.591226),
    zoom: 15
  });
  maps.tab13 = new google.maps.Map(document.getElementById("map3"), {
    center: new google.maps.LatLng(-22.528551, -55.726986),
    zoom: 15
  });

  // Nos suscribimos al cambio en los `tabs`
  $('.services-tab > ul a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // Obtenemos el id del tab-pane
    var mapName = $(e.target).attr('href').substr(1);

    if (maps[mapName]) {
      // Si existe el mapa, le avisamos que recalcule su tamaño
      google.maps.event.trigger(maps[mapName],'resize');
    }
  });
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="services-tab">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#tab11" aria-controls="mapa1" role="tab" data-toggle="tab">mapa1</a></li>
    <li role="presentation">
      <a href="#tab12" aria-controls="mapa2" role="tab" data-toggle="tab">mapa2</a></li>
    <li role="presentation">
      <a href="#tab13" aria-controls="mapa3" role="tab" data-toggle="tab">mapa3</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tab11">
      <div class="row">
        <div class="col-md-5">
          <div id="map" style="width:100%;height:500px" class="map-canvas autoload-map" data-mapstyle="style2"></div>
        </div>
        <div class="col-md-6">...</div>
      </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="tab12">
      <div class="row">
        <div class="col-md-5">
          <div id="map2" style="width:100%;height:500px" class="map-canvas autoload-map" data-mapstyle="style2"></div>
        </div>
        <div class="col-md-6">...</div>
      </div></div>
    <div role="tabpanel" class="tab-pane" 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>
        </div>
        <div class="col-md-6"></div>
      </div></div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrld71nSGZl1spbIOxaJVaQhj2EW5b1Gg"></script>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.