SHOW ME (4:25) 

Using the members location mapping gadget, you can display an interactive map that shows where your members are located, and displays information about each member.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/fNtPwMPLqhMH-GJnUvQuxocvJd7L_-TzVHwShfcQApM/members location mapping2-jDg.png

The process of setting up a members map involves setting up Google Maps integration, inserting a members location mapping gadget, then adjusting the members location mapping gadget settings.

To display member information in a table format, rather than on a map, you can insert a member directory gadget.

Billing for Google API usage

A Google billing account is required to access the Google APIs used by the members location mapping gadget. Depending on the number of times your member map is viewed, Google may charge the credit card associated with your Google account.

For each Google billing account, a credit of $200 USD is automatically applied. In other words, the first $200 of Google Maps API usage is free. 

Charges are approximately half a cent per transaction, so you'd need about 40,000 map requests before you use up your $200 credit and start getting billed.  

To avoid any charges beyond the credit limit, you can set your own API limits and alerts.

Wild Apricot does not charge anything for access to Google's Maps APIs. Any charges that you incur will be billed by Google to your Google billing account.

For more information on Google API billing, click here.

Setting up Google Maps integration

Before you can add the members location mapping gadget to a page on your site, you need to set up your Google Maps integration.

  1. Go to the Google Maps platform and click the Get Started button.   https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/2Zqu24GpNA6HJu8JpwoI3d5w2CTjTF9DxpM7iiTo-K0/google maps platform get started-yFA.png
  2. On the Enable Google Maps Platform screen that appears, check the Maps and Places checkboxes then click Continue.   https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/szNnNoKbxwF1J0lHmT_wHx0GNWtbS7X3NuAmDyHh0FA/enable google maps platform-lmQ.png
  3. Select or create a project then click Next.   https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/BrArJcx3EfLfxUk077jKSnOa04x3UIxxlsrSFH3VERI/select or create project-K7c.png
  4. Enable billing for your project, if it is not already enabled. If you are not logged in as an administrator of a Google billing account, you may need to create a Google billing account or contact your Google account administrator and ask them to enable billing for your Google account. For more information on Google billing accounts, click here.   https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/QvKvNunLaVkQ8ZdbqNidGURcDOhDEtTkNcho5jfqyck/enable billing for project-Nhw.png
  5. Once you are logged in an administrator of a Google billing account, you are prompted to enable your Google Maps APIs and generate an API key. Click Next to do so.   https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/c4CxNQEwcO1n0nCSNDsvGCEMIoonc4n5BBGZg_QGJ6k/enable google maps apis-Vb0.jpg
  6. From the next screen, copy the API key and save it somewhere. You'll need to paste it later in the field provided within your members location mapping gadget settings. Do not click the Done button on this screen. 
  7. On this same screen where you copied the API key, click the API Console link.
  8. Scroll down to the Application restrictions section and select the option to restrict this key's usage to HTTP referrers (websites).   https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/9EzPEanB6DiqPRBJdLLHMMkyrewy1GJfvbOJu13EUXA/key restrictions-HqI.png
  9. Enter all your Wild Apricot domain name(s) in the fields provided under Accept requests from these HTTP referrers (websites). You can enter the http or https version of your domain name, or both, with or without the www. Do not use the wildcard *.wildapricot.org.   https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/0HvEF0JvrbAzeO-nqoE5UOQkaTLd2HGLuxcKmtovC8Q/http referrers-1K4.png
  10. Click the API restrictions tab.   https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/KCeOJ4q-jf9K5cw663gk3sqkqy2f4RuSXnUcCwYUjeg/api restrictions tab-dL0.png
  11. Select the Geocoding API, Maps JavaScript API,  and Places API options then click Save.
    https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/a2GF_WbSxLhAU1D736lyK3w1UHHPbhQhYTV_5tiP6B8/API restrictions selections-eNE.jpg

Now that your Google maps integration is set up, you can add the members location mapping gadget to a page on your Wild Apricot site. Within the gadget settings, be sure to paste the API key you copied above.

It may take up to 5 minutes for your settings to take effect. 

Adding a members location mapping gadget

To add a members location mapping gadget to a page on your site, follow these steps:

  1. Go to Sites pages (under the Website menu) and create or begin editing the site page where you want the members map to appear.
  2. Click the Gadget icon to display the list of available gadgets.
  3. Drag the members location mapping gadget from the list, and drop it where you want it to appear on the page. You can insert it into a section within a layout, or above or below a layout.   https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/w7F9TrozRew1vZOXWbWODay0YqHAJFVPiAKkcNQSmmg/dragging ml gadget-3XM.png
  4. After you have dropped the gadget in the desired location, hover your pointer over it and click the Settings icon.   https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/5xLbJlkxNBSCmTTVKWnPaytL8XRYeKQusBMTZfbUUmg/ml gadget settings-T_U.png
  5. Within the gadget settings on the left, you need to paste the API key you copied above, then choose which members you want to display, choose the address field(s) that determine the location of your members, and decide which fields to display in the pop-up window for each member. For more information, see Gadget settings (below).
  6. Click Save to save the changes to the page.

For instructions on restricting access to the page, see Page access and visibility

Gadget settings 

To complete the set up of your members location mapping gadget, you need to adjusts its gadget settings. Within the gadget settings, you need to paste the API key you copied above, then choose which members you want to display, choose the address field(s) that determine the location of your members, and decide which fields to display in the pop-up window for each member. There are also other optional settings you can adjust.

