WordPress.org

Support

Support » Plugins and Hacks » Events Manager » [Resolved] Disable scroll zoom on Google Maps

[Resolved] Disable scroll zoom on Google Maps

Viewing 15 replies - 1 through 15 (of 19 total)
  • 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>

    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;
    });

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

    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.

    Plugin Author Marcus

    @netweblogic

    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.

    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.

    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

    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;
    	});
    });

    @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

    Plugin Author Marcus

    @netweblogic

    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.

    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.

    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.

    Plugin Author Marcus

    @netweblogic

    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.

    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.

    Plugin Author Marcus

    @netweblogic

    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);
Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘[Resolved] Disable scroll zoom on Google Maps’ is closed to new replies.
Skip to toolbar