Docs

[Jerehmie C]

When I’m scrolling though a page, and get to the map, the scroll wheel engages the map and begins to zoom in/out. I would like to disable this function.

[Christian]

Hey Jerehmie,

Thanks for writing in.

Can you provide us your embed code because it doesn’t scroll in our install.

Thanks.

[Jerehmie C]

Sure thing.

[/text_output][map class=”np-map” id=”northpark-map”]<iframe draggable=”false” style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d13404.092463175826!2d-96.77564010239622!3d32.87110781100866!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1391640140690&#8243; height=”450″ width=”600″ frameborder=”0″></iframe>[/map][/vc_column][/vc_row]

[Kory]

Hey Jerehmie,

Try entering in the following script in Customizer > Custom > JavaScript:

jQuery(document).ready(function($){
  $(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
    map.set('scrollwheel', false);
  });
});

Thanks!

[Jerehmie C]

Nope, no love.

[Kory]

Try this without the document ready declaration:

jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
  map.set('scrollwheel', false);
});

Thanks!

[Ben S]

I tried the most recent one, that didn’t work for me, either. It still zooms in/out once the mouse gets over the map. Makes Renew 10 especially difficult to use with a full-width map.

Here’s my embed code. Note, I’m using the Google Maps Engine. <iframe src="https://mapsengine.google.com/map/embed?mid=zTj6-7PV8HJQ.kzNKYThLtE2I" width="640" height="480"></iframe>

Also, if you happen to know how to set the zoom level in the new embed code for Google Maps Engine, that would be much appreciated, as it doesn’t pull that over from the map I created.

[Christian]

Hey Ben,

I’m afraid the problem is beyond our scope of support. Using maps from Google Maps isn’t scrollable by default. But, since you are using one from Maps Engine you must use Maps API on your own.

This thread shows how to disable the scroll from the map. You’ll need to add on to it as per your needs.

We’re sorry but it is beyond our control.

Thank you for your understanding.

[Angels V]

I have the same problem, not using Maps Engine, but your shortcode.
http://fd.anuvol.eu/?page_id=6835

In a map shortcode:

<iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2971.524701071113!2d3.1459543!3d41.860056199999995!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12bbab230fc1d4b5%3A0xb54e63fc160ed822!2sCarrer+Gregal%2C+15!5e0!3m2!1sca!2s!4v1400754739675&#8243; width=”640″ height=”180″ frameborder=”0″ scrolling=”no”></iframe>

[Rad]

Hi Angels,

X map shortcode will just wrap your own map code to make it responsive. And X don’t provide any specific API for any map.

And by looking at it, you’re just using IFRAME map which google API is not possible.

Add this css at your customizer’s custom css.

.x-map {
  position:relative;
  }
  .x-map:before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:block;
  z-index :1000;
  width: 100%;
  height: 100%;
  }

Hope this helps.

[enviaramariano]

I’ve made a jQuery plugin in: https://github.com/diazemiliano/mapScrollPrevent
I think it’s a nicer solution.

[Christian]

Thanks for sharing. 🙂

[Author]

Posts