Désactiver le zoom de la molette de la souris sur Google Maps intégré

J’avais le même problème: lors du défilement de la page, le pointeur se trouve sur la carte, il commence à zoomer / dézoomer sur la carte au lieu de continuer à faire défiler la page. 🙁

J’ai donc résolu ce problème en plaçant un div avec un .overlay exactement avant chaque insertion de gmap iframe , voir:

Dans mon CSS, j’ai créé la classe:

 .overlay { background:transparent; position:relative; width:640px; height:480px; /* your iframe height */ top:480px; /* your iframe height */ margin-top:-480px; /* your iframe height */ } 

Le div couvrira la carte, empêchant les événements de pointeur d’y accéder. Mais si vous cliquez sur le div, il devient transparent pour les événements de pointeur, activant à nouveau la carte!

J’espère que ça va t’aider 🙂

J’ai essayé la première réponse dans cette discussion et cela n’a pas fonctionné pour moi, peu importe ce que j’ai fait, j’ai donc trouvé ma propre solution:

Enveloppez l’iframe avec une classe (.maps dans cet exemple) et, idéalement, intégrez le code suivant: http://embedresponsively.com/ – Modifiez le CSS de l’iframe en pointer-events: none puis en utilisant la fonction click de jQuery pour l’élément parent que vous peut changer les iframes css en pointer-events:auto

HTML

CSS

 .maps iframe{ pointer-events: none; } 

jQuery

 $('.maps').click(function () { $('.maps iframe').css("pointer-events", "auto"); }); $( ".maps" ).mouseleave(function() { $('.maps iframe').css("pointer-events", "none"); }); 

Je suis sûr qu’il n’ya qu’une façon JavaScript de procéder, si vous voulez append quelque chose à cela, n’hésitez pas.

La méthode JavaScript pour réactiver les événements de pointeur est assez simple. Il suffit de donner un identifiant à l’iFrame (ie “iframe”), puis d’appliquer un événement onclick au div du cointaineur:

 onclick="document.getElementById('iframe').style.pointerEvents= 'auto'" 
   

J’ai étendu la solution @nathanielperales.

En dessous de la description du comportement:

• cliquez sur la carte pour activer le défilement
• lorsque la souris quitte la carte, désactivez le défilement

En dessous du code javascript:

 // Disable scroll zooming and bind back the click event var onMapMouseleaveHandler = function (event) { var that = $(this); that.on('click', onMapClickHandler); that.off('mouseleave', onMapMouseleaveHandler); that.find('iframe').css("pointer-events", "none"); } var onMapClickHandler = function (event) { var that = $(this); // Disable the click handler until the user leaves the map area that.off('click', onMapClickHandler); // Enable scrolling zoom that.find('iframe').css("pointer-events", "auto"); // Handle the mouse leave event that.on('mouseleave', onMapMouseleaveHandler); } // Enable map zooming with mouse scroll when the user clicks the map $('.maps.embed-container').on('click', onMapClickHandler); 

Et voici un exemple jsFiddle .

Je ré-édite le code écrit par #nathanielperales ça a vraiment fonctionné pour moi. Simple et facile à attraper mais son travail ne qu’une fois. J’ai donc ajouté mouseleave () sur JavaScript. Idée adaptée de #Bogdan Et maintenant c’est parfait. Essaye ça. Crédits va à #nathanielperales et #Bogdan. Je viens de combiner les deux idées. Merci les gars. J’espère que cela aidera les autres aussi …

HTML

CSS

 .maps iframe{ pointer-events: none; } 

jQuery

 $('.maps').click(function () { $('.maps iframe').css("pointer-events", "auto"); }); $( ".maps" ).mouseleave(function() { $('.maps iframe').css("pointer-events", "none"); }); 

Improviser – adapter – vaincre

Et voici un exemple jsFiddle.

Oui c’est assez facile. J’ai fait face à un problème similaire. Ajoutez simplement la propriété css “pointer-events” à la partition iframe et réglez-la sur “none” .

Exemple:

