Disabilitare scroll mouse su Google Maps
Troppo spesso capita di scorrere in un sito ed incorrere in quel bruttissimo e fastidioso errore del mouse scroll su maps in un iframe
Come disabilitare lo scroll del mouse su Google Maps
Spesso ci capita di scorrere in un sito ed incorrere in quel bruttissimo errore del mouse scroll sulla mappa, per disabilitare questo effetto senza usare java che appesantisce il sito di seguito riporto un piccolo trucco (trick):
Disabilitare lo scrolling zoom in Google Maps iframe
Per disabilitare lo scroll al passaggio del mouse su un iframe di Google Maps bisogna intervenire in due punti:
- il primo bisogna inserire una semplice riga di codice davanti al frame che in questo caso ha come dimensioni width=”100%” height=”480″
- il secondo bisogna aggiungere alla fine del css la classe .overlay
Il codice è stato provato con successo su Html – WordPress – Joomla
HTML
1 2 | <div class=”overlay”></div> <iframe src=”https://mapsengine.google.com/map/embed?mid=some_map_id” width=”100%” height=”480″></iframe> |
CSS
1 2 3 4 5 6 7 8 | .overlay { background:transparent; position:relative; width:100%; height:480px; /* your iframe height */ top:480px; /* your iframe height */ margin-top:-480px; /* your iframe height */ } |
Praticamente è come se creassimo una sorta di tendina davanti alla mappa di Google.
Passiamo ad un esempio pratico per bloccare lo scroll o zoom al passaggio del mouse su Maps:
Esempio con overlay attivo
Esempio senza overlay attivo
Sintesi:
Guida pratica su come disabilitare lo scroll del mouse su un iframe di Google Maps utilizzando solo CSS e HTML senza usare java o jquery
WordPress bloccare lo scroll alle mappe di Google Maps
Joomla bloccare lo scroll alle mappe di Google Maps
Html bloccare lo scroll alle mappe di Google Maps
Drupal bloccare lo scroll alle mappe di Google Maps
