Published on Aug 12, 2018

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

Sridhar Katakam

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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right