Support

Account

Home Forums Feature Requests Disable scrollWheel zoom in Google Maps field in admin

Solving

Disable scrollWheel zoom in Google Maps field in admin

  • Would it be possible to disable the “zoom on scroll” for the maps in the admin on default and maybe enable it when a user clicks on the map.

    See Google Maps Documentation

    scrollwheel: false

    It is very annoying when scrolling through a post to find a specific field that when the cursor hits the map element the page stops scrolling and triggers the map zoom.

  • <style type="text/css">
    .acf-map {
    	width: 100%;
    	height: 400px;
    	border: #ccc solid 1px;
    	margin: 20px 0;
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
    (function($) {
    function render_map( $el ) {
    	var $markers = $el.find('.marker');
    	var args = {
    		zoom		: 16,
    		center		: new google.maps.LatLng(0, 0),
    		mapTypeId	: google.maps.MapTypeId.ROADMAP,
    		scrollwheel: false
    	};
    	var map = new google.maps.Map( $el[0], args);
    	map.markers = [];
    	$markers.each(function(){
        	add_marker( $(this), map );
    	});
    	center_map( map );
    }
    function add_marker( $marker, map ) {
    	var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    	var marker = new google.maps.Marker({
    		position	: latlng,
    		map			: map
    	});
    	map.markers.push( marker );
    	if( $marker.html() )
    	{
    		var infowindow = new google.maps.InfoWindow({
    			content		: $marker.html()
    		});
    		google.maps.event.addListener(marker, 'click', function() {
    			infowindow.open( map, marker );
    		});
    	}
    }
    function center_map( map ) {
    	var bounds = new google.maps.LatLngBounds();
    	$.each( map.markers, function( i, marker ){
    		var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
    		bounds.extend( latlng );
    	});
    	if( map.markers.length == 1 )
    	{
    	    map.setCenter( bounds.getCenter() );
    	    map.setZoom( 16 );
    	}
    	else
    	{
    		map.fitBounds( bounds );
    	}
    }
    $(document).ready(function(){
    	$('.acf-map').each(function(){
    		render_map( $(this) );
    	});
    });
    })(jQuery);
    </script>
    <div class="acf-map"></div>
    

    Line 16
    var args = {
    zoom : 16,
    center : new google.maps.LatLng(0, 0),
    mapTypeId : google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
    };

    or declare map globaly
    after

    <script type="text/javascript">
    

    add var map and change var map = new google.maps.Map( $el[0], args); to map = new google.maps.Map( $el[0], args);
    then you can call map.setOptions({'scrollwheel':false}); or any other options change

  • I second this feature request.
    Would be a nice check box in options for map /location fields.
    thanks.
    Craig

  • Got this working with maps on the front-end. elliots example code was extremely helpful:

    // vars
            var args = {
                zoom		                : 16,
                center		                : new google.maps.LatLng(0, 0),
                mapTypeId	                : google.maps.MapTypeId.ROADMAP,
                scrollwheel                 : false,
     
                mapTypeControl              : true,
                mapTypeControlOptions: {
                    style                   : google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position                : google.maps.ControlPosition.TOP_LEFT
                },
     
                zoomControl                 : true,
                zoomControlOptions: {
                    style                   : google.maps.ZoomControlStyle.SMALL,
                    position                : google.maps.ControlPosition.LEFT_CENTER
                }
            };
     
     
    // create map
            var map = new google.maps.Map( $el[0], args);
  • Guys,

    just letting you know that there are additional parameters you can set. Setting scrollwheel to false will have no effect on smart phones as you are obviously not scrolling.

    Dependent on your target set additional parameters to false:

    // vars
    	var args = {
    		zoom		: 16,
    		center		: new google.maps.LatLng(0, 0),
    		mapTypeId	: google.maps.MapTypeId.ROADMAP,
    		scrollwheel	: false,
    		navigationControl	: false,
    		mapTypeControl	: false,
    		scaleControl	: false,
    		draggable	: false
    	};
  • Hey guys,

    the zooming can be disabled in a new plugin, which we recently released ACF Google Map Extended.

    It extends ACF Google Map field functionality with some useful features and backward compatible with the data format of the original field.

    Best wishes,
    CodeFish team

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.