Product Support

Locations Map

Shows a customizable Google map with location markers for all your Participants Database records.

Product Setup

First install and activate the plugin. This will add the “Locations Map” menu item to the Participants Database admin menu. Click that item to open the Locations Map settings screen. The first step is to get your API key.

Getting Your API Keys

To use Google maps services, you must have an API key. It’s no big deal: they are free, you just have to have a Google account, and then set up the API access through Google Developers.

  1. Visit https://cloud.google.com/maps-platform/
  2. Click on Get Started, you may be asked to log in to your Google account
  3. Select Maps, click continue
  4. Select or Create a Project: Just create a new project and give it the name of your website
  5. The project will be created, it can take several seconds
  6. Set up billing: Google requires that you have a billing account in case you start to run up charges (you probably won’t…see below)
  7. The Maps API will be enabled
  8. You will then be given your API key. Copy this and paste it into the “Maps JavaScript API Key” setting in the Locations Map settings.
  9. Go to your Google Cloud APIs Dashboard, make sure you have the right project selected, then on the left, select “Credentials.”
  10. To set up the Geocoding API key, add another API key by clicking on the “Create credentials” button. This will be used only for Geocoding, so give it a name that identifies it for that purpose. Paste it into the “Geocoding API Key” setting.

Static Maps require an additional Google Static Maps Signing Secret key. Instructions for setting that up can be found on this page: Generate a Digital Signature

Google Maps Services is Free—To a Point

For each service used, Google provides a limited number of free loads (every time someone loads a page with a map on it, that’s one load). Unless your site has very high volume, it won’t cost you anything to show maps. This plugin uses three Google services: Dynamic Maps, Static Maps and Geocoding.

Every time a page with a dynamic map is opened on your site, it will generate a Dynamic Map load. You can have up to 28,000 of those per month for free. You’d probably have to be getting several thousand visits a month (with them all seeing your map) to hit that.

Static Maps has higher limits: you’ll get 100,000 free map loads per month with those. Static maps lack the user interactivity of dynamic maps, but they are cheap, fast and really all you need for many applications.

Geocoding also has limits, but it’s not used very often. We only need to geocode when a record is created or updated. You’ll get 40,000 of those for free per month.  If you have a lot of records, you might get over that number when you geocode the entire batch, but after that you’re unlikely to hit charges for geocoding.

Get all the details in the Google Maps Pricing Table…

Once you have the API keys in place, you can show the map in your list and single record displays. A detailed explanation of the plugin’s settings is found under the “Settings” tabs here.

Dynamic Maps or Static Maps?

You should decide whether you need to use Dynamic Maps or Static Maps. They are used differently and result in a different display…here are the pros and cons:

Map Type Pros Cons
Dynamic
  • user interactivity like zoom, panning, street view, change map type
  • location markers
  • info popups on markers
  • more appearance control
  • fewer free loads
  • can take longer to load when viewed
  • more complex display could be confusing or distracting
Static
  • loads instantly, no javascript
  • simple display
  • location markers
  • lots of free loads
  • no user interactivity
  • less responsive: you must define dimensions
  • less control over appearance
  • no marker info popups

Placing Dynamic Maps

Dynamic maps can be placed automatically, without the need for custom templates, by selecting a location in the list or single record displays using the Automatic Map Placement settings. In the list display, the map will show in the selected location (top or bottom) with markers for all the records shown in the list results. A search result will show a repopulated map with markers for the result set.

The map for the single record shows a marker for the location of that record.

Dynamic Map Shortcodes

If you want to just show a Dynamic map with it’s markers, they can also be shown with a shortcode. Don’t use these shortcodes to add a map to the list display, they are for showing a map on it’s own.

[pdb_listmap] shows a map with all your located records as markers. You can use the “filter” attribute in the shortcode to determine which records are included or excluded.

[pdb_singlemap] shows a map for a single record with a marker for it’s location. You will need to access it’s page using a ?pdb=id type of URL (typically, by using the “single record link” in the list display), so that the shortcode knows which record to show. Or, if you are a coder, you can use it in a custom template and set the record id in the shortcode, using the ‘record_id’ attribute.

Dynamic Map Templates

Dynamic maps can also be displayed using a custom template. The add-on comes with two example templates for showing a dynamic map: pdb-list-dynamicmap-default.php and pdb-single-dynamicmap-default.php You can use them as-is or use them as a starting point for your own custom templates.

