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

Google map embeds have recently become a massive pain in the butt. 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 computer out the window. I had a numerous battles with this before I decided to write this down.

Advertisements