Getting Google Maps API’s to work with Advanced Custom Fields

Google map embeds have recently become a massive pain in the ass. You need api keys to embed them, which is fine but the documentation is seriously disjointed and overly complicated.

We use them a lot within our WordPress builds. We use the ACF Google Map field most of the time. Below are the steps to get the bloody things working.

  1. Go to the Google API dashboard here.
  2. Create a project.
  3. Enable an APIs by clicking on the Enable API button (see below).
    screen-shot-2017-01-24-at-11-56-16
  4. Select the API you want to enable from the library (see below)
    screen-shot-2017-01-24-at-11-58-39
  5. You will need to enable all the following APIs. By following the previous two steps for each API.
    1. Google Places API Web Service
    2. Google Maps JavaScript API
  6. Then create Credentials for the project by clicking on the credentials tab and then the Create Credentials button. Select API key from the dropdown. You will be given an API key.
    screen-shot-2017-01-24-at-12-02-01
  7. You then need to use that key wherever you are calling the Google Maps API for embedding the map. Use this format:
    https://maps.googleapis.com/maps/api/js?key=your-key-here&v=3.exp&sensor=false
  8. If you are using Advanced Custom Fields you also need to include a function within your functions.php file to make the backend work You can see how here: https://www.advancedcustomfields.com/resources/google-map/
    We use the below function as we are using ACF Pro.

    function my_acf_init() {
    	
    	acf_update_setting('google_api_key', 'xxx');
    }
    
    add_action('acf/init', 'my_acf_init');

 

If this isn’t working then make sure you check the console logs. They should tell you what APIs are not working. I may have missed some on the list in step 5 and just not run into a use case scenario where I have seen the error.

I hope this stops you getting in a tantrum and throwing your bloody computer out the window. I had a numerous battles with this shit before I decided to write this down.

Advertisements

One thought on “Getting Google Maps API’s to work with Advanced Custom Fields”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s