SideNote: Ce correctif désactive tous les autres événements de souris sur la carte. Cela a fonctionné pour moi car nous n’avions besoin d’aucune interaction de l’utilisateur sur la carte.

 var mapOptions = { scrollwheel: false, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 

Après quelques recherches, vous avez 2 options. Depuis de nouvelles cartes api avec l’intégration iframe ne semble pas soutenir la désactivation de la molette de la souris.

Tout d’abord , utiliser d’anciennes cartes Google ( https://support.google.com/maps/answer/3045828?hl=fr ).

Deuxièmement , créer une fonction javascript pour simplifier l’intégration d’une carte pour chaque commentaire et en utilisant des parameters (c’est un exemple de code uniquement pour indiquer l’emplacement de la solution).

 function createMap(containerid, parameters) { var mymap = document.getElementById(containerid), map_options = { zoom: 13, scrollwheel: false, /* rest of options */ }, map = new google.maps.Map(mymap, map_options); /* 'rest of code' to take parameters into account */ } 

Il existe une solution géniale et facile.

Vous devez append une classe personnalisée dans votre css qui définit les événements de pointeur pour mapper le canevas à none:

 .scrolloff{ pointer-events: none; } 

Ensuite, avec jQuery, vous pouvez append et supprimer cette classe en fonction de différents événements, par exemple:

  $( document ).ready(function() { // you want to enable the pointer events only on click; $('#map_canvas').addClass('scrolloff'); // set the pointer events to none on doc ready $('#canvas').on('click', function() { $('#map_canvas').removeClass('scrolloff'); // set the pointer events true on click }); // you want to disable pointer events when the mouse leave the canvas area; $( "#map_canvas" ).mouseleave(function() { $('#map_canvas').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area }); }); 

J’ai créé un exemple dans jsfiddle , en espérant que ça aide!

Je viens d’enregistrer un compte sur developers.google.com et d’obtenir un jeton pour appeler une API de carte, et il suffit de le désactiver (molette de défilement: false):

  var map; function initMap() { map = new google.maps.Map(document.getElementById('container_google_maps'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, scrollwheel: false }); } 

Ceci est mon approche Je trouve facile à mettre en œuvre sur divers sites Web et à l’utiliser tout le temps

CSS et JavaScript:

Dans le HTML, vous voudrez envelopper l’iframe dans un div.

 function scrollOn() { $('#map').removeClass('scrolloff'); // set the pointer events true on click } function scrollOff() { $('#map').addClass('scrolloff'); // set the pointer events true on click } 

 .scrolloff iframe { pointer-events: none ; } 

Voici une solution simple. Il suffit de définir le pointer-events: none CSS sur pour désactiver le défilement de la souris.

Si vous souhaitez que la souris soit activée lorsque l’utilisateur clique sur la carte, utilisez le code JS suivant. Cela désactivera également le défilement de la souris lorsque la souris sort de la carte.

 $(function() { $('#gmap-holder').click(function(e) { $(this).find('iframe').css('pointer-events', 'all'); }).mouseleave(function(e) { $(this).find('iframe').css('pointer-events', 'none'); }); }) 

Pour désactiver le zoom de la molette de la souris sur Google Maps intégré, il vous suffit de définir le pointeur-événement de la propriété css de l’iframe sur none:

Thats All .. Assez bien hein?

Eh bien, pour moi, la meilleure solution était de simplement utiliser comme ceci:

HTML:

CSS:

 #google-maps iframe { pointer-events:none; } 

JS:

RÉSULTAT

Considérations:

Le mieux serait d’append une incrustation avec une transparence plus sombre avec un texte: ” Cliquer pour parcourir ” lorsque la molette de la souris est désactivée. la carte comme prévu. Des indices sur comment faire ça?

Ajouter pointer-events:none; style pointer-events:none; cela fonctionne bien

La façon la plus simple de le faire est d’utiliser un pseudo-élément comme :before ou :after .
Cette méthode ne nécessite aucun élément HTML ou jquery supplémentaire.
Si nous avons par exemple cette structure html:

Ensuite, il suffit de faire en sorte que le wrapper relatif au pseudo-élément que nous allons créer empêche le défilement.

 .map_wraper{ position:relative; } 

Après cela, nous allons créer le pseudo-élément qui sera positionné sur la carte pour empêcher le défilement:

 .map_wraper:after{ background: none; content: " "; display: inline-block; font-size: 0; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 9; } 

Et vous avez terminé, pas de jquery pas d’éléments HTML supplémentaires! Voici un exemple pratique de jsfiddle: http://jsfiddle.net/e6j4Lbe1/

Voici ma solution simple.

Mettez votre iframe dans un div avec une classe appelée “maps” par exemple.

Ce sera le CSS pour votre iframe

 .maps iframe { pointer-events: none } 

Et voici un petit javascript qui définira la propriété pointer-events de l’iframe sur “auto” lorsque vous survolez l’élément div pendant au moins 1 seconde (cela fonctionne mieux pour moi – définissez-le comme vous voulez) et efface le délai d’attente / le définir à “none” à nouveau lorsque la souris quitte l’élément.

 var maptimer; $(".maps").hover(function(){ maptimer = setTimeout(function(){ $(".maps").find("iframe").css("pointer-events", "auto"); },1000); },function(){ clearTimeout(maptimer); $(".maps").find("iframe").css("pointer-events", "none"); }); 

À votre santé.

J’ai créé un plugin jQuery très simple pour résoudre le problème. Vérifiez-le sur https://diazemiliano.github.io/googlemaps-scrollprevent

 (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").sortinggger("click"); }); }).call(this); 

 Edit in JSFiddle Result JavaScript HTML CSS .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; } 

   
  
 
"Start Scroll Prevent" "Stop Scroll Prevent"  

En utilisant la réponse de @nathanielperales, j’ai ajouté la fonction de survol parce que cela fonctionne mieux lorsque l’utilisateur perd le focus sur la carte pour arrêter de faire défiler à nouveau 🙂

 $(function(){ $('.mapa').hover(function(){ stopScroll();}, function () { $('.mapa iframe').css("pointer-events", "none"); }); }); function stopScroll(){ $('.mapa').click(function () { $('.mapa iframe').css("pointer-events", "auto"); }); } 

Variations sur un thème: une solution simple avec jQuery, aucune modification CSS requirejse.

 // make iframe active on click, disable on mouseleave $('iframe.google_map').each( function(i, iframe) { $(iframe).parent().hover( // make inactive on hover function() { $(iframe).css('pointer-events', 'none'); }).click( // activate on click function() { $(iframe).css('pointer-events', 'auto'); }).sortinggger('mouseover'); // make it inactive by default as well }); 

L’écouteur de survol est attaché à l’élément parent, donc si le parent actuel est plus grand, vous pouvez simplement envelopper l’iframe avec un div avant la 3ème ligne.

J’espère que ça va être utile pour quelqu’un.

J’ai moi – même trébuché sur cette question et utilisé une partie d ‘un mélange de deux réponses très utiles sur cette question: la réponse de czerasz et la réponse de massa .

Ils ont tous deux beaucoup de vérité, mais quelque part dans mes tests, j’ai découvert que l’on ne travaillait pas pour le mobile et que le support IE était médiocre (fonctionne uniquement sur IE11). Ceci est la solution de nathanielperales, puis étendue par czerasz, qui repose sur css de pointer-events et qui ne fonctionne pas sur mobile (il n’y a pas de pointeur dans mobile) et ne fonctionne sur aucune version d’IE qui n’est pas v11 . Normalement, je m’en fous, mais il y a une tonne d’utilisateurs et nous voulons des fonctionnalités cohérentes, alors je suis allé avec la solution de superposition, en utilisant un wrapper pour le rendre plus facile à coder.

Donc, mon balisage ressemble à ceci:

 
 
 {Tell your users what to do!} 
 
   

Alors les styles sont comme ceci:

 .map.embed-container { position:relative; } .map.embed-container #map-notice{ position:absolute; right:0; top:0; background-color:rgb(100,100,100);/*for old IE browsers with no support for rgba()*/ background-color: rgba(0,0,0,.50); color: #ccc; padding: 8px; } .map.embed-container .map-overlay{ height:100%; width:100%; position:absolute; z-index:9999; background-color:rgba(0,0,0,0.10);/*should be transparent but this will help you see where the overlay is going in relation with the markup*/ } 

Enfin le script:

 //using jquery... var onMapMouseleaveHandler = function (event) { $('#map-notice').fadeIn(500); var elemento = $$(this); elemento.on('click', onMapClickHandler); elemento.off('mouseleave', onMapMouseleaveHandler); $('.map-overlay').fadeIn(500); } var onMapClickHandler = function (event) { $('#map-notice').fadeOut(500); var elemento = $$(this); elemento.off('click', onMapClickHandler); $('.map-overlay').fadeOut(500); elemento.on('mouseleave', onMapMouseleaveHandler); } $('.map.embed-container').on('click', onMapClickHandler); 

J’ai également ajouté ma solution testée dans une liste de GitHub , si vous souhaitez obtenir des informations à partir de là …

Ceci est une solution avec CSS et Javascript (c.-à-d. Jquery mais fonctionne aussi avec Javascript pure). En même temps, la carte est réactive. Évitez la carte pour zoomer lors du défilement, mais la carte peut être activée en cliquant dessus.

HTML / JQuery Javascript

CSS

 #map { position: relative; padding-bottom: 36%; /* 16:9 ratio for responsive */ height: 0; overflow: hidden; background:transparent; /* does the sortingck */ z-index:98; /* does the sortingck */ } #map iframe { pointer-events:none; /* does the sortingck */ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index:97; /* does the sortingck */ } 

S’amuser !

Dans Google Maps v3, vous pouvez désormais désactiver le défilement pour zoomer, ce qui permet de bénéficier d’une expérience utilisateur bien meilleure. D’autres fonctions de carte fonctionneront toujours et vous n’avez pas besoin de div supplémentaires. J’ai aussi pensé qu’il devrait y avoir un retour pour l’utilisateur afin qu’il puisse voir quand le défilement est activé, alors j’ai ajouté une bordure de carte.

 // map is the google maps object, '#map' is the jquery selector preventAccidentalZoom(map, '#map'); // Disables and enables scroll to zoom as appropriate. Also // gives the user a UI cue as to when scrolling is enabled. function preventAccidentalZoom(map, mapSelector){ var mapElement = $(mapSelector); // Disable the scroll wheel by default map.setOptions({ scrollwheel: false }) // Enable scroll to zoom when there is a mouse down on the map. // This allows for a click and drag to also enable the map mapElement.on('mousedown', function () { map.setOptions({ scrollwheel: true }); mapElement.css('border', '1px solid blue') }); // Disable scroll to zoom when the mouse leaves the map. mapElement.mouseleave(function () { map.setOptions({ scrollwheel: false }) mapElement.css('border', 'none') }); }; 

Cela vous donnera une carte Google responsive qui arrêtera le défilement sur l’iframe, mais une fois cliqué, vous pourrez zoomer.

Copiez et collez-le dans votre fichier HTML, mais remplacez le lien iframe par le vôtre. Il s’agit d’un article avec un exemple: désactivez la molette de défilement de la souris sur les iframes Google Map intégrés.

Ajoutez ceci à votre script:

 function initMap() { var uluru = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: uluru, scrollwheel: false, disableDefaultUI: true, disableDoubleClickZoom: true }); var marker = new google.maps.Marker({ position: uluru, map: map }); } 

Ce serait mon approche à cela.

Pop ceci dans mon fichier main.js ou similaire:

 // Create an array of styles. var styles = [ { stylers: [ { saturation: -300 } ] },{ featureType: 'road', elementType: 'geometry', stylers: [ { hue: "#16a085" }, { visibility: 'simplified' } ] },{ featureType: 'road', elementType: 'labels', stylers: [ { visibility: 'off' } ] } ], // Lagitute and longitude for your location goes here lat = -7.79722, lng = 110.36880, // Create a new StyledMapType object, passing it the array of styles, // as well as the name to be displayed on the map type control. customMap = new google.maps.StyledMapType(styles, {name: 'Styled Map'}), // Create a map object, and include the MapTypeId to add // to the map type control. mapOptions = { zoom: 12, scrollwheel: false, center: new google.maps.LatLng( lat, lng ), mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP], } }, map = new google.maps.Map(document.getElementById('map'), mapOptions), myLatlng = new google.maps.LatLng( lat, lng ), marker = new google.maps.Marker({ position: myLatlng, map: map, icon: "images/marker.png" }); //Associate the styled map with the MapTypeId and set it to display. map.mapTypes.set('map_style', customMap); map.setMapTypeId('map_style'); 

Ensuite, insérez simplement un div vide où vous souhaitez que la carte apparaisse sur votre page.

Vous aurez évidemment besoin d’appeler également l’API Google Maps. J’ai simplement créé un fichier appelé mapi.js et l’ai jeté dans mon dossier / js. Ce fichier doit être appelé avant le javascript ci-dessus.

 `window.google = window.google || {}; google.maps = google.maps || {}; (function() { function getScript(src) { document.write('<' + 'script src="' + src + '"' + ' type="text/javascript"><' + '/script>'); } var modules = google.maps.modules = {}; google.maps.__gjsload__ = function(name, text) { modules[name] = text; }; google.maps.Load = function(apiLoad) { delete google.maps.Load; apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m@228000000"],[["http://khm0.googleapis.com/kh?v=135\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=135\u0026hl=en-US\u0026"],null,null,null,1,"135"],[["http://mt0.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h@228000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t@131,r@228000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0","3.14.0"],[2635921922],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=135\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"en-US","US",null,18],0],[null,null,[null,"en-US","US",null,18],3],[null,null,[null,"en-US","US",null,18],6],[null,null,[null,"en-US","US",null,18],0]]], loadScriptTime); }; var loadScriptTime = (new Date).getTime(); getScript("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0/main.js"); })();` 

Lorsque vous appelez le fichier mapi.js, assurez-vous de lui transmettre l’atsortingbut false du capteur.

ie:

La nouvelle version 3 de l’API nécessite l’inclusion d’un capteur pour une raison quelconque. Assurez-vous d’inclure le fichier mapi.js avant votre fichier main.js.

Pour google maps v2 – GMap2:

 ar map = new GMap2(document.getElementById("google_map")); map.disableScrollWheelZoom(); 

si vous avez un iframe utilisant l’API Google Map incorporé comme ceci:

vous pouvez append ce style css: pointer-event: none; ES.

Voici ma réponse à la réponse de @nathanielperales étendue par @chams, maintenant à nouveau étendue par moi.

HTML

jQuery

 // we're doing so much with jQuery already, might as well set the initial state $('.maps iframe').css("pointer-events", "none"); // as a safety, allow pointer events on click $('.maps').click(function() { $(this).find('iframe').css("pointer-events", "auto"); }); $('.maps').mouseleave(function() { // set the default again on mouse out - disallow pointer events $(this).find('iframe').css("pointer-events", "none"); // unset the comparison data so it doesn't effect things when you enter again $(this).removeData('oldmousepos'); }); $('.maps').bind('mousemove', function(e){ $this = $(this); // check the current mouse X position $this.data('mousepos', e.pageX); // set the comparison data if it's null or undefined if ($this.data('oldmousepos') == null) { $this.data('oldmousepos', $this.data('mousepos')); } setTimeout(function(){ // some left/right movement - allow pointer events if ($this.data('oldmousepos') != $this.data('mousepos')) { $this.find('iframe').css("pointer-events", "auto"); } // set the compairison variable $this.data('oldmousepos', $this.data('mousepos')); }, 300); console.log($this.data('oldmousepos')+ ' ' + $this.data('mousepos')); }); 

Le plus simple :

Here is my solution for the problem, I was building a WP site, so there is a little php code here. But the key is scrollwheel: false, in the map object.

 function initMap() { var uluru = {lat: , lng: }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 18, scrollwheel: false, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); } 

J’espère que cela aidera. À votre santé