<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>Embedded maps with a touch- and mousewheel-friendly interface</h1> <p class="lead">It’s nice to have an interactive map, but not so nice for the user experience when the map accidentally gets panned while touch scrolling, or unintentionally gets zoomed while mousewheel scrolling. Here is one solution that uses an absolute-positioned overlay with reduced opacity to show the map underneath while preventing touch and mousewheel scroll events from triggering on the map itself. The z-index of the overlay is toggled by a button to enable (or disable) map interaction.</p> <div class="map"> <a class="btn map-toggle" href="#0">Toggle</a> <div class="map-disable"></div> <div id="map_canvas_01" class="map-canvas"></div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut in similique iste delectus a nisi voluptatibus cum quod modi praesentium atque officiis obcaecati suscipit incidunt ipsam. Suscipit inventore dolorum ut!</p> <div class="map"> <a class="btn map-toggle" href="#0">Toggle</a> <div class="map-disable"></div> <div id="map_canvas_02" class="map-canvas"></div> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut in similique iste delectus a nisi voluptatibus cum quod modi praesentium atque officiis obcaecati suscipit incidunt ipsam. Suscipit inventore dolorum ut!</p>

.btn { display: inline-block; padding: 0.5em 0.7em; background: #555; color: #fff; text-decoration: none; } .map { position: relative; height: 20em; text-align: right; } .map-canvas { box-sizing: border-box; position: relative; z-index: 1; width: 100%; height: 100%; border: 2px solid #ccc; } .map-toggle { position: absolute; top: 0; right: 0; z-index: 3; opacity: 0.7; border-bottom-left-radius: 0.5em; } .map-disable { box-sizing: border-box; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; background: white; border: 2px solid #111; opacity: 0.3; } .map-disable.hide { z-index: -1; } /* Pen style */ body { margin: 2em; background: #F4F7F7; color: #333; font-family: Lato, sans-serif; } h1 { color: #08c; } .lead { font-size: 120%; }

// Google map var mapOptions = { zoom: 12, disableDefaultUI: true, center: new google.maps.LatLng(38.8935965, -77.014576), mapTypeId: google.maps.MapTypeId.ROADMAP } var map01 = new google.maps.Map(document.getElementById('map_canvas_01'), mapOptions), map02 = new google.maps.Map(document.getElementById('map_canvas_02'), mapOptions); // Map interaction events $('body').on('click', '.map-toggle', function(e){ e.preventDefault(); $(this).next('.map-disable').toggleClass('hide'); });