Display ACF Maps in a DIVI Theme Builder Page
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!
- First, download this simple plugin here, its a very basic plugin, only 4kb. No ads, no nastiness.
- Before you upload the plugin, open the file called “index.php” in your favourite editor
- 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”.
- Now upload the plugin files and activate the plugin.
- 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”.
Post Written by Craig Edmonds
Craig is one of the owners of JUCRA Digital and reigns from a hospitality and finance background, however, fell into web design and development in 2000 after leaving the world of finance to go on a sabbatical in Marbella, Spain where he has been ever since. Craig really loves the challenge of the internet, digs WordPress and loves Cpanel.