web-dev-qa-db-fra.com

Empêcher un iframe de Google Maps de capturer le comportement de la molette de la souris

Si vous naviguez avec un iframe de cartes intégrées à l'aide de votre trackpad ou de votre souris, vous pouvez éventuellement vous piéger dans les fonctionnalités de zoom de Maps, ce qui est vraiment gênant.

Essayez-le ici: https://developers.google.com/maps/documentation/embed/guide#overview

Est-ce qu'il y a un moyen d'éviter cela?

javascriptjquerygoogle-mapsiframejquery-plugins
41
rebelliard

Ceci a été répondu ici => Désactivez le zoom de la molette de la souris sur Google Maps intégré par Bogdan. Cela désactivera la souris jusqu'à ce que vous cliquiez sur la carte et que la souris recommence à fonctionner. Si vous déplacez la souris hors de la carte, la souris sera à nouveau désactivée.

Remarque : Ne fonctionne pas sur IE <11 (Fonctionne bien sur IE 11)

CSS:

<style>
    .scrolloff {
        pointer-events: none;
    }
</style>

Scénario:

<script>
    $(document).ready(function () {

        // you want to enable the pointer events only on click;

        $('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
        $('#canvas1').on('click', function () {
            $('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
        });

        // you want to disable pointer events when the mouse leave the canvas area;

        $("#map_canvas1").mouseleave(function () {
            $('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
        });
    });
</script>

HTML: (il suffit de mettre l'identifiant correct défini dans css et script)

<section id="canvas1" class="map">
     <iframe id="map_canvas1" src="https://www.google.com/maps/embe...." width="1170" height="400" frameborder="0" style="border: 0"></iframe>
</section>
54
Ronaldinho Learn Coding

Je ré-édite le code écrit par #nathanielperales, ça a vraiment fonctionné pour moi. Simple et facile à attraper mais ça ne marche qu'une fois. J'ai donc ajouté mouseleave () sur JavaScript. Idée adaptée de #Bogdan Et maintenant, elle est parfaite. Essaye ça. Les crédits vont à #nathanielperales et #Bogdan. Je viens de combiner les deux idées. Merci les gars. J'espère que cela aidera les autres aussi ...

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'>  </iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

Improviser - Adapter - Surmonter

Et voici un exemple jsFiddle.

25
cHaMs

oui, c'est possible avec scrollwheel: false.

var mapOptions = {
   center: new google.maps.LatLng(gps_x, gps_y),
   zoom: 16,//set this value to how much detail you want in the view
   disableDefaultUI: false,//set to true to disable all map controls,
   scrollwheel: false//set to true to enable mouse scrolling while inside the map area
 };

source

13
Tiago Duarte

J’ai créé un plugin jQuery très simple pour résoudre le problème. Ce plugin enveloppe automatiquement la carte avec un div transparent et un bouton de déverrouillage. Vous devrez donc les appuyer longuement pour activer la navigation. Vérifiez-le sur https://diazemiliano.github.io/googlemaps-scrollprevent/

Voici quelques exemples. 

(function() {
  $(function() {
    $("#btn-start").click(function() {
      $("iframe[src*='google.com/maps']").scrollprevent({
        printLog: true
      }).start();
      return $("#btn-stop").click(function() {
        return $("iframe[src*='google.com/maps']").scrollprevent().stop();
      });
    });
    return $("#btn-start").trigger("click");
  });
}).call(this);
Edit in JSFiddle Result JavaScript HTML CSS .embed-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>
1
Emiliano Díaz

Est-il possible de désactiver le zoom de la molette de la souris sur Google Maps intégré?

Voici une bonne réponse. Dans mon cas, il doit être corrigé avec jQuery pour fonctionner parfaitement. Mon code est:

HTML

<div class="overlay"></div>
<iframe src="#MAP_LINK#" width="1220" height="700" frameborder="0" style="border:0; margin-top: 20px;" ></iframe>

CSS

.overlay {
background:transparent; 
position:relative; 
width:1220px;
height:720px; /* your iframe height */
top:720px;  /* your iframe height */
margin-top:-720px;  /* your iframe height */
}

JQUERY

$('.overlay').click(function(){
$(this).removeClass('overlay');
});
1
Lesenus