LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Embedded maps with a touch- and mousewheel-friendly interface

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.

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!

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!

CSS
.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%;
}

JS
// 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');
});

Description

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. This is one solution.
Term
Mon, 11/27/2017 - 21:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv