12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
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 $599 one-time).

Already a member? Log in below or here.