web-dev-qa-db-fra.com

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

J'utilise Google Maps API (v3) pour dessiner quelques cartes sur une page. Une chose que j'aimerais 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 contrôle de la balance (c'est-à-dire que j'ai retiré l'élément d'interface utilisateur de la 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
};
jquerygoogle-mapsgoogle-maps-api-3jquery-plugins
552
aaronrussell

Dans la version 3 de l'API Maps, vous pouvez simplement définir l'option scrollwheel 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 Google Maps, vous auriez dû utiliser l'appel disableScrollWheelZoom () comme suit:

map.disableScrollWheelZoom();

Le zoom scrollwheel 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'appel de l'API enableScrollWheelZoom().

979
Daniel Vassallo

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 les quatre options suivantes:

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

Voir: spécification d'objet MapOptions

103
Simon East

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 afficher quelque chose de "complexe" sur la carte (ou la carte est une petite partie de la mise en page), et ce zoom par défilement se place au milieu, mais une fois que vous avez une carte nette, cette méthode de zoom est Nice.

30
Felipe Pereira

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

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

}
26
Creatif_IV

À compter de maintenant (octobre 2017), Google a implémenté 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. La voici 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 effectue toujours un panoramique (haut ou bas, gauche ou droite) lorsque l'utilisateur fait glisser l'écran à l'écran. En d'autres termes, un glissement d'un doigt et un glissement de deux doigts entraînent un panoramique de la carte.
  • 'cooperative': L'utilisateur doit faire glisser un doigt pour faire défiler la page et deux doigts pour faire un panoramique sur la carte. Si l'utilisateur balaye la carte avec un doigt, une incrustation apparaît sur la carte, avec une invite invitant l'utilisateur à 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 l'écran 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, ainsi que le déplacement de la carte sur les périphériques de bureau.
  • 'auto' (valeur par défaut): selon que la page est déroulable 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 sur "toujours zoomable" ('greedy'), "jamais zoomable" ('none') ou "l'utilisateur doit appuyer sur CRTL/⌘ pour activer le zoom" ('cooperative').

8
Kar.ma

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

Ce plugin désactive l'iframe de Google Maps avec un div transparent et ajoute un bouton pour unlockit. Vous devez appuyer sur 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 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);
.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>
7
Emiliano Díaz

Au cas où vous utiliseriez la bibliothèque GMaps.js , ce qui simplifie un peu la tâche de géocodage et de goupilles personnalisées, voici comment 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
racl101

Dans mon cas, l’essentiel était d’installer _'scrollwheel':false_ in init. Avis: J'utilise jQuery UI Map . Vous trouverez ci-dessous le titre CoffeeScript init function:

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

Il vous suffit d'ajouter des options de carte:

scrollwheel: false
4
Kiran Kanzar

Pour ceux qui se demandent comment désactiver = Javascript Google Map API

Ce sera activer le parchemin de zoom si vous cliquez une fois sur la carte. Et désactiver après que votre souris a quitté le div.

Voici quelques exemples

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
AlbertSamuel

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

3
Darme

Juste au cas où quiconque est intéressé par une solution de CSS pur pour cela. Le code suivant recouvre 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 du fonctionnement, et un stylo codepen.io/daveybrown/pen/yVryMr pour une démonstration.

Avertissement: ceci est principalement destiné à 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
Davey

Je le fais avec ce simple exemple

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 de gmap

function init() { 
    var mapOptions = {  
        scrollwheel: false,
0
dimitar

Utilisez ce morceau de code, qui vous donnera toute la couleur et le contrôle de zoom de Google Map. (scaleControl: false et molette de défilement: false empêchera la molette de la souris de zoomer vers le haut ou 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'
            });
          }
0
Chamon Roy