If you are already using a custom template, take a look at these examples, you’ll see it’s very simple to add a map to a template.

Placing Static Maps

Static Maps are used in three ways: as a custom form element, the [pdb_list_static_map] shortcode or using a special template.

The Static Map Form Element

Setting up the map as a Participants Database field is convenient if you want to show a small map in a list display or you want the map to be part of the single record display.

Static maps must have their width and height set beforehand. If you don’t define the width and height in the field definition, it will use the global map height setting for the width and the height (resulting in a square map).

You can set several parameters in the field definition to set up your map:

  • ‘width’ sets the width, in pixels for your map display
  • ‘height’ sets the height in pixels
  • ‘located_only’ when set to true will only show a map if the record has been located (i.e., has latitude and longitude data)
  • ‘zoom’ sets the zoom level of the map; if omitted, the zoom level is determined by the global zoom setting
  • ‘maptype” can take one of 4 values: roadmap, satellite, terrain, hybrid and determines the type of map display to use
  • ‘center’ allows you to set a default center for the map: if there is a marker present, it will center on that marker. You must use the | (pipe) character instead of a comma to separate the latitude and longitude values. 


For example: this field is configured to show a map of width 650 pixels wide by 500 pixels in height, showing a hybrid map centered on San Francisco.

Note: map sizes are limited by your Google API plan type. Normally, this is 650 pixels, but if you upgrade your plan, you can get up to 2048 pixels. Details here…

You can manage the appearance like any other Participants Database field. If you want the map to show up in your list display, make sure the map field is configured to do so. For single displays, it will appear like any other field.

Map fields do not display in signup forms or record edit forms.

The [pdb_list_static_map] Shortcode

This works much the same as the [pdb_listmap] shortcode, only it shows a static map. The shortcode uses the ‘width’ and ‘height’ attributes to set up the dimensions of the map display. You can use these attributes in the shortcode:

  • width – in pixels
  • height – in pixels
  • zoom – sets the base zoom level of the map
  • center – longitude | latitude for the center of the map, defaults to auto-centering the map on the markers
  • maptype – can be roadmap, satellite, terrain, or hybrid

The Static Map Template

This add-on includes a special template for showing all your record markers in a static map. If you need to set up a custom list template using a static map, you can use the included pdb-list-static-map-default.php template as your starting point or as an example of how to include the map.

To use the static map template in your list shortcode, use a shortcode like this: [pdb_list template="static-map-default"].

Configuring the Appearance of the Dynamic Map

There are several preferences for determining how the dynamic map will look. First, you can select the Map Style, which is the color scheme of the map. There are several available, and it is possible to create your own color scheme if you want.

The Map Height setting sets the size of the map display. The map will always try to be as wide as possible, filling the available horizontal space. It is necessary to give the map a specific height to determine how much vertical space it will take. The usual size is around 300 pixels, this will look good on most handheld devices. You don’t want to try to show a map that is larger than the screen size of the device since the user can scroll within the map window.

Map Controls determine what the user can do with the map. You have several controls that you can enable or disable depending on your needs. It is probably a good idea to have as few of these enabled as possible to avoid unneeded clutter in the display.

Each location is marked on the map with a Marker Icon, you can select the type of icon and color.

Marker Info Pop-Ups show information from the record when the marker is clicked on or hovered over. You can configure the content of the info box: it’s possible to put pretty much anything you want to show in there, the template gives you a way to determine which fields are shown and how they are laid out in the box.

Geocoding

Most of the time, your records will have an address that defines its location. Geocoding takes this address information (from anywhere in the world!) and converts it to the latitude and longitude values needed to place the marker on the right spot on the map.

You’ll need to tell the plugin which fields are your Address Fields, it uses the data in those fields to determine the location. It’s possible to locate markers with partial information, such as a state or city, but it will be more accurate with a complete address.

If your records already have latitude and longitude data, you don’t need to use geocoding, just make sure the Latitude and Longitude Field settings tell the plugin where to find that info.

Mass Geocoding

If you already have a records when you set up the map plugin, you’ll want to geocode those so that their markers will be placed. The Geocode All Records button does this for all the records in the database. The operation takes place in the background, so once you start it, you can do other things. You’ll need to refresh the page after a few minutes to see the results of the operation.

API Key Restrictions

API keys should be restricted to prevent their use by others. Key restrictions will only allow the website that is authorized to use them to gain access to the API and its services.

