Comment désactiver la mise à l'échelle de la molette de la souris avec l'API Google Maps


560

J'utilise l'API Google Maps (v3) pour dessiner quelques cartes sur une page. Une chose que je voudrais faire est de désactiver le zoom lorsque vous faites défiler la molette de la souris sur la carte, mais je ne sais pas comment.

J'ai désactivé le scaleControl (c'est-à-dire supprimé l'élément d'interface de mise à l'échelle), mais cela n'empêche pas la mise à l'échelle de la molette de défilement.

Voici une partie de ma fonction (c'est un simple plugin jQuery):

$.fn.showMap = function(options, addr){
  options = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, options);
  var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);

  // Code cut from this example as not relevant
};

1
Salut, j'ai créé un plugin plus développé qui vous permet de verrouiller ou déverrouiller la carte avec un joli bouton. Est également le plugin jQuery. Vous pouvez le vérifier sur github.com/diazemiliano/googlemaps-scrollprevent J'espère qu'il vous plaira.
Emiliano Díaz

Réponses:


986

Dans la version 3 de l'API Maps, vous pouvez simplement définir l' scrollwheeloption sur false dans les propriétés MapOptions :

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

Si vous utilisiez la version 2 de l'API Maps, vous auriez dû utiliser l' appel d'API disableScrollWheelZoom () comme suit:

map.disableScrollWheelZoom();

Le scrollwheelzoom est activé par défaut dans la version 3 de l'API Maps, mais dans la version 2, il est désactivé sauf s'il est explicitement activé avec l' enableScrollWheelZoom()appel de l' API.


40
+1 pour info: disableDefaultUI: truepeut remplacernavigationControl: false, mapTypeControl: false, scaleControl: false
Jordan Arseno

1
Un piège pour moi était que si vous n'avez pas le mapTypeId, les autres paramètres sont ignorés.
Michael Hunter

Cela fonctionne pour moi, mais cela a l'étrange effet secondaire de désactiver la molette de défilement à l'intérieur d'un modal sur la page. Il n'y a pas de carte dans le contenu modal et le curseur n'est pas sur la carte.
regularmike

Malheureusement, cela ne fonctionne pas comme prévu avec StreetViewPanorama Map, car mettre la molette de défilement: false, désactive le zoom de défilement, mais désactive également le défilement de la page car il attrape toujours le défilement d'une manière ou d'une autre.
Solomon Closson

Daniel, pouvez-vous m'aider à répondre à cette question stackoverflow.com/questions/60544486/…
Xavier Issac

103

Le code de Daniel fait le travail (merci un tas!). Mais je voulais désactiver complètement le zoom. J'ai découvert que je devais utiliser ces quatre options pour ce faire:

{
  zoom: 14,                        // Set the zoom level manually
  zoomControl: false,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  ...
}

Voir: Spécification d'objet MapOptions


2
Est-ce que cela fonctionne toujours pour vous? Je n'ai pas pu obtenir la version actuelle de la v3 (je crois que son 3.9) pour ignorer la molette de défilement, et j'ai dû recourir à une boucle sur tous les enfants de l'objet de carte et arrêter la propagation dans la carte.
c.apolzon

Ouaip, travaille pour moi, merci! De plus, si vous souhaitez supprimer tous les widgets de contrôle de carte par défaut, désactivez simplement DefefUU: true au lieu de désactiver les contrôles de zoom, de rotation et de panoramique individuellement.
thomax

33
Attention à la capitalisation; scrollwheeldoit être tout en minuscules (vient de me rattraper en augmentant le W)
kez


30

Juste au cas où vous voudriez le faire dynamiquement;

function enableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: true });
}

function disableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: false });
}

Parfois, vous devez montrer quelque chose de "complexe" sur la carte (ou la carte est une petite partie de la mise en page), et ce zoom de défilement se situe au milieu, mais une fois que vous avez une carte propre, cette façon de zoomer est agréable.


3
Vous pouvez ajouter ce code lors de l'initialisation: map.addListener ('click', function () {if (map) map.setOptions ({scrollwheel: true});}); map.addListener ('mouseout', function () {if (map) map.setOptions ({scrollwheel: false});});
Spaceman

Cela fonctionne pour moi car je voulais interroger la fonction de molette de défilement de la carte en dehors du code google maps. c'est à dire de l'intérieur de mon propre code jquery.
lharby

26

Rester simple! Variable Google Maps d'origine, aucune des choses supplémentaires.

 var mapOptions = {
     zoom: 16,
     center: myLatlng,
     scrollwheel: false

}

10

À partir de maintenant (octobre 2017), Google a mis en œuvre une propriété spécifique pour gérer le zoom / défilement, appelée gestureHandling. Son objectif est de gérer le fonctionnement des appareils mobiles, mais il modifie également le comportement des navigateurs de bureau. Le voici à partir de la documentation officielle :

function initMap() {
  var locationRio = {lat: -22.915, lng: -43.197};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: locationRio,
    gestureHandling: 'none'
});

Les valeurs disponibles pour gestureHandling sont les suivantes:

  • 'greedy': La carte se déplace toujours (vers le haut ou vers le bas, vers la gauche ou vers la droite) lorsque l'utilisateur glisse (fait glisser) l'écran. En d'autres termes, un balayage à un doigt et un balayage à deux doigts provoquent un panoramique de la carte.
  • 'cooperative': L'utilisateur doit glisser avec un doigt pour faire défiler la page et deux doigts pour faire un panoramique sur la carte. Si l'utilisateur glisse la carte avec un doigt, une superposition apparaît sur la carte, avec une invite indiquant à l'utilisateur d'utiliser deux doigts pour déplacer la carte. Sur les applications de bureau, les utilisateurs peuvent zoomer ou effectuer un panoramique sur la carte en faisant défiler tout en appuyant sur une touche de modification (la touche ctrl ou ⌘).
  • 'none': Cette option désactive le panoramique et le pincement sur la carte pour les appareils mobiles et le glissement de la carte sur les appareils de bureau.
  • 'auto'(par défaut): selon que la page peut défiler ou non, l'API JavaScript de Google Maps définit la propriété gestureHandling sur 'cooperative'ou'greedy'

En bref, vous pouvez facilement forcer le réglage à "toujours zoomable" ( 'greedy'), "jamais zoomable" ( 'none') ou "l'utilisateur doit appuyer sur CRTL / ⌘ pour activer le zoom" ( 'cooperative').


7

J'ai créé un plugin jQuery plus développé qui vous permet de verrouiller ou déverrouiller la carte avec un joli bouton.

Ce plugin désactive l'iframe Google Maps avec une div superposition transparente et ajoute un bouton pour le déverrouiller. Vous devez appuyer pendant 650 millisecondes pour le déverrouiller.

Vous pouvez modifier toutes les options pour votre commodité. Vérifiez-le sur https://github.com/diazemiliano/googlemaps-scrollprevent

Voici un exemple.

(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);
.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>


joli plugin, mais comment l'utiliser lorsque vous créez la carte google avec l'API JS au lieu d'utiliser un iframe?
ikkez

2
" Edit in JSFiddle Result JavaScript HTML CSS" Fait-il vraiment partie du code?
Peter Mortensen

6

Dans mon cas, l'essentiel était de s'installer 'scrollwheel':falseen init. Remarque: j'utilise jQuery UI Map. Ci-dessous est mon en- tête de fonction d'initialisation CoffeeScript :

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->

6

Au cas où, vous utilisez la bibliothèque GMaps.js , ce qui simplifie un peu les choses comme le géocodage et les broches personnalisées, voici comment résoudre ce problème en utilisant les techniques apprises dans les réponses précédentes.

var Gmap = new GMaps({
  div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
  lat: 51.044308,
  lng: -114.0630914,
  zoom: 15
});

// To access the Native Google Maps object use the .map property
if(Gmap.map) {
  // Disabling mouse wheel scroll zooming
  Gmap.map.setOptions({ scrollwheel: false });
}

4

Pour quelqu'un qui se demande comment désactiver l' API Javascript Google Map

Il permettra le défilement du zoom si vous cliquez sur la carte une fois. Et désactivez après que votre souris quitte la div.

Voici un exemple

