There are 2 aspects of ACF Google Maps field that need to be in place in order for the field to work properly.

  1. Google Maps Script loaded with the API key
  2. The field processing and marker rendering

The plugin supplies all required assets out of the box.

Google Maps Script

Initially, the only thing you need to do in order to make Google Maps fields working is to provide your Google Maps API key in WP ACF-VC Bridge plugin’s settings

How to get Google Maps API Key?

What if Google Maps Script has been loaded already?

Some times Google Maps script could be loaded by a theme or another plugin. In this case, you might want to disable loading Google Maps script in this plugin. To do so, just navigate to plugin’s settings and select “No, I have them loaded elsewhere”.

Using own scripts

In case you want to disable plugin’s scripts and styles for rendering and use your own, you can disable loading these assets by adding the following code to your functions.php file

add_filter( 'vc_acf_field_picker_enqueue_google_maps', function() { return false; } );

Custom ACF Google Maps field formatting

For more advanced uses you might need to individually render Google Maps field. First, you’ll need to disable current ACF field formatting for Google Maps field type with the following PHP code

remove_filter( 'vc_acf_field_picker_render_field_type_google_map', 'vc_acf_field_picker_render_field_type_google_map_filter', 10 );

Sample code

After you’ll disable the default Google Maps field type formatting, it is required to add your own, which could look like this one:

add_filter( 'vc_acf_field_picker_render_field_type_google_map', function ( $value, $field_object, $post_id ) {
  $value = sprintf(
    '<div class="my-acf-google-map-field"><div class="marker" data-lat="%s" data-lng="%s"></div></div>',
    $value[ 'lat' ],
    $value[ 'lng' ]

  return $value;
}, 10, 3 );

Don't have WP ACF-VC Bridge yet?

Combine the powers of two giants

Get a must have plugin for modern WordPress website today!


Leave a Reply