Support

Account

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

  • <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