AE - Custom Field Map

The Custom Field Map widget allows you to show Google Maps from data saved in your custom field. It can be used in two modes.

Display Google Maps using ACF's Google Map Field

In ACF create a field with Field Type as Google Map.  Now, in the widget, do the following configuration.

  • Field Type:  Set this to ACF Google Map
  • Field Key: Slug/Key of field created in ACF
  • Height: Height of Map
  • Zoom: Zoom level of Map
  • Snazzy Style: You can apply styles from Snazzy Maps and give your maps a different touch. This is an optional field. If you leave it then it will just display your map in the default Google Map theme. 

AE-Custom Field Map: Layout Settings


Display Google Maps using Latitude and Longitude from custom fields

There is another method to show Google Maps using custom field data.

In this, you will have to create 3 custom fields to save the following data required for the map. You can create these custom fields using any custom field plugins. It can be ACF, Pods, or Toolset

  • Latitude
  • Longitude
  • Text Address

Now in the widget, do the following settings.

  • Source: Custom Fields
  • Longitude: Key of custom field you have created to save longitude
  • Latitude: Key of custom field you have created to save latitude 
  • Address: The key of the custom field was created to save the address data.

All other settings are the same as defined above. 

AE-Custom Field Map: Display Google Map using Custom Fields

Google Map API key Configuration

  • Navigate to WordPress dashboard AE Template >> Settings.
  • Click on the Configuration tab. Enter the API key or click on the link to generate it.

AE Pro Configuration: Enter Google Map API Key

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us