Je travaille sur un site WordPress où les auteurs intègrent généralement Google Maps à l'aide d'iFrames dans la plupart des articles.
Existe-t-il un moyen de désactiver le zoom par la molette de la souris sur tous ces sites en utilisant Javascript ?
J'avais le même problème : lorsque l'on fait défiler la page et que le pointeur passe sur la carte, le système 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 mettant un div avec un .overlay exactement avant chaque gmap iframe insertion, voir :
<html>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>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 du pointeur de l'atteindre. Mais si vous cliquez sur le div, il devient transparent aux événements du pointeur et active à nouveau la carte !
J'espère que cela vous a aidé :)
C'est une excellente solution. Dans mon cas, j'ai dû spécifier un z-index pour qu'il se superpose correctement, cependant.
Cette solution est très utile ! Mais je préfère utiliser une couche positionnée de manière absolue avec la même largeur et hauteur que la carte plutôt qu'une couche relative sur la carte. Merci pour le partage !
IMO la meilleure solution à ce problème jusqu'à présent ! Nous avons été confrontés à ce problème depuis longtemps et cette solution est agréable et assez propre pour être réutilisée !
J'ai essayé la première réponse dans cette discussion et cela ne fonctionnait pas pour moi, peu importe ce que je faisais, alors j'ai trouvé ma propre solution :
Enveloppez l'iframe avec une classe (.maps dans cet exemple) et idéalement le code embedresponsively : http://embedresponsively.com/ - Changez le CSS de l'iframe en pointer-events: none puis, en utilisant la fonction de clic de jQuery sur l'élément parent, vous pouvez changer la css des iframes en pointer-events:auto
HTML
<div class='embed-container maps'>
<iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>CSS
.maps iframe{
pointer-events: none;
}jQuery
$('.maps').click(function () {
$('.maps iframe').css("pointer-events", "auto");
});Je suis sûr qu'il y a un moyen de faire cela uniquement en JavaScript, si quelqu'un veut ajouter quelque chose, n'hésitez pas.
Vous pouvez également ajouter ceci pour le ramener à son état d'origine lorsque la souris quitte le site : $('.maps').mouseleave(function() { $('.maps iframe').css("pointer-events", "none") ; }) ;
Juste une remarque : en utilisant pointer-events: none empêchera toute interaction avec la carte (glisser, navigation, clics, etc.).
J'ai étendu la solution de @nathanielperales.
En dessous de la description du comportement :
Ci-dessous le 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);
Merci pour cet extrait. Je l'ai utilisé avec l'ajout suivant à la fin : $('.maps.embed-container').find('iframe').css("pointer-events", "none");
Merci pour le code. Il a en fait résolu un autre problème que j'avais. J'ai intégré des graphiques provenant de Google Spreadsheet et le défilement avec la molette de la souris a cessé de fonctionner pour toute la page pour une raison quelconque. Votre code l'a fait défiler à nouveau avec la molette de la souris. Merci encore.
Oui, c'est assez facile. J'ai rencontré un problème similaire. Il suffit d'ajouter la propriété css "pointeur-événements" à la div iframe et la définir comme suit Aucun. .
Exemple : < iframe style="pointer-events:none" src= ........ >
SideNote : Cette correction désactive tous les autres événements de souris sur la carte. Cela a fonctionné pour moi puisque nous n'avons pas besoin d'une interaction de l'utilisateur sur la carte.
Pourquoi ne pas simplement utiliser une image alors ? Vous chargez beaucoup de ressources supplémentaires juste pour tout désactiver.
Veuillez noter que cela ne fonctionnera pas sur IE<11 - caniuse.com/#search=pointer-événements
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
32 votes
Définir l'option de carte
scrollwheelafalse.0 votes
Ou le désactiver directement par le biais de JS : map.disableScrollWheelZoom() ;
4 votes
J'ai peur que vous ne puissiez pas. En raison des restrictions de sécurité, il n'est pas possible d'accéder à la carte par script et, à ma connaissance, il n'existe pas de paramètre d'URL permettant de le désactiver.
0 votes
J'ai exactement le même problème. Je veux désactiver les événements de défilement de la souris sur une carte intégrée à un iframe. Je ne l'ai pas encore trouvé.
8 votes
Il s'agit de cartes intégrées. Je ne sais pas pourquoi les gens postent des solutions pour utiliser la bibliothèque JS de cartes.