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é 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
};

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.

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

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.

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

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

}

À 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').

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>

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) ->

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 });
}

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>

Il vous suffit d'ajouter des options de carte:

scrollwheel: false

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

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;
}

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'
            });
          }

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,