How to display ACF’s Google Map field via Oxygen’s Google Maps element

Updated on May 27, 2021

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

This members-only 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: