Come disabilitare il ridimensionamento della rotellina del mouse con l'API di Google Maps

Sto usando l'API di Google Maps (v3) per disegnare alcune mappe su una pagina. Una cosa che vorrei fare è disabilitare lo zoom quando si fa scorrere la rotellina del mouse sulla mappa, ma non sono sicuro di come.

Ho disabilitato scaleControl (ovvero rimosso l'elemento dell'interfaccia utente di ridimensionamento), ma ciò non impedisce il ridimensionamento della rotella di scorrimento.

Ecco parte della mia funzione (è un semplice 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
};

Nella versione 3 dell'API di Maps puoi semplicemente impostare l' scrollwheelopzione su false all'interno delle proprietà di MapOptions :

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

Se avessi utilizzato la versione 2 dell'API di Maps avresti dovuto utilizzare la chiamata dell'API disableScrollWheelZoom () come segue:

map.disableScrollWheelZoom();

Lo scrollwheelzoom è abilitato per impostazione predefinita nella versione 3 dell'API di Maps, ma nella versione 2 è disabilitato a meno che non sia esplicitamente abilitato con la enableScrollWheelZoom()chiamata API.

Il codice di Daniel fa il lavoro (grazie un mucchio!). Ma volevo disabilitare completamente lo zoom. Ho scoperto che dovevo usare tutte e quattro queste opzioni:

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

Vedi: Specifiche dell'oggetto MapOptions

Nel caso in cui tu voglia farlo in modo dinamico;

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

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

A volte devi mostrare qualcosa di "complesso" sulla mappa (o la mappa è una piccola parte del layout), e questo zoom di scorrimento arriva nel mezzo, ma una volta che hai una mappa pulita, questo modo di ingrandire è bello.

Keep it simple! Variabile originale di Google Maps, nessuna delle cose extra.

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

}

A partire da ora (ottobre 2017) Google ha implementato una proprietà specifica per gestire lo zoom / scorrimento, chiamata gestureHandling. Il suo scopo è gestire il funzionamento dei dispositivi mobili, ma modifica il comportamento anche per i browser desktop. Eccolo dalla documentazione ufficiale :

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

I valori disponibili per gestureHandling sono:

• 'greedy': La mappa esegue sempre una panoramica (su o giù, a sinistra o a destra) quando l'utente scorre (trascina) lo schermo. In altre parole, sia uno scorrimento con un dito che uno con due dita fanno scorrere la mappa.
• 'cooperative': L'utente deve scorrere con un dito per scorrere la pagina e due dita per scorrere la mappa. Se l'utente scorre la mappa con un dito, viene visualizzato un overlay sulla mappa, con un messaggio che richiede all'utente di utilizzare due dita per spostare la mappa. Sulle applicazioni desktop, gli utenti possono ingrandire o spostare la mappa scorrendo mentre si preme un tasto modificatore (il tasto ctrl o ⌘).
• 'none': Questa opzione disabilita la panoramica e il pizzicamento sulla mappa per dispositivi mobili e il trascinamento della mappa su dispositivi desktop.
• 'auto'(impostazione predefinita): a seconda che la pagina sia scorrevole, l'API JavaScript di Google Maps imposta la proprietà gestureHandling su 'cooperative'o'greedy'

In breve, puoi facilmente forzare l'impostazione su "sempre zoomabile" ( 'greedy'), "mai zoomabile" ( 'none') o "l'utente deve premere CRTL / ⌘ per abilitare lo zoom" ( 'cooperative').

Ho creato un plug-in jQuery più sviluppato che ti consente di bloccare o sbloccare la mappa con un bel pulsante.

Questo plugin disabilita l'iframe di Google Maps con un div overlay trasparente e aggiunge un pulsante per lo sblocco. È necessario premere per 650 millisecondi per sbloccarlo.

Puoi modificare tutte le opzioni per tua comodità. Controllalo su https://github.com/diazemiliano/googlemaps-scrollprevent

Ecco qualche esempio.

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

Nel mio caso la cosa cruciale è stata quella di iniziare 'scrollwheel':falsein init. Avviso: sto usando jQuery UI Map. Di seguito è riportato il titolo della funzione init CoffeeScript :

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

Nel caso, stai usando la libreria GMaps.js , che rende un po 'più semplice fare cose come Geocoding e pin personalizzati, ecco come risolvere questo problema usando le tecniche apprese dalle risposte precedenti.

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

Per qualcuno che si chiede come disabilitare l' API di Google Map di Javascript

Esso consentirà il rotolo lo zoom se si fa clic sulla mappa una volta. E disabilita dopo che il mouse esce dal div.

Ecco qualche esempio

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>

Devi solo aggiungere nelle opzioni della mappa:

scrollwheel: false

Una soluzione semplice:

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

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

Se qualcuno è interessato a una soluzione CSS pura per questo. Il codice seguente si sovrappone a un div trasparente sulla mappa e sposta il div trasparente dietro la mappa quando viene cliccato. La sovrapposizione impedisce lo zoom, una volta cliccato e dietro la mappa, lo zoom è abilitato.

Vedi il mio post sul blog Google maps attiva / disattiva zoom con css per una spiegazione su come funziona e penna codepen.io/daveybrown/pen/yVryMr per una demo funzionante.

Disclaimer: questo è principalmente per l'apprendimento e probabilmente non sarà la soluzione migliore per i siti Web di produzione.

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

Usa quel pezzo di codice, che ti darà tutto il controllo del colore e dello zoom di google map. ( scaleControl: false e scrollwheel: false impedirà alla rotellina del mouse di ingrandire o ridurre)

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

Lo faccio con questi semplici esempi

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

Oppure usa le opzioni gmap

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