Disable scrollWheel zoom in Google Maps field in admin

• Bogardo

• August 25, 2014 at 11:35 pm

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.

• VoiD2008

• August 30, 2014 at 2:18 am

<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

• [email protected]

• September 7, 2014 at 2:46 am

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

• [email protected]

• February 4, 2015 at 3:31 am

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

• RamboZambo

• May 13, 2015 at 5:04 pm

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

• CodeFish

• November 20, 2015 at 9:28 pm

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