For our purposes, there are only two kinds of restrictions we are concerned with: “HTTP referrers” and “IP addresses.” HTTP referrer restrictions are for requests from the client side, and so this includes Dynamic Maps and Static Maps. IP address restrictions are for requests directly from the web server to Google: this is what the Geocoding API needs. Here is a handy chart:

Plugin Feature Google API Restriction to use
Dynamic or Static Maps Maps JavaScript API HTTP Referrer
Geocoding (Location Markers) Geocoding API IP Addresses

Setting Up Restrictions

HTTP Referrer restrictions should contain the domain name of your website. If you want to use the same key on multiple sites, you can add more domains. It’s a good idea to use wildcards in the setting…for instance, for this site, I would use: https://*.xnau.com/* so it will cover all subdomains and paths in the site.

IP Address restrictions require that you know the IP address of your web server. You can usually find this on your hosting control panel, or you can just ask your web host. In some cases, there are multiple possible IPs that your server could use, so you should add all of them to the restrictions setting for the API key.

Product Settings

Google Maps API Settings

Maps JavaScript API Key

You must have an API key to use Google’s map service. Instructions for getting your API key are found under the “Instructions” tab.

Geocoding API Key

If you are using restrictions on your API keys, you will need to use a different API key for Geocoding. Without restrictions, you can use the same key for both. Restrictions are optional, but it is recommended you set them up to prevent your API keys getting misused.

Google Static Maps Signing Secret

This key is optional, and you’ll only need it if you’re using Static Maps and want to increase the number of free loads you can have. More information on digital signatures here…

General Map Settings

Default Zoom Level

Normally, the map will auto-zoom to include all the markers. If the map has no markers, this is the zoom level to use. This also works as a minimum zoom level so that your maps won’t be zoomed in too close if there is only one marker or they are all clustered in a single location.

Details that would be seen at several example zoom levels:

  • 1: World
  • 5: Landmass/continent
  • 7: Country
  • 10: City
  • 15: Streets
  • 20: Buildings

Default Location

The center of the map is normally determined by the markers. If there are no markers, this location will be used as the center of the map.

Map Height

All maps require a height setting. Choose a value in pixels that looks good in the normal display you are using. This value can be overridden by individual maps. The maximum size available here is 650 pixels, unless you have a premium Google API plan.

For dynamic maps, the width of the map will be determined by the display, so it will be responsive to the viewing device screen. Static maps require a fixed width value, which is set in the configuration of the static map. Static maps can be made responsive with appropriate CSS, your responsive theme may take care of that for you.

Marker Icon

Choose the style of marker icon from a preset list of icons.

Custom Marker Icon

If you want to use a custom icon, put the URL to it here. This means it needs to be hosted on a server. The easiest way to do this is to upload the image to your site’s media library. To get the URL, open the image in the media library editor, then copy the URL for the image (seen in the upper right of the edit screen).

An icon should be a 32×32 pixel PNG with a transparent background.

Dynamic Map Features

List Display Automatic Map Placement
Single Record Automatic Map Placement

This selection inserts the dynamic map in your List or Single Record displays in the location specified.

This will be active in all single or list displays. If you need to selectively display a dynamic map, you must use a custom template. The plugin includes some default custom templates which you can use as-is or as a guide to creating your own.

Map Style

This chooses a color scheme for your map. There are several built-in ones to choose from, or you can build you own. See the “Custom Map Style” setting for details.

Map Controls

Dynamic Map Controls

There are several different controls available to users on a dynamic map. This setting lets you decide which ones will be available. Note that this can’t prevent users from zooming and panning using their keyboard and mouse, all this does is hide or show the specific on-screen control.

Enable Marker Info Pop-Up

Checkbox to enable/disable informational pop-ups for markers. These pop-ups show information from a record when its marker is clicked or hovered over.

Marker Info Show Action

Determines the action that will show the informational pop-up: click, the marker must be clicked on or hover, the info box for each marker is shown as the pointer hovers over it.

Marker Info Template

This mini-template determines which pieces of information will be included in the informational pop-up and how it will be formatted. It uses the same “value tags” as available in Participants Database email templates. Each tag will be replaced by the record data in the named field.

You can use simple HTML in the template, but it may break if you try to put too much in there.

Custom Map Style

Here is where you can add your own custom map color scheme. You’re expected to paste a valid JSON object, an error will result if there are syntax issues with the JSON object.

There are several online services that make developing your own map style fairly easy.

These services will all generate the JSON for you: just copy and paste into the custom map style to use it.

