1

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>

1 respuesta 1

3

El nivel de zoom por defecto lo mides tú al momento de crear el link embed de Google Maps, simplemente abre el link de cada mapa en una nueva pestaña

Por ejemplo https://www.google.com/maps/d/embed?mid=1fbzWJWtL6-IkClEr1V0xYSX9XsBFZlea&ll=11.011131572784665%2C-74.79141690882727&z=13

Calcula manualmente a tu gusto cada mapa, tanto altura como ejes X y/o Y. Por último, copia esa URI o link generado y pégalo en tu código.

Por ejemplo, apliqué el siguiente nivel de zoom (distancia en altura) a los mapas en tu código.

  • Barranquilla: 1 Km
  • Bello: 20m
  • Bogotá: 5 Km

niveles de zoom

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/embed?mid=1fbzWJWtL6-IkClEr1V0xYSX9XsBFZlea&ll=11.011131572784665%2C-74.79141690882727&z=13" width="100%;" height="480px"></iframe>
          </div>

          <div id="Bello" class="tabcontent">
            <iframe src="https://www.google.com/maps/d/embed?mid=1t9pL3ckgEgTqobd6UhHQbv25VRMtffB-&ll=6.337069189659377%2C-75.54798684258907&z=19" 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&ll=4.730185612688954%2C-74.06018864672956&z=11" 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>

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.