Display ACF Maps in a DIVI Theme Builder Page

by | 14 May, 2020 | How To

DIVI is a fantastic piece of kit, add Advanced Custom Fields (ACF) to the mix and you can easily create some great sites with custom field details and minimal coding.

One of the things we like about ACF is the maps module. It fits nicely into the custom fields when editing a post, is no-frills, nice and simple. Just works.

However, there is one shortcoming.

Whilst ACF allows you to set the map pointer in the WordPress admin, it does not allow you to actually display that data on the front end, if you want to show maps on the front end, you either have to use the DIVI map module or a different plugin for maps.

So how do I show ACF google maps on the DIVI front end?

This, my good reader, DOES require you to open your code editor and create a plugin OR a shortcode in your theme.

In this case, I created a tiny plugin, you will manually edit the plugin settings and add a shortcode where you want the map to appear in your DIVI template.

Fear not though, it’s “relatively” straightforward.

I will assume at this point, that if you are using the ACF google maps, you have already added the special hook into your functions.php containing your Google Maps API key, so I won’t show you that, but just in case, here is the page on ACF showing how it’s done: https://www.advancedcustomfields.com/blog/google-maps-api-settings/

So, before we start with the plugin you will:

a. Already have the Google Maps API key to hand
b. Already have a custom field name for your map in Custom Field section in ACF Field Group section


So, Let’s Go!

  1. First, download this simple plugin here, its a very basic plugin, only 4kb. No ads, no nastiness.
  2. Before you upload the plugin, open the file called “index.php” in your favourite editor
  3. Now you need to add your Google API Key in the location shown and edit the $cf_field_name to the name of your custom field, in my case its “hotel_location_map”.
  4. Now upload the plugin files and activate the plugin.
  5. Now where ever you want a map to appear in DIVI based on the ACF data, just add a code module within the template and add the following shortcode: [jucra_acf_map].
    THAT’S IT, YOUR ARE DONE MY FRIEND!

    Now you will/should have a nice formatted map showing the POI marker like below o your posts.

    If you wanted to customise the map at all, just download and edit the file in the plugin called “helper-code.html”.

Craig Edmonds

Post Written by Craig Edmonds

Craig co-owns JUCRA Digital and brings a rich background in hospitality and finance. Transitioning from finance, he embarked on a sabbatical to Marbella, Spain in 2000 and has since made a significant shift into web design and wordpress development. Residing in Marbella ever since, Craig thrives on the dynamic challenges of the internet, has a strong affinity for WordPress, and is an enthusiast of Cpanel.