Updated on October 11, 2019

One of the built-in fields in Advanced Custom Fields plugin is Google Map.

This tutorial provides the steps to display a google map whose address has been specified on the entry (Page, Post etc.) in the backend inside a custom field by passing the field’s address to Oxygen‘s Google Maps element using a custom PHP function.

Step 1

Obtain an API key for Google Maps at https://developers.google.com/maps/documentation/javascript/get-api-key.

Enable Places.

Screenshot from my account:

You may want to restrict your key’s use to your website only. Click here for info on this.

Step 2

Install and activate ACF/ACF Pro.

Create a new Field Group having a Google Maps field.

Select the location(s) where the field group should appear.

Step 3

Install and activate Code Snippets plugin.

Create a new Snippet having a name of say, “Function to return location from ACF Maps field” having the following code:

function sk_acf_location() {

    $location = get_post_meta( get_the_ID(), 'location', true );

    return $location['address'];


Set the snippet to run only on frontend.

Note: If your Google Maps-type of ACF field is inside a Repeater as a sub field, replace

get_post_meta( get_the_ID(), 'location', true )

in the above with

$location = get_sub_field( 'location' );

Step 4

Enter the Google Maps API key on the Oxygen > Settings page in your WordPress admin panel.

Create a new Code Snippet with a title of say, “Google API Key for ACF” having the following:

function my_acf_google_map_api( $api ){

    $api['key'] = 'xxxx';

    return $api;


add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

Replace xxxx with your API key.

If you are using ACF Pro, use this code instead:

function my_acf_init() {

    acf_update_setting('google_api_key', 'xxxx');

add_action('acf/init', 'my_acf_init');

Set the snippet to run in admin only.

Step 5

Edit your entry and set your desired address.

Step 6

Edit your entry/Template/Reusable Part in Oxygen’s visual editor.

Add a Google Map element.

Click on data button inside the Address field, then PHP Function Return Value and paste sk_acf_location in the Function Name field. Click Insert.

Depending on your desired design, you may want to set a width of 100% and a height value of say, 500px.

Click on Save button.

That’s it! Google map should now be appearing on the frontend showing the address you entered in the backend for that entry.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: