ACF Map

> Getting Set Up

• First thing you need to do is to set up and add your Google API key to Divi > Theme Options. Add the API Key of Google maps to enable the location function (you can get your api key here: https://developers.google.com/maps/documentation/embed/get-api-key#creating-api - keys).  
  NB: The Google Maps field requires the following APIs; Maps JavaScript API, Geocoding API and Places API.
• Next, head over to Divi Engine > Machine Settings > Module Overrides and set up your custom post to override the Divi Map module

1. Choose the ACF Google Map field that you have created. In our case, we have called ours "Map" - make sure it is assigned to the custom post you select in #2
2. Choose your custom post

Now you have your Google API Key and module override all set up - good to go :D

> Single Pin Map

This option is mostly used on the single template for the custom post.

• Head over to your theme builder template for your custom post single page. 
• Add a map module (Divi native)

1. Add a pin location, do not worry about the title or adding the address, the address comes from the ACF Map Field. Do not add a title for the pin as it will display with this if you do
2. Set the address for the map to center around

1. Keep the Title and the Body for the pin empty, unless you want to have the same title for each.

> Multiple Pin Map

If you want to have a map with multiple pins, you can do this. It is usually done on the archive or category pages for your custom post.

• Go to the theme builder template created for the archive/category page.
• Add a map module (Divi native)

1. You do not need to add a pin
2. You can center the map to where you want

• Add a unique ID to the map module - we have added "filteredmap" as an example

• Add an Archive Loop module to the layout as well (this will control what posts are shown on the map)

Go to the "Element Options" tab and then enable the option "Has Map"

1. Has Map > Enable this if you want this to control the map pins
2. Map Selector > Add the unique ID you added to the map module above
3. Marker Tooltip Layout > This defines the layout that is shown when you click the pin - as you can see in the very first image above - we added a Divi Library Layout and added the Title and Thumbnail modules
4. Cluster Map > Enable this if you want map clustering

> More Information

• Controlling the Zoom

In the Theme Builder, you can control the zoom level. Hover over the map and hold down Ctrl or Cmd and scroll your mouse wheel. This will determine how far out and in the map will be for all your posts

• You can watch some videos which show you how to do this here:

Single Map Pin:

Multiple Map Pins: