FooEvents lets you display maps on your events/products using Google Maps. You can choose from two map embed methods.
Choosing an embed method:
- Navigate to FooEvents > Settings > Integration > Google Maps
- Select a Maps Embed Method:
- Iframe – Free and does not require a Google Maps API key – recommended
- JavaScript – Requires a paid Google Maps API key – legacy option; avoid
Method 1: Iframe – recommended
The iframe method is simple, free, and easy to set up. Simply select the iframe method and enter your venue’s GPS coordinates when editing your events (see below).
Method 2: JavaScript – paid legacy option; avoid
The JavaScript method is a legacy option that was available before the iframe method was introduced. It requires that you set up a paid Google Maps API key. It is also more prone to JavaScript conflicts with themes and third-party plugins. For that reason, we recommend using the iframe option, as it is more robust and provides similar functionality.
If you decide to use the JavaScript method, you will need to generate a Google Maps API key. Please follow these instructions:
- You can generate a Google Maps API key by following these instructions: https://developers.google.com/maps/documentation/javascript/get-api-key
- Once you have generated a Google Maps API key, enter it here: FooEvents > Settings > Integration > Google Maps API key
Getting the correct GPS coordinates:
The following applies to both the iframe and JavaScript embed methods.
Go to maps.google.com and search for your venue or address. Once you’ve found it, right-click the location, click the coordinates, and copy them to your clipboard. Paste them into the “Google Map Coordinates” field when editing your event in your WordPress admin area.
The Google Maps coordinate format should look like this: -26.13741, 28.00815
If necessary, you can convert to this format using the following tool:
http://www.gps-coordinates.net/gps-coordinates-converter
Setting the correct GPS coordinates:
- Navigate to a product that has events enabled.
- Scroll down to the Product Data tabs.
- Open the Event Settings tab and scroll to the Venue Details section.
- Enter the GPS coordinates in the Google Map Coordinates field.
Viewing the Google Map:
Navigate to the product on the front end of your site and scroll to the product tabs:
