Using The Google Maps ACF Field

Toolbox enables you to very easily embed Google Maps ACF’s (Advanced Custom Fields) in your Beaver Builder layouts. There are only a few caveats that need to be filled, as I found out myself. This article is about what they are and to guide you through the steps on how to solve them.

1. Get a API key for Google Maps

If you’ve followed the discussions about Google changing it’s policy on Google Maps, you’ve probably figured out that Google now *possibly* charges for the use of their API. They ask you for creditcard details up front, should you ever cross their free quotum limits. More on their pricing can be found here.

You will need to register a Google account and request that API Key first. You can do that here.

2. Whitelist your domain to allow use of the API key.

You will need to add the domain(s) you’ll be using this API key in the Google Cloud Platform domainverification settings.

3. Add the API key in your Toolbox Plugin Main settings section.

This can be found under Settings > Toolbox when logged into your own site’s dashboard.

4. Activate Maps API’s

Next is activating the Maps API’s that you are going to need in the Google Cloud Platform API’s and services.

You will need to add the following API’s:

  • Maps Embed API (for embedded, interactive maps)
  • Maps Static API (static, image map)
  • Geocoding API (for using the search function on ACF field in the dashboard)

You can also add Directions API, but there is no default support for this inside Toolbox. So you should only add it if you’re going add this otherwise.

That’s it! You should be able to add those fields now. Once setup properly you can search inside that ACF field on the dashboard for the address you want to add. You can also drag the ACF Field in the layout, and select the Google Maps field to simply display that map.

If your ACF field is unable to search for the entered address in your dashboard, you have probably forgotten to activate the Geocoding API. Check your Browser’s Javascript Console to check if there are any errors while to fetch the results.

Have fun building!

Posted in , ,

Beaverplugins

Web ninja with PHP/CSS/JS and Wordpress skills. Also stand-in server administrator, father of four kids and husband to a beautiful wife. Always spends too much time figuring out ways to do simple things even quicker. So that you can benefit.