Bloccare lo scroll alle mappe di Google Maps

Le mappe di Google Maps sono un elemento essenziale per ogni sito web, poiché forniscono una precisa connotazione fisica dell’azienda proprietaria del sito web, localizzata in questo modo senza troppe difficoltà dai clienti.

Per questo motivo le pagine Contatti e Come Raggiungerci di molte aziende integrano queste mappe nel loro codice.

Oltre ad una migliore esperienza utente, l’uso di una mappa permette a Google e agli altri motori di ricerca di geolocalizzare più facilmente il tuo sito web, migliorandolo così anche dal punto di vista SEO.

Purtroppo però le mappe di Google Maps hanno un difetto, cioè quel fastidioso effetto di zoom che avviene quando cerchi di scendere verso il contenuto infderiore della pagina, scrollando verso il basso, con il puntatore del mouse che sta sopra la mappa.

Questo può diventare un vero e proprio problema nei casi in cui la mappa sia grande, ed occupa gran parte della parte visibile di una pagina.

Inserisci la mappa sul tuo sito

Per acquisire l’iframe della tua mappa il procedimento è molto semplice: vai su Google Maps e cerca il luogo che vuoi che sia indicato.

Una volta trovato l’esatto punto, apri il menù (si trova in alto a sinistra) e clicca sulla voce “Condividi o incorpora mappa“. A questo punto seleziona la voce “Incorpora mappa“, e copia il codice iframe che è selezionato, ed inseriscilo nel tuo sito web.

Nell’iframe potrai modificare i valori di width ed height, in base alle tue necessità.

Aggiungi il blocco dello scroll alla tua mappa

Per prima cosa devi creare ed inserire un file in javascript con all’interno il seguente codice:

// JS CODE


 0 
 jQuery(document).ready(function() { 
 1 
 	jQuery('.map-canvas').addClass('scrolloff'); 
 2 
 	jQuery('.my-map').on('click', function() { 
 3 
 		jQuery('.map-canvas').removeClass('scrolloff'); 
 4 
 	}); 
 5 
  
 6 
 	jQuery('.map-canvas').mouseleave(function() { 
 7 
 		jQuery('.map-canvas').addClass('scrolloff'); 
 8 
 	}); 
 9 
 });

Segnati il nome del file ed il percorso in cui lo inserisci, io ad esempio l’ho chiamato custom.js ed il suo percorso è /assets/js/custom.js.

Adesso devi far sì che il file custom.js venga letto dal tuo sito, e per far ciò aggiungi questo codice nel file functions.php (se usi WordPress).

// PHP CODE


 0 
 add_action('wp_enqueue_scripts', 'sa_enqueue_custom_scripts', 7972); 
 1 
 function sa_enqueue_custom_scripts() { 
 2 
 	wp_enqueue_script('sa-custom', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery'), &#8221;, true); 
 3 
 }

Ora devi aggiungere una semplice regola css al tuo foglio di stile, per la classe scrolloff, usate nel codice javascript.

// CSS CODE


 0 
 .scrolloff { 
 1 
 	pointer-events: none; 
 2 
 }

Per finire, non devi fare che far altro che includere l’iframe della tua mappa dentro 2 <div> con classi differenti, che io ho chiamato my-map e map-canvas.

// HTML CODE


 0 
 <div class="my-map"> 
 1 
   <div class="map-canvas"> 
 2 
     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d19378.054091527312!2d11.272412448314128!3d43.781888393681925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0xa36643abdf3ba3e7!2sStadio+Artemio+Franchi!5e0!3m2!1sit!2sit!4v1461409874816" width="100%" height="350" frameborder="0" style="border:0" allowfullscreen></iframe> 
 3 
   </div> 
 4 
 </div>

Naturalmente puoi cambiare a tuo piacimento il nome della due classi usate, ma ricordati di cambiargli anche all’interno del file in javascript.

Il risultato finale sarà una bella mappa di Google Maps perfettamente funzionante e con l’effetto di scrolling disattivato, attivabile cliccando sopra la mappa.

Ecco qui un esempio: