Advanced Custom Fields Google Maps Tutorial

Update (Oct. 31, 2016): Google Maps now requires that you have an API Key in order to add maps via ACF. The tutorial reflects this new requirement.

One of my go-to plugins is Advanced Custom Fields. It is versatile, and makes adding custom fields to posts, pages, custom post types, and even user profiles a breeze. Unfortunately, their documentation is sometimes not very beginner friendly (I’ve written about this in the past), so today I’ll try to help out those trying to use the Google Map custom field.

Unlike some of their other custom fields, which allow you to simply use <?php the_field('field_name'); ?> to output the content of the field for that particular post or page, this particular field, requires quite a bit of extra code. It’s all listed in their code example; I will simply explain step by step where to put in that code.

Step 0

Before you can use Google Maps you need to get a Google Map API Key. You can use the Standard API (it allows 25,000 map views  per day), or if you have a lot of traffic, you’ll need to set up the Premium Plan.

Step 1

Paste this code into your stylesheet (style.css), wherever you think is appropriate:

 Step 2

Create a new file, and copy-paste the following code in it:

Save that file in your theme folder, and name it google-maps.js or something similar. In my theme, all scripts are in the library/js folder.

Step 3

Now you need to add the scripts to your template. You can paste the link in the header of your template, but that’s not a very good practice; it’s much better to add them via wp_enqueue_script() .

In your functions.php file, add the following code:

On lines 2 and 10, replace “XXXX” for your Google Map API Key.

On line 3, make sure that the path to the script points to where you saved the file in step 2.

Step 3 – optional

If you only want to load your map in certain page, for example, the “Contact” page, you can modify the code above like this:

This way, the scripts won’t be loaded in other pages, where they are not necessary.

Step 4

On the template where you want to add the map, add the following code inside the loop:

Make sure that you change the name ‘location‘ in get_field('location'); to match the name of your custom field.

That’s it. Your map should be showing, along with the location selected.

26 Responses to “Advanced Custom Fields Google Maps Tutorial”

  1. Brian

    Hi Alicia, I’ve been searching everywhere for a post like this – so thanks for that. However, I am still having trouble with this even after following these instructions. Would it be possible to get some assistance or advice from you. Thanks

  2. Gwen

    This is great Alicia! Soooo much easier to understand than anything else I’ve read. I’m trying to display maps as sub fields of a repeater field and switched the the_field tags for the_sub_field and it’s not working for me. Any idea if there is anything else I would need to tweak?

    • Alicia Ramirez

      Sorry, but I’m not that familiar with the repeater fields. I do know that the code I posted will only show one marker. If you go to the ACF site, they do have an alternate sample JS for multiple markers. That may help.

  3. Stuart Phillips

    Hi Alicia

    Great post, helped this novice out! I got some errors when folloowing this out and after some google-fu realised you cant have ‘-‘ in function names. Changing

    “function my-theme_add_scripts() {” to “function my_theme_add_scripts() {”


    “add_action( ‘wp_enqueue_scripts’, ‘my-theme_add_scripts’ );” to “add_action( ‘wp_enqueue_scripts’, ‘my_theme_add_scripts’ );”

    Did the trick.

    • Javier Ales

      Thank you so much!!!! it was messing everything up with the hyphen. Works like a charm now with the underscores. Saved myself some work, thank you both.

  4. Andri

    Hi there, I am interested in posting google map/calendar/etc fields from my front-end for guest users. From this post and the ACF documentation page I gather that there is no front-end form for any of the ACF specific types, or am I missing something?

    • Alicia Ramirez

      ACF is meant to add custom fields to post, pages, and custom post types. So, for example, you can add a map to your contact page. To add a Google map so that people can manipulate it in the front end, you’d need a different solution.

  5. Pabitra Barua

    Thanks Alicia for this great article. It’s working but I encountered a problem. It’s showing selected location but the location is not visible because it is being covered by sea and islands- howland island, baker island etc.., please help me.

    • Alicia Ramirez

      You could try setting a different zoom factor. You can adjust the zoom in the code in step 2, line 23. You can also check Google Map documentation.

      • Pabitra Barua

        Thanks Alicia, now I get solved. zoom factor was not the issue, actually I had made mistake with wp_enqueue_script() function.

  6. Andrew

    I’ve got this working on one of my site but another it doesn’t seem to work and I don’t see any javascript or php errors…

    Are you able to assist?

  7. Mladen

    Thanks you, a lot easier to understand. Just to mention that if you rename map container, the map will not render. So, keep .acf-map as it is.

  8. Marwan

    Hello Alicia,

    I have another scenario if you would be able to assist please.

    I need to loop through a repeater (offices repeater) that has a google map field.

    I want to display the offices info and a link “view google map” that will open that specific map into a bootstrap modal.

    any idea how to assist me ? many thanks in advance.

  9. Ingrid

    Thank you very much for this. The ACF website indeed does not explain things very cleary, but you did! I got it to work thanks to your explanation. Thank you!

  10. Adam Brace

    I’ve followed the instructions here but all I’m getting is a blank box with a border and nothing in it? Can you help not sure what is going wrong. Thanks

    • Alicia Ramirez

      It’s hard to tell without looking at your code. The most common error is not changing the name ‘location’ in get_field('location'); to match your custom field in step 4. It that’s not the issue. I’d recommend posting your code in StackOverflow.

      • Adam Brace

        Heres my code. I named my field map in ACF. All I’m seeing is a box with a grey border.

        • Adam Brace

          Opps didn’t seem to work

          Heres a screen grab of my code. I named my field ‘map’ in ACF so I did update location correctly. All I’m seeing on the front end is a box with a grey border.

          • Alicia Ramirez

            If it is loading the correct field, the problem may be that the scripts aren’t loading, or that there is no map to show (there are no markers in the map in the page or post you are trying to show).

            Use the developer tools in your browser to troubleshoot where the problem is. Once you have narrowed down the problem, please post your code in StackOverflow. This isn’t a troubleshooting forum, SO is. You’ll probably get better help, from multiple people there.