Set zoom level for Advanced Custom Fields map field.

adminMaps.js

var googleMapsLoaded = false;
var timeout;

if(googleMapsLoaded === false) {
    timeout = setInterval("checkVariable()", 500);
}

function doGoogleMapsHook() {
    // set current zoom level
    var currentZoom = parseInt(jQuery('#acf-field-zoom_level').val());
    acf.fields.google_map.map.setZoom(currentZoom);
    // disable scrollwheel zooming
    acf.fields.google_map.map.setOptions({'scrollwheel': false});
    // update zoom level in field on change
    google.maps.event.addListener( acf.fields.google_map.map, 'zoom_changed', function( e ) {
        var zoom = acf.fields.google_map.map.zoom;
        // update input
        jQuery('#acf-field-zoom_level').val( zoom );
    });
}

function checkVariable() {
    if((typeof google !== 'undefined') && (acf.fields.google_map.map)){
        googleMapsLoaded = true;
        clearInterval(timeout);
        doGoogleMapsHook();
    }
}

functions.php

<?php

function jsAdminMaps($hook) {
    if( 'post.php' != $hook )
        return;
    wp_enqueue_script( 'jsAdminMapsCustom', get_template_directory_uri() . '/js/adminMaps.js', array('jquery'), '0.0.1', true );
}
add_action( 'admin_enqueue_scripts', 'jsAdminMaps' );

Hi there,

I've made an updated version of this, which makes it a bit more dynamic, but requires two fields to be next to each other in the field group in acf!

(function($){
    // When the google maps have loaded, link the zoom level and location fields
    // if they are next to each other
    //
    // Linked fields have field names as follows:
    //
    // zoom_level
    // location
    //
    // They are required to be in this order in the field group as well, and
    // must be adjacent
    var timeout = setInterval(function(){
        if((typeof google !== 'undefined') && (acf.fields.google_map.map)){
            // Google maps api is now loaded
            clearInterval(timeout);

            var zoomLevelName = 'zoom_level';
            var mapName = 'location';

            // The zoom level fields
            var zooms = $('.acf-field[data-name="' + zoomLevelName + '"]');
            if(!!zooms.length){
                // Make sure to get each of them as this can have more than one
                // per page!
                zooms.each(function(){
                    var zoom = $(this);
                    var zoomInput = zoom.find('input');

                    // Find the next acf google map field with the field name of
                    // location
                    var map = zoom.next('.acf-field-google-map[data-name="' + mapName + '"]');

                    if(!!map.length){
                        // Get the instance of the google map of the location
                        var acfMap = acf.fields.google_map.maps['acf-' + map.attr('data-key')];

                        // Set the default zoom
                        acfMap.setZoom(parseInt(zoomInput.val()));

                        // On change and input of the zoom level, update the map
                        zoomInput.on('input change', function(){
                            let val = parseInt($(this).val());

                            if(val >= 0){
                                acfMap.setZoom(val);
                            }
                        });

                        // On zoom change for the map change the zoom level
                        acfMap.addListener('zoom_changed', function(){
                            zoomInput.val(acfMap.getZoom());
                        });
                    }
                });
            }
        }
    }, 500);
})(jQuery);

This is the config I used for the acf field

{
    "key": "field_xxxxxxxxxxxxxx",
    "label": "Zoom Level",
    "name": "zoom_level",
    "type": "number",
    "instructions": "",
    "required": 0,
    "conditional_logic": 0,
    "wrapper": {
        "width": "",
        "class": "",
        "id": ""
    },
    "default_value": 14,
    "placeholder": "",
    "prepend": "",
    "append": "",
    "min": 0,
    "max": 22,
    "step": 1
},

Izzy

For anyone who wants to do it in 2019, the code above doesn't seems to work. Here is a better option I did it with the ACF Javascript API, using the acf.add_action() function, with this hook google_map_init .

The code will look like:

var googleMapsLoaded = false;
var timeout;



if(googleMapsLoaded === false) {
    timeout = setInterval("checkVariable()", 500);
}

function doGoogleMapsHook() {

   // Using Add Action API to get the map Instance 

    acf.add_action('google_map_init', function( map, marker, field ){
        // map (object) google map object returned by the google.maps.Map() function
        // marker (object) marker object returned by the google.maps.Marker() function
        // field (object) field instance 

            
        // set current zoom level
        var currentZoom = parseInt(jQuery('.acf-field[data-name="zoom_level"] input[type="text"]').val());
        map.setZoom(currentZoom);
        // disable scrollwheel zooming
        map.setOptions({'scrollwheel': false});
        // update zoom level in field on change
        google.maps.event.addListener(map, 'zoom_changed', function( e ) {
            var zoom = map.zoom;
            // update input
            jQuery('.acf-field[data-name="zoom_level"] input[type="text"]').val( zoom );
        });

    });   }
function checkVariable() {
    if(typeof acf !== 'undefined'){
        googleMapsLoaded = true;
        clearInterval(timeout);
        doGoogleMapsHook();
    }
}