0

Olá, preciso colocar no meu site um carrossel de mapas (3 mapas), porém só posso usar um iframe no HTML e habilitar os botões e mapas no JavaScript. Eu tinha conseguido com vários iframes, mas agora com um só não consigo acessar o array com os src. Os botões também precisam ficar habilitados e desabilitados quando em uso. Alguém consegue ver onde está o problema? Obrigada!

HTML

<section>
      <div class="card">
        <h1>Cities</h1>

        <p class="text-basic-bold">
          Texto de introdução....
        </p>
        <div class="image-gallery">
          <iframe
            src=""
            id="ifr"
            class="mapsgoogle active"
            width="400"
            height="400"
            style="border: 0"
            
        ></iframe>  
        </div>
        <div>
          <button disabled class="btn prev">Previous</button>
          <button class="btn next">Next</button>
        </div>
      </div>
      <script src="/js/maps.js"></script>
    </section>

JS

const url1 = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d390647.9280928583!2d-46.86880288324416!3d-23.615623282771313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce448183a461d1%3A0x9ba94b08ff335bae!2sS%C3%A3o%20Paulo%2C%20SP%2C%20Brasil!5e0!3m2!1spt-BR!2sil!4v1663024275611!5m2!1spt-BR!2sil";
const url2 = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d108294.02839134622!2d34.72206017562007!3d31.98290820797056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502b43827ab66ff%3A0x17bcc54a571a7ab8!2sRishon%20LeZion!5e0!3m2!1spt-BR!2sil!4v1663024230349!5m2!1spt-BR!2sil";
const url3 = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126419.91594417629!2d-35.01772353104882!3d-8.037811846412206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7ab196f88c446e5%3A0x3c9ef52922447fd4!2sRecife%20-%20PE%2C%20Brasil!5e0!3m2!1spt-BR!2sil!4v1663024125396!5m2!1spt-BR!2sil";


const urls = [url1, url2, url3];
let currentlySelected = 0;
nodes = document.getElementById("ifr").setAttribute('src', urls[currentlySelected])

const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");


function previous() {
  nextBtn.disabled = false;
  nodes.classList.remove("active");
  currentlySelected--;
  nodes.classList.add("active");

  if (currentlySelected === 0) {
    prevBtn.disabled = true;
  }
}

function next() {
  prevBtn.disabled = false;
  nodes.classList.remove("active");
  currentlySelected++;
  nodes.classList.add("active");

  if (currentlySelected + 1 === nodes.length) {
    nextBtn.disabled = true;
  }
}

function init() {
  prevBtn.addEventListener("click", function() {
    previous();
  });

  nextBtn.addEventListener("click", function() {
    next();
  });
}

init();

1 Resposta 1

1

Então vc cometeu alguns erros que fez com que não chegasse no resultado desejado. O erro maior está nessa linha nodes = document.getElementById("ifr").setAttribute('src', urls[currentlySelected]), pq nas funções abaixo vc precisa desta variável como elemento Html para utilizar o src e as classes, nessa declaração faltou separar as responsabilidades.

Outra coisa que não precisa é de nodes.classList.remove("active"); não é necessário, pelo menos pelo que entendi da pergunta.

Outro problema é nessa linha if (currentlySelected + 1 === nodes.length) {..., pra desabilitar o botão de próximo a condição deve ser o valor armazenado na variável contadora currentlySelected igual o tamanho do array de urls menos um.

Segue o exemplo funcionando abaixo:

const url1 = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d390647.9280928583!2d-46.86880288324416!3d-23.615623282771313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce448183a461d1%3A0x9ba94b08ff335bae!2sS%C3%A3o%20Paulo%2C%20SP%2C%20Brasil!5e0!3m2!1spt-BR!2sil!4v1663024275611!5m2!1spt-BR!2sil";
const url2 = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d108294.02839134622!2d34.72206017562007!3d31.98290820797056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502b43827ab66ff%3A0x17bcc54a571a7ab8!2sRishon%20LeZion!5e0!3m2!1spt-BR!2sil!4v1663024230349!5m2!1spt-BR!2sil";
const url3 = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d126419.91594417629!2d-35.01772353104882!3d-8.037811846412206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7ab196f88c446e5%3A0x3c9ef52922447fd4!2sRecife%20-%20PE%2C%20Brasil!5e0!3m2!1spt-BR!2sil!4v1663024125396!5m2!1spt-BR!2sil";


const urls = [url1, url2, url3];
let currentlySelected = 0;
const nodes = document.getElementById('ifr');
nodes.setAttribute('src', urls[currentlySelected]);

const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');


function previous() {
  nextBtn.disabled = false;
  currentlySelected--;
  nodes.classList.add('active');
  nodes.setAttribute('src', urls[currentlySelected]);

  if (currentlySelected === 0) {
    prevBtn.disabled = true;
  }
}

function next() {
  prevBtn.disabled = false;
  currentlySelected++;
  nodes.classList.add('active');
  nodes.setAttribute('src', urls[currentlySelected]);

  if (currentlySelected === urls.length - 1) {
    nextBtn.disabled = true;
  }
}

function init() {
  prevBtn.addEventListener('click', function() {
    previous();
  });

  nextBtn.addEventListener('click', function() {
    next();
  });
}

init();
<section>
  <div class="card">
    <h1>Cities</h1>

    <p class="text-basic-bold">
      Texto de introdução....
    </p>
    <div class="image-gallery">
      <iframe src="" id="ifr" class="mapsgoogle active" width="400" height="400" style="border: 0"></iframe>
    </div>
    <div>
      <button disabled class="btn prev">Previous</button>
      <button class="btn next">Next</button>
    </div>
  </div>
</section>

1
  • 1
    Funcionou direitinho sim, vou estudar os pontos que você falou! Super obrigada :)
    – BAA
    Commented 25/09/2022 às 15:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .