WordPress.org

Ready to get started?Download WordPress

Forums

Events Manager
[resolved] Disable scroll zoom on Google Maps (20 posts)

  1. Daedalon
    Member
    Posted 1 year ago #

    We've gotten complaints from irritated users who scroll the page using mouse wheel and end up having their map zoomed instead. http://stackoverflow.com/a/2330272 shows how to fix this with a Google Maps setting.

    1. Could this be implemented in plugin core? Either as always-disabled or as a setting.
    2. While waiting for the possible core support, is there a way to implement this in our customizations?

    http://wordpress.org/extend/plugins/events-manager/

  2. agelonwl
    Member
    Posted 1 year ago #

    hi,

    try this snippet in your theme header.php (below wp_head)

    <script type="text/javascript">
    jQuery(document).ready(function($){
     jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
      map.scrollwheel = false;
     });
    });
    </script>
  3. Daedalon
    Member
    Posted 1 year ago #

    That worked, thanks! To be exact, I added this part to our custom .js file inside the main document.ready function:

    $(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
    	map.scrollwheel = false;
    });
  4. Daedalon
    Member
    Posted 1 year ago #

    This does not affect the map on Add / Edit Event / Location pages. How can I disable mouse wheel scroll zoom on those pages?

  5. fatherb
    Member
    Posted 1 year ago #

    Has this been added as a setting we can change yet?

    Or do I have to figure out how to put the above code in?

    Thanks for any help.

  6. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 1 year ago #

    try pasting that in your theme's header.php file below wp_head() (outside of the php brackets)

    @Daedalon, I'll add a new hook for the admin maps, it'll be em_maps_location_hook too so the code above should just start working.

  7. fatherb
    Member
    Posted 1 year ago #

    Bit confused on this. Can it be added to a hook?

    I'm using the woothemes canvas theme and don't want to add stuff into header.php as it'll just get overwritten in an update. Can I use a hook to add this information into? I had a crack at putting it into the wordpress wp_head using the woothemes hook manager but nothing changed. Still zooms when scrolling the page.

    Thanks.

  8. bettercallsaul
    Member
    Posted 1 year ago #

    I've got the same problem. Still zooming in/out when I put code above in header, or in custom js file.

    Also tried code below (code below second comment). I've tried many options, but didnt work.

    Only If I add scrollwheel: false, in events-manager.js it works.

    // Modifying Google Maps in Events Manager
    
    jQuery(document).ready(function($){
    
    jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){										
    
    // Disable scroll zoom on Google Maps
    google.maps.event.addListener(map, function() {
    map.scrollwheel= false;
    });		
    
    // Setting the current zoomlevel of the map
     google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    map.setZoom(17);
    map.setCenter(marker.getPosition());
    });
    
    google.maps.event.addListener(map, 'center_changed', function() {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(function() {
    map.panTo(marker.getPosition());
    }, 3000);
    });
    
    // Zoom to 15 when clicking on marker google.maps.event.addListener(marker,'click',function() {
     map.setZoom(15);
     map.setCenter(marker.getPosition());
     });
    
    // Close infowindow by default, but I dont know how to do this
    // OPTION: comment out infowindow lines in events-manager.js. This is // what I have done (lines 735-738)
    // OR change infowindow.open(maps[map_id],marker); into infowindow.close();
    
    // Styling Google Map Single Event
    var styles = [
    	{
    	featureType: "all",
    	elementType: "all",
    	stylers: [
    		]
    		},{
    	featureType: "road",
    	elementType: "geometry",
    	stylers: [
    	{ lightness: 100 },
    	{ visibility: "simplified" }
    	]
    	},{
    	featureType: "road",
    	elementType: "labels",
    	stylers: [
    	{ visibility: "on" }
    	]
    	},{
    	featureType: "water",
    	elementType: "all",
    	stylers: [
    	{ visibility: "on" },
    	{ hue: "#15b1e4" }
    	]
    	}
    	];
    
    	map.setOptions({styles: styles});		
    
    	});	
    
    });
    maps[map_id] = new google.maps.Map( document.getElementById('em-location-map-'+map_id), {
    		    zoom: 14,
    scrollwheel: false,
    		    center: em_LatLng,
    		    mapTypeId: google.maps.MapTypeId.ROADMAP,
    		    mapTypeControl: false
  9. Daedalon
    Member
    Posted 11 months ago #

    Fatherb and Bettercallsaul: We use the code in a custom .js file. This used to fix the issue on individual event / location pages, but has since stopped working. Marcus: What could have caused this?

    This used to be enough for a custom .js file, but isn't anymore:

    jQuery(document).ready(function($){
    	$(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
    		map.scrollwheel = false;
    	});
    });
  10. philipjohn
    Member
    Posted 11 months ago #

    @fatherb: A hook will be added to future versions but until then, you can use the code snippet to turn of mousewheel activity.

    For those who can't get the JS to work: have you checked for Javascript errors in the page?

    Also, can you post a link to an event where we can test this please?

    Thanks

  11. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 11 months ago #

    i just tested that out and it works for me, however maybe you should remove the jQuery(document).ready... bit as that didn't work for me.

  12. Daedalon
    Member
    Posted 11 months ago #

    Couldn't get it to work inside or outside the jQuery(document).ready() in a custom JS file. Used to work for some half a year, and just yesterday I noticed it didn't work anymore. Tested in Firefox 22, IE9 and Chrome 28.

    Firefox Inspector's Web Console doesn't show any errors or warnings on the page. Also tried with zero other custom JS apart from the above, both with and without the first and last line (the jQuery(document).ready() wrap).

    Unfortunately we can't post a link to a related page at this time, but hopefully Fatherb or Bettercallsaul can. It would be neat to have this as an option in EM settings.

  13. Daedalon
    Member
    Posted 11 months ago #

    As Phil suggested in http://wordpress.org/support/topic/control-what-the-map-centers-on-small-height-support?replies=5#post-4453658, I tried with the 2011 theme and only Events Manager and our EM customization plugin active. I even removed all other code from the custom JS file except the part that worked for some half a year. Tried it with and without the jQuery(document).ready() wrap. No effect, doesn't work.

    As I tried with the same three browsers as above, I'd rule out that the change would have been in any of them. It could be WP or EM, but what exactly could it be that doesn't affect EM devs, I don't have any ideas yet.

  14. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 11 months ago #

    I think you'll need to play around with this more, I manage to get that hook to fire without issues.

    btw, I'm assuming you mean on the front-end event/loc pages themselves? I couldn't get it to work on add/edit pages, will remedy that.

  15. Daedalon
    Member
    Posted 11 months ago #

    Yes, front-end individual event / location pages are what that used to work on. Hasn't worked on add / edit event / location pages at any point, first reported in msg #4.

    With EM at least I'm always referring to the front-end pages unless specifically mentioning that it's a wp-admin panel page I'm talking about. Not everyone might follow the same convention, though.

  16. Marcus
    NetWebLogic Support
    Plugin Author

    Posted 11 months ago #

    Yes, front-end individual event / location pages are what that used to work on.

    for me the normal single pages the public see work fine.

    e.g. try this in a mu-plugins file

    function my_em_maps_hook_test(){
    	?>
    	<script type="text/javascript">
    		jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
    			alert('hi!');
    		});
    	</script>
    	<?php
    }
    add_action('wp_head','my_em_maps_hook_test',1000);
    add_action('admin_head','my_em_maps_hook_test',1000);
  17. bettercallsaul
    Member
    Posted 11 months ago #

    Found a solution to disable scrollzoom.

    '
    Instead of using

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

    USE

    jQuery(document).ready(function($){
    $(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
    // Disable scroll zoom on Google Maps
    // Title: 'How to disable mouse scroll-wheel scaling with Google Maps // API' (see Stackoverflow)
    map.set('scrollwheel', false);
    });
    });

    Also can use
    map.setOptions({'scrollwheel': false});
    '

    Hope that will works for you all!!

    Hope also somebody can explain why map.scrollwheel = false; is not working anymore.

  18. Daedalon
    Member
    Posted 11 months ago #

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

    This worked. Thanks a lot, Bettercallsaul!

  19. joinfof
    Member
    Posted 9 months ago #

    @daedalon - Which file and where do I put that snippet in?

  20. Daedalon
    Member
    Posted 8 months ago #

    Joinfof: We have the above in a custom .js file as part of our custom plugin. From scratch, do roughly this:

    1. Create a custom plugin with one .php file and on .js file
    2. Add that code to the .js file
    3. Add to the .php file a piece of code that enqueues the .js file on every page (or only on those you want)
    4. Enable the plugin in your admin panel

    There should be plenty of instructions how to do this. We ended up with our solution by checking how the plugins we use did these things.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.