logo

Street View No Zoom Scroll

HTML:

<section>
  <div class="mapContainer">
    <iframe scrolling="no" src="https://www.google.com/maps/embed?pb=!4v1615977483100!6m8!1m7!1sPLRSXqOqx8IAAAQvxQy-3w!2m2!1d46.66770001268814!2d-0.2529888975152517!3f0!4f0!5f0.7820865974627469"  style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    <div class="btnIframe">Démarrer</div>
  </div>
</section>

 

CSS:

.mapContainer, .mapContainer iframe{
  width: 100%;
  height: 80vh;
}

.mapContainer{
  background-color: rgba(0, 0, 0, 0.8);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mapContainer iframe{
  display: block;
  pointer-events: none;
  position: relative;
  z-index: -1;
  position: relative;
}

.mapContainer iframe.clicked{
  pointer-events: auto;
}

.btnIframe{
  font-size: xx-large;
  font-weight: 700;
  color: white;
  position: absolute;
  cursor: pointer;
}

JavaScript (jQuery):

$(function(){

    $(".mapContainer").click(function(){
        $("iframe").css("z-index", "1");
    })

    $(".mapContainer").click(function(){
        $(this).find("iframe").addClass("clicked");
        setTimeout(function(){
            $("iframe").removeClass("clicked");
        }, 5000);
    });
});