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

zeraphie 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

meumairakram 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.