Geocoding

In order to place markers on a map, it is necessary to know the coordinates for each one. In most cases, your records will have an address of some kind. Geocoding is the process of taking a descriptive address of a place and converting it to the geometric coordinates of the place on the globe: the latitude and longitude.

Enable Auto-Geocoding

When enabled, a record is automatically geocoded when it is created or edited. You can disable this if your records already contain latitude and longitude information.

Address Fields

To geocode a place, we need the address information. This setting tells the geocoder which fields to use to find the coordinates. The address can be a mailing address or any other kind of descriptive address that is normally used. The address can be incomplete (for instance, just a city or even a country), the geocoder will place the coordinates as accurately as it can using whatever information it is given.

For example, if you give the geocoder the only name of a city, it will place the marker in the center of that city. If given a locality (such as “Hell’s Kitchen”) it will place it in the center of that locality, so even if your records don’t contain complete addresses, markers can be meaningfully placed.

Latitude Field
Longitude Field

Select the two fields where this information is held in your records. Normally, the plugin will add these fields and you won’t have to change this setting. If your records already have coordinate fields, you can set those here so the plugin knows where to get the information to place the marker.

Geocode All Records

When you first set up the plugin, you will probably need to get the coordinates for all the records that are already in the database. This button will start the process of geocoding all of your records.

It does this in the background, so you won’t see much happening until it is done. Refresh the page after a minute or two to see the results of the bulk geocoding operation.

Remember, there is a limit to the number of free geocoding requests you can make, and if you have a large database you could easily reach that limit if you perform this operation multiple times. You should only have to do this once.

F.A.Q.

My records won't geocode, I just get the "Processing complete. 0 records geocoded." message when I try to geocode my records.

There are several things that could be going wrong here, so here is a checklist of things to verify:

  1. API Keys: Make sure you are using the correct key and that the key is set up for the correct APIs. The keys should be set up on the Maps JavaScript API and the Geocoding API. You must have a valid billing account set up with Google for the key to work.
  2. API Key must be valid for the domain making the request. This will be under the “restrictions” for the key. If it is unrestricted, it will also work.
  3. If the keys are restricted, you must use a separate key for the Maps JavaScript API and the Geocoding API. The JavaScript API must use HTTP Referrer restrictions and the Geocoding AP must use IP Address restrictions. Make sure these restrction settings are correct. If you turn the restrictions off, and then it works, you know the restriction settings are not correct.
  4. If you have Participants Database debugging on, you may see pertinent information on the geocoding attempt. For example you may see pdbgmap\geocoder::geocode request failed with status: REQUEST_DENIED which indicates a problem with the API Key.
  5. Check the Geocoding Address Fields setting. This must be a comma-separated list of valid field names. Do not include any non-address fields. For example:
    address, city, state, country
  6. Your records must have enough valid data in the address fields to locate the record. Check a single record with a good address, it should geocode when saved so you can see if that record is working and make any changes to get it working. Even just a country and city is enough to place a pin. If you find it geocodes with just the city and country, then maybe something about the street or house address is confusing. There is a Google geocoding tester you can use to see if you’ve got a readable address.
  7. If after you’ve verified the first 3 items on this list and your address tests OK on the geocode test page, you still can’t get it to geocode your records, it can be helpful to do a little debugging. In the Participants Database settings under the advanced tab, select “plugin debug” in the Enable Debugging setting. Now attempt to geocode your test record in the backend record editor (you only have to save the record to do this). The log (debugging log item in the Participants database admin menu) will tell you what errors happened during the geocode process. Most of the time, the problem is with the API keys. Setting up the keys is a bit complex and everything has to be correct for them to work.
I'm using Locations Map with Combo Multisearch, and the map shown in the list doesn't update to show markers for the search results.

Make sure you are using the latest versions of both Participants Database and the Location Map plugins, there was a bug in earlier versions that prevented the map fields getting updated when using Combo Multisearch.

Don’t try to use the [pdb_listmap] shortcode to display the map on a page that has the

First Name Last Name Club Role City State Main Activity Photo
bob samson
junaid Tahir Guest Birmingham District Of Columbia Photography
Gregg Klopper
Kate Millane
Karl Laas
Werner Burgwald
dakota geffre
Jane Onorati
xoba xanu
Ganesan Raja

shortcode with a search…they won’t be in sync. If you want to show a searchable list and a location map that follows the search results, it is best to use the “Map Auto-Placement” feature or the dynamic map list template for that.

