How to disable google map zoom on scrolling

Follow the instructions:

Edit the file ‘specular/vc_templates/google_map.php’.
Find the line:

$output .= '<div class="row-fluid row-google-map " style="position:'.$position.';height:'.esc_attr($height).'px;"><iframe class="googlemap '.$extra_class.'" style="height:'.$height.'px;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.esc_url($dynamic_src).'&amp;output=embed"></iframe><div class="desc">'.$desc.'</div>';

and replace with:

$output .= '<div class="row-fluid row-google-map " style="position:'.$position.'; height:'.esc_attr($height).'px;"><iframe class="googlemap '.$extra_class.'" style="height:'.$height.'px; pointer-events:none" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.esc_url($dynamic_src).'&amp;output=embed"></iframe><div class="desc">'.$desc.'</div>';

Edit the file ‘specular/js/main.js’

Add this code at the end of the file:

$(window).ready(function(){
  // Disable scroll zooming and bind back the click event
  var onMapMouseleaveHandler = function (event) {
    var that = $(this);

    that.on('click', onMapClickHandler);
    that.off('mouseleave', onMapMouseleaveHandler);
    that.find('iframe.googlemap').css("pointer-events", "none");
  }

  var onMapClickHandler = function (event) {
    var that = $(this);

    // Disable the click handler until the user leaves the map area
    that.off('click', onMapClickHandler);

    // Enable scrolling zoom
    that.find('iframe.googlemap').css("pointer-events", "auto");

    // Handle the mouse leave event
    that.on('mouseleave', onMapMouseleaveHandler);
  }

  // Enable map zooming with mouse scroll when the user clicks the map
  $('.row-google-map').on('click', onMapClickHandler);
});

This way the map won’t zoom on window scroll, but the zoom will be enabled when clicking on map.

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.