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


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é la commande scaleControl (c'est-à-dire supprimé l'élément d'interface utilisateur 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
};

538
2018-02-24 22:39


origine


Réponses:


Dans la version 3 de l'API Maps, vous pouvez simplement définir scrollwheel option à false dans le MapOptions Propriétés:

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 Google Maps, vous auriez dû utiliser disableScrollWheelZoom () Appel API comme suit:

map.disableScrollWheelZoom();

le scrollwheel Le zoom est activé par défaut dans la version 3 de l'API Google Maps, mais dans la version 2, il est désactivé, sauf s'il est explicitement activé enableScrollWheelZoom() Appel d'API.


963
2018-02-24 22:50



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

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

Voir: Spécification d'objet MapOptions


100
2018-06-27 23:18



Juste au cas où vous voulez 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 trouve au milieu, mais une fois que vous avez une carte propre, cette façon de zoomer est agréable.


29
2017-09-18 18:52



Rester simple! Variable Google Maps originale, aucune des choses supplémentaires.

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

}

26
2017-10-21 14:17



Dans mon cas, l'essentiel était de mettre en 'scrollwheel':false dans init. Avis: J'utilise jQuery UI Map. Ci-dessous est mon CoffeeScript En-tête de la fonction init:

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

6
2017-07-14 14:52



Au cas où, vous utilisez le GMaps.js bibliothèque, ce qui rend un peu plus simple de faire des choses comme le géocodage et les broches personnalisées, voici comment vous pouvez résoudre ce problème en utilisant les techniques apprises à partir des 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 });
}

6
2017-10-20 17:48



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 un div overlay transparent et ajoute un bouton pour unlockit. Vous devez appuyer sur 650 millisecondes pour le déverrouiller.

Vous pouvez changer toutes les options pour votre commodité. Vérifiez-le à 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>


6
2017-08-01 22:42



À ce jour (octobre 2017), Google a implémenté une propriété spécifique pour gérer le zoom / défilement, appelé gestureHandling. Son but est de gérer le fonctionnement des appareils mobiles, mais il modifie également le comportement des navigateurs de bureau. Ici c'est de 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:

  • 'greedy': La carte pivote toujours (vers le haut ou le bas, vers la gauche ou la droite) lorsque l'utilisateur fait glisser (glisse) l'écran. En d'autres termes, un balayage à un doigt et un balayage à deux doigts provoquent le déplacement de la carte.
  • 'cooperative': L'utilisateur doit faire glisser avec un doigt pour faire défiler la page et deux doigts pour parcourir la carte. Si l'utilisateur fait glisser 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 effectuer un zoom ou 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 périphériques mobiles et le déplacement de la carte sur les périphériques de bureau.
  • 'auto' (par défaut): Selon que l'on peut faire défiler la page, l'API JavaScript Google Maps définit la propriété gestureHandling sur 'cooperative' ou 'greedy'

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


5
2017-10-10 15:24



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

Ce sera activer le zoom défile si vous cliquez une fois sur la carte. Et désactiver après votre souris, quittez 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>


4
2018-05-10 05:40



Vous avez juste besoin d'ajouter des options de carte:

scrollwheel: false

4
2018-06-29 13:54



Juste au cas où quelqu'un serait intéressé par une solution css pure pour cela. Le code suivant recouvre une div transparente sur la carte et déplace la div transparente 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 blog Google maps bascule zoom avec css pour une explication comment cela fonctionne, et un stylo codepen.io/daveybrown/pen/yVryMr pour une démo de travail.

Disclaimer: ceci 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;
}

2
2018-02-01 21:27