To display the settings for a gadget, hover over the gadget then click the Settings icon.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/5zjUtEe0eVYHI-p-XzfuI5pDXXy8G_jBL5QHGXCVPhs/members location mapping settings-fPY.png

The following settings are available for members location mapping gadgets.

Members to include

Controls the kinds of members to be displayed on the map. Only members with a membership status of Active or Pending Renewal can be displayed. The following options are available:

All members
Include all members with a membership status of Active or Pending Renewal.

From saved search
Use a saved member search to limit members to those that match the saved search criteria. When you choose this option, you can choose from a list of your saved member searches. This option will only appear if you have a saved member search.

Selected levels
Restrict the map to members at selected membership levels. When you click this option, you can choose one or more membership levels. If you check the All levels option then all levels – including any levels added in the future – will be selected.   

Selected groups
Restrict the map to members belonging to selected member groups. When you click this option, you can choose one or more member groups. If you check the All groups option then all groups – including any groups added in the future – will be selected. 

Show bundle administrator only
Indicates whether to include only bundle administrators and exclude individual members of bundles. 

Member address fields

To specify the location of your members, you can choose one or more address fields from your common fields and membership fields. At the very least, you need to choose one field that includes the country name. The fields you choose should not have their privacy settings set to No access.

All common and membership fields are available for selection except system fields (such as first name, last name, email, phone, and organization), admin only fields, internal use fields, password fields, and fields that use the following field types: picture, date, extra charges, and rules and terms.

Pop-up window

You can choose up to 5 common or membership fields to be displayed in the pop-up window that appears for a member when you click their marker within the map. 

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/eQmEIPh3mrZHCUub0VRWWL26f3vYtFRUpbv2XrgKZS4/map popup-UzI.png

The first field you choose will be used as a link to each member's public profile.

Display map options

You can specify the height of the map in pixels.

Gadget title

If you specify a gadget title, the title will appear specially formatted within the gadget. Depending on the gadget style you choose, the title may appear in a heading box. If you want to add a description under the title, do not enter a gadget title, but instead, create a content gadget with a title and description, and place the content gadget ahead of this gadget.

For Kaleidoscope themes, use a Headline gadget instead of specifying a gadget title.

Gadget style

The gadget style determines the physical appearance of the gadget. The style you choose will determine the color and format of the gadget title, the gadget content, and the gadget border. You can choose from theme-specific styles and styles that are common to all themes. 

Margins

The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately. 

Using the members map

While the gadget is loading the location information for your members, a notice will appear indicating its progress.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/WKQbBMiMbSMbMNi4bJ_GQ6yerFJ6G4CeUFrGTmqYrUU/members location mapping processing-zp0.png

To refresh the gadget so that all processed markers are displayed, visitors can click the refresh icon within the notice.

When visitors to your site first view your map, the map is zoomed out to display all markers. Markers indicate the location of individual members. Multiple markers that appear in the same general area are represented by numbers that indicate the number of markers clustered together.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/AV5d3-R05eYC5SSQASK0WoYt25cdSLPUoniDrnvoy4o/members location mapping-cb4.png

Visitors can click the number to zoom into that area. They can also enter a city, address, or postal code to jump to the specified location.

https://cdn.elev.io/file/uploads/jEC8HySvDwISUdSg8iqChOB9kMRsiM1RCnIFiA0173M/iXBlitm-Kx3CEpnzMd3LvBrjF1PgeH9yBAnv-4VElI4/address search-GoY.png

Visitors can click any of the markers to view a pop-up window displaying the member information you selected within the gadget settings.

They can also click the member's name to view the member's profile and send the member a message.

Setting API request limits and alerts

To avoid excessive charges for API usage, you can set your own smaller limits. Setting your own limits also protects you from someone stealing your API key and running up charges against your Google account. 

Wild Apricot is not responsible for the security of your Google Maps API key or for any charges to your Google billing account.

For instructions on setting API access limits, click here.

Limits can be set per day, per 100 seconds, or per 100 seconds per user.  We recommend the following daily limits:

  • Dynamic maps - 5000 ($0.007 per each, $35 max) These are used each time the map is displayed
  • Geocoding maps - 5000 ($0.005 per each, $25 max)
    These are used to retrieve the geolocation for each contact. This is performed once for each contact and doesn't depend on the number of times the map is displayed. Alternatively, you can set this to the number of members in your association.
  • Autocomplete (per character) - 5000 ($0.00283 each, $14.5 max)
    This is used at least once when a visitor enters a search string in the map's search field. 
  • Places details - 1000 ($0.017 each, $17 max)
    This is used each time search is  performed within Google map

The total impact of these settings is a maximum charge of $92 a day, minus the $200 a month credit.

You can also set up alerts so that you are notified when your account charges reach a certain limit. You might want to set a limit of $200, since that's the amount of the free credit you receive each month. For instructions on setting billing alerts, click here.

Monitoring API request limits

You can monitor and manage your Geocoding API request limits from the Dashboard on your Google Cloud Platform Console.

For more information, see Google Cloud Billing Documentation.

Troubleshooting

One or more of my members are not appearing on the map

  • Check their membership status. Only members with a membership status of Active or Pending Renewal can be displayed.
  • Check their privacy settings for your location fields. If they are set to No access, then that member will not be displayed.
  • Remember, it may take up to 5 minutes for your changes to take effect.

I'm seeing a "Something went wrong" error

  • Check that you entered the URL correctly in the HTTP referrers section when setting up your Google Maps integration.