Disabilita zoom scorrimento in Google Maps iframe

Quindi, a quanto pare quando uso:Disabilita zoom scorrimento in Google Maps iframe

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

il panning viene disattivato pure.

e quando uso:

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

è lavoro solo deosn't.

Esiste comunque la possibilità di disattivare lo zoom di scorrimento nell'iframe?

fonte

2015-03-19 Milad

Ho appena notato che Google ha fissato il comportamento di scorrimento - ora la visualizzazione della mappa è fisso e un testo viene visualizzato di esso, dicendo che "è necessario utilizzare cmd + zoom :-) ottime notizie per me! – tschagger

Non esiste alcun modo per disabilitare lo scorrimento solo sull'API iframe di Google Maps, ma c'è un problema.

Come notato che style="pointer-events:none;" impedisce all'iframe di ricevere qualsiasi evento del mouse e con la combinazione di gestori di eventi Javascript sull'overlay, è possibile disabilitare e abilitare la ricezione dell'evento del mouse nel momento desiderato.

È anche possibile ascoltare la mousemove() e rilasciare solo gli eventi del puntatore quando il mouse sono in alcuni settori (ad esempio, pulsanti)

ho fatto un quick demo su github, spero che questo aiuto.

fonte

2015-03-19 16:51:19 kaho

Grande demo! http://kylelam.github.io/iframe.html –

Funziona perfettamente. – Bipon

Se è necessario supportare qualsiasi versione di IE prima di 11, qualsiasi soluzione basata sull'attributo pointer-events non funzionerà. – Edward

E 'un buon post sul blog con il modo per raggiungere questo con onClick="style.pointerEvents='none'"Disable the mouse scroll wheel zoom on embedded Google Map iframes

fonte

2016-10-20 22:15:49

Si prega di includere il codice completo nelle risposte. I collegamenti agli articoli per il resto della risposta possono scadere nel tempo –

Se è necessario supportare qualsiasi versione di IE prima di 11, qualsiasi soluzione che si basa sull'attributo pointer-events non funzionerà. – Edward

Per qualcuno che chiedersi come disattivare il Javascript Google Map API

Adottato da @kaho idea

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>

fonte

2017-05-10 05:35:43 AlbertSamuel

Ecco esempio

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

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

fonte

2017-08-11 09:48:23 Pradeep

Disabilita zoom scorrimento in Google Maps iframe

risposta

Problemi correlati