Advanced Custom Fields: Google Maps

Advanced Custom Fields is a plugin that can be used for WordPress development

Author :  

Advanced Custom Fields is a plugin that can be used for WordPress development

In the last post, we wrote a tutorial for installing and setting up a basic custom field using the Advanced Custom Fields plugin. This time, let’s learn about the Google Maps field type and how to integrate it onto your site. If you ever get lost, you can always find the documentation page here.

Step 1: Install and Activate Advanced Custom Fields

The first step is to make sure that Advanced Custom Fields plugin is installed and activated on your WordPress installation. If not, you can read our tutorial on installing Advanced Custom Fields here. Next, click on the Custom Fields admin button found on the left hand side of your screen.

Let’s add a new group field and call it ‘Google Maps’:

Creating a new filed group.


Click on ‘Add Field’:

You will need to click the add field button to start this project

Step 2: Install and Activate Advanced Custom Fields

Let’s take a look at some of the options available to us when we create a Google Maps field:

  • Center: This is where the map will center to, you can put in the latitude and longitude values. If you leave it blank, it will default to Melbourne, Australia.
  • Zoom: This option will determine what the zoom level
  • Height: Define the height that you want the Google Map to be

See below for some setting examples:

The options that are available when you create a new field called Google Maps


After that,  click on the ‘Publish’ button found on the top right.

Click on the publish button to save your field.

Step 3: Enter the Code

In order for the Google Map embed to work, you will need to enter the code into your page.php or single.php file. This code is required, so make that you have placed it in the appropriate file(s).

Please the following code at the top of your file.

Next, enter the following code at the bottom of your file.

Finally, enter the following code into the loop or content of your post/page;

Make sure to re-upload or update your file.

Step 4: Location, Location, Location

When you edit or create a new post, you should be able to see a new field with a Google Map as shown below. You can enter an address into a field if you need a marker to be set.

All you need to do is publish your post and the field will now show!

You should now be able to see this google maps field when editing or writing a new post.

Step 5: Finished!

With the Google map embedded, your post should look something like this:

This is what you will see when you have inserted all of the code and refreshed the page.