var map;
var element = document.getElementById('map-canvas');
function initMaps() {
  map = new google.maps.Map(element , {
    zoom: 17,
    scrollwheel: false,
    center: {
      lat: parseFloat(-33.915916),
      lng: parseFloat(151.147159)
    },
  });
}


//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
  map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
  map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part
.big-placeholder {
  background-color: #1da261;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
      <div class="big-placeholder">
      </div>
      
      
      <!-- START IMPORTANT part -->
      <div class="map-container">
        <div id="map-canvas" style="min-height: 400px;"></div>  
      </div>
      <!-- END IMPORTANT part-->
      
      
      
      <div class="big-placeholder">
      </div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
      </script>
  </body>
</html>



3

Une solution simple:

// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
$('.gmap-wrapper').on('click', function () {
  $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$(".gmap-wrapper").mouseleave(function () {
  $('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
.scrolloff{ pointer-events: none; }
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gmap-wrapper">
<iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</html>

Source: https://github.com/Corsidia/scrolloff


2

Au cas où tout le monde serait intéressé par une solution CSS pure pour cela. Le code suivant superpose un div transparent sur la carte et déplace le div transparent derrière la carte lorsque vous cliquez dessus. La superposition empêche le zoom, une fois cliqué, et derrière la carte, le zoom est activé.

Voir mon article de blog Google maps bascule le zoom avec css pour une explication de son fonctionnement, et stylo codepen.io/daveybrown/pen/yVryMr pour une démonstration de travail.

Avertissement: c'est principalement pour l'apprentissage et ne sera probablement pas la meilleure solution pour les sites de production.

HTML:

<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />
    <label class="map-overlay" for="map-input" class="label" onclick=""></label>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>

CSS:

.map-wrap {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin-bottom: 10px;
}

#map-input {
    opacity: 0;
}

.map-overlay {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    z-index: 2;    
}

#map-input[type=checkbox]:checked ~ iframe {
    z-index: 3;
}

#map-input[type=checkbox]:checked ~ .map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    border: none;
}

0

Utilisez ce morceau de code, qui vous donnera toute la couleur et le contrôle du zoom de google map. ( scaleControl: false et molette de défilement: false empêchera la molette de zoomer vers le haut ou vers le bas)

function initMap() {
            // Styles a map in night mode.
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 23.684994, lng: 90.356331},
                zoom: 8,
                scaleControl: false,
                scrollwheel: false,
              styles: [
                {elementType: 'geometry', stylers: [{color: 'F1F2EC'}]},
                {elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]},
                {elementType: 'labels.text.fill', stylers: [{color: '877F74'}]},
                {
                  featureType: 'administrative.locality',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'geometry',
                  stylers: [{color: '#263c3f'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry.stroke',
                  stylers: [{color: '#212a37'}]
                },
                {
                  featureType: 'road',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry',
                  stylers: [{color: '#746855'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry.stroke',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'labels.text.fill',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'transit',
                  elementType: 'geometry',
                  stylers: [{color: '#2f3948'}]
                },
                {
                  featureType: 'transit.station',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b3'}]
                },
                {
                  featureType: 'water',
                  elementType: 'geometry',
                  stylers: [{color: '#0676b6'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#515c6d'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.stroke',
                  stylers: [{color: '#17263c'}]
                }
              ]
            });
    
             var marker = new google.maps.Marker({
              position: {lat: 23.684994, lng: 90.356331},
              map: map,
              title: 'BANGLADESH'
            });
          }


Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant la manière et / ou la raison pour laquelle il résout le problème améliorerait la valeur à long terme de la réponse. Veuillez lire cette procédure pour fournir une réponse de qualité.
thewaywewere

0

Je le fais avec ces simples exemples

jQuery

$('.map').click(function(){
    $(this).find('iframe').addClass('clicked')
    }).mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

CSS

.map {
    width: 100%; 
}
.map iframe {
    width: 100%;
    display: block;
    pointer-events: none;
    position: relative; /* IE needs a position other than static */
}
.map iframe.clicked {
    pointer-events: auto;
}

Ou utilisez les options gmap

function init() { 
    var mapOptions = {  
        scrollwheel: false, 
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.