Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Set zoom level for Advanced Custom Fields map field.
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();
}
}
<?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' );
@zeraphie

This comment has been minimized.

Copy link

commented Jul 18, 2017

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

@meumairakram

This comment has been minimized.

Copy link

commented Aug 9, 2019

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();
    }
} 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.