web-dev-qa-db-fra.com

Désactiver le zoom de défilement dans Google Maps iframe

Donc, apparemment, quand j'utilise:

<iframe style="pointer-events:none;" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>

le panoramique est également désactivé.

et quand j'utilise:

<iframe style="scrollwheel: false" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>

ça ne marche tout simplement pas.

Est-il possible de désactiver le zoom de défilement dans l'iframe?

google-mapsiframe
16
Milad

Il n'y a aucun moyen de désactiver le défilement uniquement sur l'API iframe de Google Maps, mais il existe un moyen de contourner ce problème.

Comme vous aviez remarqué que style="pointer-events:none;" Empêche l'iframe de recevoir tout événement de souris, et avec la combinaison de gestionnaires d'événements Javascript sur la superposition, vous pouvez désactiver et activer la réception d'événements de souris au moment que vous voulez.

Vous pouvez même écouter la mousemove() et ne libérer les événements du pointeur que lorsque la souris se trouve sur certaines zones (par exemple, les boutons)

J'ai fait démo rapide sur github , j'espère que cette aide.

41
kaho

Pour quelqu'un qui se demande comment désactiver le Javascript Google Map API

Adopté de l'idée @kaho

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>
3
AlbertSamuel

C'est un bon article de blog sur la façon d'y parvenir avec onClick="style.pointerEvents='none'"Désactiver le zoom de la molette de la souris sur les iframes Google Map intégrés

1
Jonny Jordan

Voici un exemple

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

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer>      
</script>

Source: - https://developers.google.com/maps/documentation/javascript/?csw=1#GMap2.Methods

0
Pradeep