Charitable Geolocation

Installing Charitable Geolocation is the same as installing any other Charitable extension. If you’re not sure how to do that, we recommend first reading our guide to installing Charitable extensions.

Setup

The Geolocation feature is built on Google Maps and requires a Google Places API Key to work. To create an API Key:

1. Go to https://developers.google.com/places/web-service/
2. If you have not logged in already, log in to your Google account.
3. Click on the Get a Key button at the top right of the page.
4. A popup will appear allowing you to select an existing project or a new project. Unless you already have a project for your website, select “+ Create a new project” and click on Next.
5. Copy the API key and store this for the next step.

Next, open up your WordPress dashboard:

1. Go to Charitable > Settings > Extensions.
2. Paste in the API key you generated previously into the Google Places API Key field.
3. Click on Save Changes.

Usage

Adding a Location to a Campaign

Once the plugin is setup, you can add a location to a campaign by editing the campaign in the WordPress dashboard. You will see a new Location tab in the advanced campaigns settings area:

Type in an address or location for your campaign (it must be at least 8 characters long) and click Update to save the campaign.

Charitable Ambassadors integration

After installing the plugin, a new Location field is automatically added to your public campaign submission form.

Adding a Campaigns Map to a Page

Once you have set locations for your campaigns, you can add a Google Map displaying your campaigns by location, using the [campaigns] shortcode.

To display the campaigns on a map, simply add map=1 as a shortcode attribute. You can also set the width, height and zoom level of the map. Example:

[campaigns map=1 width=900px height=600px zoom=5]

Read more about using the [campaigns] shortcode.

Troubleshooting

If you find that your maps are not loading as expected, there may be a problem with your Google Places API Key. To troubleshoot this, you can view what the specific error is by opening your browser’s Javascript console. If you’re not sure how to open your browser’s Javascript console, you can follow these instructions.

Error messages in the Javascript console will start with “Google Maps API error” and will include the specific error code and a link to find out how to fix the issue. An example is shown below: