The Scroll off function is not working on google map

Question

$(document).ready(function() {
  $('#map').addClass('scrolloff');

  $('#overlay').on("mouseup",function(){          
    $('#map').addClass('scrolloff'); 
  });

  $('#overlay').on("mousedown",function(){        
    $('#map').removeClass('scrolloff');
  });

  $("#map").mouseleave(function () {              
    $('#map').addClass('scrolloff');            
  });
});

 

.scrolloff {
 pointer - events: none;
}
iframe {
 width: 100 % ;
 height: 260 px;
}

<div class="overlay" class="map-container">
 <iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2549.8391302717027!2d-74.51093153882466!3d40.53525165221866!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c3c0b7401dac15%3A0x209d581c4bc2ba2a!2s11+Cedar+Grove+Ln%2C+Somerset%2C+NJ+08873%2C+USA!5e0!3m2!1sen!2sin!4v1456722671076" allowfullscreen></iframe>
</div>

I have attached my full code i m working on i have simply applied the concept of the pointer-event function to stop the scrolling of the google. But my code is not working on these iframe. I have to applied the same code to other projects they are working smoothly. But it is not working on these iframe. If i change the iframe address it is working.

You can get better idea from below link. [Click Here](http://stackoverflow.com/questions/2330197/how-to-disable-mouse-scroll-wheel-scaling-with-google-maps-api) — Nirav Patel, Feb 29 '16 at 05:57
but hw could it be possible using the iframe tag i have used i frame tag. Not latitudes and longitudes to call the map. — harsh desai, Feb 29 '16 at 06:09

score 0 · Answer 1 · answered Feb 29 '16 at 07:24

0

I see spaces in pointer-events css property pointer - events: none;

it should be: pointer-events: none;

answered Feb 29 '16 at 07:24

Bharat Gupta

2,628
1
19
27

score 0 · Answer 2 · answered Feb 29 '16 at 07:39

a div with an .overlay exactly before each gmap iframe Code will something like this.

 <html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

CSS create the class:

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

The div will cover the map, preventing pointer events from getting to it. But if you click on the div, it becomes transparent to pointer events, activating the map again!

I hope get helped you :)

user3173022 · Answer 3 · 2016-06-04T06:17:33.837

If you use iframe code, try this:

HTML: wrap iframe in to div ;
CSS: add .scrolloff{pointer-events:none};
Javascript: add the code below;

jQuery(document).ready(function() {
    jQuery('.map-canvas').addClass('scrolloff');
    jQuery('.my-map').on('click', function() {
        jQuery('.map-canvas').removeClass('scrolloff');
    });
 
    jQuery('.map-canvas').mouseleave(function() {
        jQuery('.map-canvas').addClass('scrolloff');
    });
});

.scrolloff{pointer-events:none}

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>

<div class="map-canvas"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2875.295699663181!2d11.09368201550548!3d43.89114207911383!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132af65dc5ef10bb%3A0x4983a428073d6747!2sVia+Ermolao+Rubieri%2C+29%2C+59100+Prato+PO!5e0!3m2!1sit!2sit!4v1465019144237" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>

The Scroll off function is not working on google map

3 Answers3