Comment bloquer l’auto scroll sur une map
Beaucoup de cartes intégrées via des iframes ne permettent pas de bloquer le défilement automatique lorsque l’utilisateur interagit avec la carte, ce qui entraîne un zoom indésirable au lieu d’un simple défilement.
Voici une solution simple à appliquer sur une carte Google Maps :
Avant l’iframe, on intègre une div avec un petit bout de JS qui supprime cette div si l’utilisateur clique
<div class="overlay" onclick="style.pointerEvents='none'"></div>
<iframe src="https://www.google.com/maps/d/embed?mid=1cAGoo8yyEKzH5vnB60fhE1kQsnaHNKQl&ehbc=2E312F;z=6" scrollwheel="false" width="100%" height="550"></iframe>En CSS, on rend cette div transparente et à la bonne taille./code
.overlay {
background: transparent;
position: relative;
width: 100%;
height: 550px;
/* your iframe height */
top: 550px;
/* your iframe height */
margin-top: -550px;
/* your iframe height */
}Cette approche garantit une interaction plus fluide avec la carte intégrée, en évitant le problème du zoom indésirable lors du défilement.
