

* Renders a Google Map onto the selected jQuery element The following code provides helper functionality to use in your project. To display the saved location into a Google Map, please use the helper code. Some optional data is also provided in a shortened format and is saved with a key suffix of “_short”. Not all location results will return values for optional data keys, therefore it is important to first check if the data exists. New Since version 5.8.6, the minimum data will also include the current zoom level alongside optional data for street_number, street_name, city, state, post_code and country. The minimum data returned will include address, lat and lng values.

The Google Map field returns an array of data for the selected location. Method 1: Filter.Īdd_filter('acf/fields/google_map/api', 'my_acf_google_map_api') Īcf_update_setting('google_api_key', 'xxx') To register your Google API key, please use one of the following methods. The Google Maps field requires the following APIs Maps JavaScript API, Geocoding API and Places API. To obtain an API key, please follow Google’s Get an API Key instructions. In order use of the Google Maps JavaScript API, you must first register a valid API key. Added acf/fields/google_map/api filter in version 4.3.9ĭefines the initial map center point latitude and longitude.Added more location data to the value in version 5.8.6.Create a file called googlemaps.js, and insert this code.The Google Map field interface The Google Map field settings Changelog Rendering the Google Map requires a bit of Javascript. It’s purchasable by itself or with ACF Pro. In addition to ACF, you’ll need to have the ACF Repeater Field installed. (If you’re literally learning ACF for the first time, go read the documentation you’ll need a basic understanding to go from here.) What You Need: ACF and the Repeater Fieldīelieve it or not, ACF is free out of the box. Out of the box, it lets you display a Google Map where the user can enter an address and have it appear on the map.īut there’s a lot of customization you can do, including a map with multiple pins (markers) that display more than one location. One of the coolest field types you can use with ACF is a Google Map.

It’s powerful, it’s customizable, and it’s easy to use. It’s a WordPress plugin we literally use in almost every site we build now. Long story short (or expect to read about it an upcoming post), Advanced Custom Fields (ACF) allows us to build intuitive custom fields for the themes and sites we develop, including everything from photo galleries and text areas to date pickers and option menus. Given all of the Tools We Use posts we’ve written, it’s surprising we haven’t yet touched on Advanced Custom Fields - one of the most powerful and important tools we have in our arsenal.