Another approach is to use a custom template. While Locations Map does include a list template that adds a dynamic map, for Combo Multisearch, you need to combine the template that Combo Multisearch uses and the Locations Map one.

I have put such a template together, it is available here…

Take a look at the linked page if you are unfamiliar with the use of custom templates in Participants Database.

I'm using the "auto list placement" and the map doesn't update when a search is performed.

This is a limitation in the current version of the plugin. You can’t use “AJAX Searches” with the List display auto placement, the map doesn’t update.

There are two solutions to this, you will only need to use one of them:

  1. Turn off “Enable AJAX Search Functionality” in the Participants Database advanced settings.
  2. Use a custom template instead of the auto placement…for example:

    Search:




    First Name Last Name Club Role City State Main Activity Photo
    bob samson
    junaid Tahir Guest Birmingham District Of Columbia Photography
    Gregg Klopper
    Kate Millane
    Karl Laas
    Werner Burgwald
    dakota geffre
    Jane Onorati
    xoba xanu
    Ganesan Raja

Support Discussions for Locations Map

  • Hi Roland,

    Thank you for this great add-on. It works fine also on mobile, great!
    We only have one question, we have three groups and use the multiple database solution.
    But the link in the map is referring to the other fields of the database, so it is linking to the standard Single record. Is there a solution for this, so that we can link to the correct one?

    Kind regards,
    Simone

    • If you are using the [pdb_listmap] or the [pdb_list_static_map] shortcode, you can add a filter attribute to the shortcode so you can control which records are shown. This page explains how to use the shortcode filter:

      List Shortcode Filters

      • Thanks for your quick reply.

        I already managed to filter the records on the map (see URL i put into the field website)

        But my problem is that the records on the map link to the standard [pd single] view of the group “Vertellers” and not to the fields that belong to the group “vertelpodium”.

        I hope you understand my problem, let me know if you need more information.

        • There can be only one destination for the single record link, so you need to use a custom template to show a different shortcode depending on what type of record it is. Take a look at this article, it is for a different purpose, but the technique is the same for the [pdb_single] shortcode;

          Showing a Record Edit Form Based on a Value in the Record

        • Thank you! It works now for al the groups with the custom template, great!!

  • Roland,

    Thanks very much for the integrated maps add-on, this is something I have been wanting for some time.

    I am having a couple of teething problems:

    1. The Marker Info Template in Settings does not seem to be updating after editing, ie I am getting the original fields showing and not the updated fields.

    2. I am having some difficulties displaying the auto list map using Safari on my Mac. It displays fine when used “Below” the listings, but when “above” the map flashes on then immediately goes blank.

    Hope you can help with both these issues

    Malcolm

    • Hi Malcolm,

      I’m aware of these issues and have fixes for them in the next release.

      For your first issue, try turning on the “Show Count” preference in the main plugin settings under the list tab.

      The second issue is due to marker caching, you need to save a record (don’t have to change anything, just save it) to clear the cache, then your changes to the marker template will be used.

  • Aloha! Shaka Brah

    Dear Roland, what a wonderful product. It’s exactly what I need.
    However,
    Although the Google API’s and restrictions are working OK (records are being geocoded) and all setting in your plugin are set in the right way I am stuck in the development process for this website. For a reason I don’t know, the [pdb_listmap] doesn’t show anything other than ‘blue sea’; It doesn’t seem to recognize the request, while when I manually execute https://maps.googleapis.com/maps/api/geocode/json?address=Krammer+118+3232+HE+Brielle+Nederland&key=AIzaSyCTzstiuFLVaVBLnAnXQbybxinoQRK9Z-s the info is displayed in my browser. [pdb_listmap] result in no marker and no zoom. Even the default address isn’t displayed. And that’s all very strange, because other Google Maps on the website (e.g. event-calender-pro) work fine.
    I’ve spent some time now to figure out what;s going on. But I cannot find the cause.
    I’ve used the debugger: I would like to upload the listing, but I can’t because the form doesn’t allow and it’s to big for the body text.

    Would you be so kind to have a look what’s wrong here?

    If needed I’m happy to give you access to the backend as the website is in currently in development and behind a maintenance screen.

    Warm regards,

    Eleonora

    • You can share a link to the configured but non-working map privately with me at support@xnau.com I’ll take a look at it on the frontend, that will likely tell me what the issue is.

Got a Support Question?

You have to agree to the comment policy.