Skip to content

Instantly share code, notes, and snippets.

@darylldoyle
Created August 1, 2014 16:23
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save darylldoyle/16f2a56faf30ce050fa5 to your computer and use it in GitHub Desktop.
Save darylldoyle/16f2a56faf30ce050fa5 to your computer and use it in GitHub Desktop.
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' );
@meumairakram
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