So deaktivieren Sie die Mausradskalierung mit der Google Maps-API

Ich verwende die Google Maps-API (Version 3), um einige Karten auf einer Seite zu zeichnen. Eine Sache, die ich gerne tun würde, ist das Deaktivieren des Zooms, wenn Sie mit dem Mausrad über die Karte scrollen, aber ich bin mir nicht sicher, wie.

Ich habe scaleControl deaktiviert (dh das Skalierungs-UI-Element entfernt), dies verhindert jedoch nicht die Skalierung des Scrollrads.

Hier ist ein Teil meiner Funktion (es ist ein einfaches jQuery-Plugin):

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

In Version 3 der Maps-API können Sie die scrollwheelOption in den MapOptions- Eigenschaften einfach auf false setzen :

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

Wenn Sie Version 2 der Maps-API verwendet hätten, müssten Sie den API-Aufruf disableScrollWheelZoom () wie folgt verwenden:

map.disableScrollWheelZoom();

Das scrollwheelZoomen ist in Version 3 der Maps-API standardmäßig aktiviert, in Version 2 jedoch deaktiviert, sofern es nicht ausdrücklich mit dem enableScrollWheelZoom()API-Aufruf aktiviert wurde .

Daniels Code macht den Job (danke ein Haufen!). Aber ich wollte das Zoomen komplett deaktivieren. Ich stellte fest, dass ich alle vier Optionen verwenden musste, um dies zu tun:

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

Siehe: MapOptions-Objektspezifikation

Nur für den Fall, dass Sie dies dynamisch tun möchten;

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

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

Manchmal muss man etwas "Komplexes" über der Karte anzeigen (oder die Karte ist ein kleiner Teil des Layouts), und dieses Scroll-Zoomen wird in die Mitte verschoben, aber sobald Sie eine saubere Karte haben, ist diese Art des Zooms hilfreich.

Halte es einfach! Ursprüngliche Google Maps-Variable, keines der zusätzlichen Dinge.

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

}

Ab sofort (Oktober 2017) hat Google eine spezielle Eigenschaft für das Zoomen / Scrollen implementiert gestureHandling. Der Zweck besteht darin, den Betrieb mobiler Geräte zu handhaben, das Verhalten wird jedoch auch für Desktop-Browser geändert. Hier ist es aus der offiziellen Dokumentation :

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

Die verfügbaren Werte für gestureHandling sind:

• 'greedy': Die Karte schwenkt immer (nach oben oder unten, links oder rechts), wenn der Benutzer über den Bildschirm wischt (zieht). Mit anderen Worten, sowohl ein Ein-Finger-Wisch als auch ein Zwei-Finger-Wisch bewirken, dass die Karte schwenkt.
• 'cooperative': Der Benutzer muss mit einem Finger über die Seite wischen und mit zwei Fingern über die Karte schwenken. Wenn der Benutzer die Karte mit einem Finger wischt, wird auf der Karte eine Überlagerung angezeigt, in der er aufgefordert wird, die Karte mit zwei Fingern zu verschieben. In Desktop-Anwendungen können Benutzer die Karte durch Scrollen zoomen oder schwenken, während sie eine Modifizierertaste (Strg- oder ⌘-Taste) drücken.
• 'none': Diese Option deaktiviert das Schwenken und Kneifen auf der Karte für mobile Geräte und das Ziehen der Karte auf Desktop-Geräten.
• 'auto'(Standard): Abhängig davon, ob die Seite scrollbar ist, setzt die Google Maps JavaScript-API die Eigenschaft gestureHandling auf entweder 'cooperative'oder'greedy'

Kurz gesagt, Sie können die Einstellung leicht auf "immer zoombar" ( 'greedy'), "nie zoombar" ( 'none') oder "Benutzer muss CRTL / ⌘ drücken, um den Zoom zu aktivieren" ( 'cooperative') erzwingen .

Ich habe ein weiterentwickeltes jQuery-Plugin erstellt, mit dem Sie die Karte mit einer schönen Schaltfläche sperren oder entsperren können.

Dieses Plugin deaktiviert den Google Maps-Iframe mit einem transparenten Overlay-Div und fügt eine Schaltfläche zum Entsperren hinzu. Sie müssen 650 Millisekunden lang drücken, um es zu entsperren.

Sie können alle Optionen für Ihre Bequemlichkeit ändern. Überprüfen Sie es unter https://github.com/diazemiliano/googlemaps-scrollprevent

Hier ist ein Beispiel.

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

In meinem Fall war es entscheidend, 'scrollwheel':falsein init zu setzen. Hinweis: Ich benutze jQuery UI Map. Unten ist meine Überschrift der CoffeeScript- Init-Funktion:

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

Nur für den Fall, dass Sie die Bibliothek GMaps.js verwenden, wodurch es etwas einfacher ist, Dinge wie Geokodierung und benutzerdefinierte Pins auszuführen. So lösen Sie dieses Problem mithilfe der Techniken, die Sie aus den vorherigen Antworten gelernt haben.

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

Für jemanden, der sich fragt, wie man die Javascript Google Map API deaktiviert

Wenn Sie einmal auf die Karte klicken, wird der Zoom-Bildlauf aktiviert . Und deaktivieren Sie, nachdem Sie mit der Maus das div verlassen haben.

Hier ist ein Beispiel

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>

Sie müssen nur die Kartenoptionen hinzufügen:

scrollwheel: false

Eine einfache Lösung:

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

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

Nur für den Fall, dass jemand an einer reinen CSS-Lösung interessiert ist. Der folgende Code überlagert ein transparentes Div über der Karte und verschiebt das transparente Div hinter die Karte, wenn darauf geklickt wird. Die Überlagerung verhindert das Zoomen, sobald Sie darauf klicken, und hinter der Karte ist das Zoomen aktiviert.

In meinem Blogbeitrag Google Maps zum Umschalten des Zooms mit CSS finden Sie eine Erklärung der Funktionsweise sowie den Stift codepen.io/daveybrown/pen/yVryMr Eine funktionierende Demo finden .

Haftungsausschluss: Dies dient hauptsächlich dem Lernen und ist wahrscheinlich nicht die beste Lösung für Produktionswebsites.

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

Verwenden Sie diesen Code, mit dem Sie die gesamte Farb- und Zoomsteuerung von Google Map erhalten. ( scaleControl: false und scrollwheel: false verhindern, dass das Mausrad nach oben oder unten zoomt.)

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

Ich mache es mit diesen einfachen Beispielen

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

Oder verwenden Sie die gmap-Optionen

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