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?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Hi Sridhar,
    I’ve tried this solution, the map is showing the whole world but there is no pin.

    I believe I’ve followed your instructions to the letter but no luck at all.

    Any ideas where/how I should troubleshoot this?

  • @John Anderson
    When you add the Google Map you must select the DATA button next to the address field in oxygen editor then select the custom field and the key will be location. Then it will work dynamically as intended.

  • Sridhar Thank you so much for writing this tutorial. I have been trying to get this to work for the past 4 hours. You saved me the extra headache. Thank you!!!!!

  • Is it possible to setup the location through a repeater field?
    I want to set multiple locations in one map 🙂

  • If you have a repeater field with multiple locations, it is possible to display them on one map following the code from ACF.
    But I dont know why the maps is not showing, correctly. I guess it could be solved with the last step “solving the hidden map issue”.
    But I dont know where to put this line of code.
    google.maps.event.trigger(map, ‘resize’);

  • Hi Sridhar,

    I am trying your tutorial but I am having trouble getting to show the marker on the map. I just keep getting the error – (maps.google.com refused to connect.) If I just enter in a location directly it shows up on the frontend fine. Any help would be much appreciated.

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: