How to use the Google Maps API to disable mouse wheel zoom

Others 2020-01-11 13:26:50 views: null

I am using Google Maps API (v3) to draw some maps on the page. One thing I want to do is disable the zoom while scrolling the mouse wheel on the map, but I'm not sure how.

I have disabled scaleControl (ie deleted zoom UI elements), but this does not prevent wheel zoom.

This is part of my function (it is a simple 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
};

#1st Floor

In the third edition of the Maps API, you need to MapOptions property in the scrollwheeloption is set to false:

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

If you're using the Maps API version 2, you must use disableScrollWheelZoom () API calls, as follows:

map.disableScrollWheelZoom();

The scrollwheellower scale by default, version 3 API enabled in the map, but in the second edition, unless it is explicitly enable and disable the enableScrollWheelZoom()API calls.

#2nd Floor

In my case, the key is to set 'scrollwheel':falsein for init 'scrollwheel':false. Note: I am using jQuery UI Map. Here is my CoffeeScript the init function header:

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

#3rd floor

In case you want to do it dynamically; 

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

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

Sometimes you have to show on the map some "complicated" things (or map is a small part of the layout), located in the middle of the scroll zoom, but once you have a clean map, zooming this way would be good.

#4th floor

To simplify things! Original Google Maps variables, no extra stuff.

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

}

#5th Floor

Just in case, you are using GMaps.js library, which allows to perform geocoding and customize the behavior of pins, etc. easier, here is the use of technology to learn from previous answers to solve this problem.

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

#6th floor

I created a more developed jQuery plugin that allows you to use a nice button to lock or unlock the map.

This plug-in is disabled with Google Maps iframe transparent overlay div, and add a button to unlockit. You must press 650 milliseconds to unlock it.

You can change all the options for ease of use. Please visit https://github.com/diazemiliano/googlemaps-scrollprevent View

Here are some examples. 

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

#7th floor

Just because someone interested in solutions to solve this pure css. The following code covered by a transparent div on the map, and when you click to move to the back of the map in a transparent div. Overlay prevents scaling, click once, and behind the map, you can enable zoom.

See my blog post, Google Maps zoom switch and css explain how it works, and use the pen codepen.io/daveybrown/pen/yVryMr work presentation.

Disclaimer: This is mainly for learning, may not be the best solution for the production site.

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

Building # 8

For those who want to know how to disable people Javascript Google Map API's

If you click on the map once, it will enable the zoom scrolling. And when the mouse exits div disabled .

Here are some examples 

 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>

House # 9

Simple solution: 

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

#10th floor

Use that code, it will provide Google map of all colors and zoom control for you. ( ScaleControl: to false and scrollwheel: false will prevent the mouse wheel up or scaling down)

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

House # 11

I do this with a simple example

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

Or use the option gmap 

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

House # 12

You only need to add a map options: 

scrollwheel: false

House # 13

As of now (October 2017), Google has implemented a specific property to handle the zoom / scroll, called gestureHandling. The aim is to deal with the mobile device operating, but it will also modify the behavior of the desktop browser. This is the official document :

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

gestureHandling values ​​are available:

  • 'greedy': When the user slides (drag) on ​​the screen, the map always pan (up or down, left or right). In other words, single finger sliding and sliding with two fingers will cause the map to pan.
  • 'cooperative': The user must slide two fingers to scroll and pan the map with one finger. If the user slides the map with one finger, there will be an overlay on the map, and prompts the user to use two fingers to move the map. On the desktop application, users can simultaneously press a modifier key (ctrl or ⌘ key) scroll to zoom or pan the map.
  • 'none' : This option disables pan and kneading the map on the mobile device, and drag the map on the desktop.
  • 'auto'(Default value): depending on whether the page scroll, Google Maps JavaScript API will gestureHandling property to 'cooperative'or'greedy'

In short, you can easily set a mandatory "Always scalable" ( 'greedy'), "never Zoom" ( 'none'), or "the user must press CRTL / ⌘ to enable Zoom" ( 'cooperative').

House # 14

Daniel code to complete this work (thanks a bunch!). But I want to completely disable the zoom. I find that I have to use all four options to do this:

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

See: MapOptions object specification

p15097962069
Original articles published 0 · won praise 0 · Views 2218
私信 关注

Guess you like

Origin blog.csdn.net/p15097962069/article/details/103920962
Recommended
Rushing to the GitHub hot list——How can open source programming languages and frameworks be so cute?
Beijing Humanoid Robot Innovation Center launches Tiangong, the world's first full-size humanoid robot with purely electric drive for anthropomorphic running
Ranking
8个无需编写代码即可使用 Python 内置库的方法
Java collections interview knowledge Lite
Machine learning algorithms foundation - Introduction a (watermelon materials for the book)
(Easy) Ransom Note - LeetCode
[Five days] Qt from entry to actual combat: the second day
Remember once extremely pit father can not download Maven Jar package of issues: IDEA question
The minimum cost Shortest
OSPF study map (the most complete version)
Network Takeaways
GnuPG
Daily
More
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

Code World

© 2018 codetd.com