Adding a Google Map to a Single Record Display

There is now an add-on you can get to add Google maps to Participants Database records and list displays: Location Maps

Google Maps offers an easy way to show a location map without needing to register for and use the Google Maps API. This method is available to websites on a limited basis: if you are operating a high-traffic site, you may not be able to use this method, there is a limit to the number of requests of this type you can make from a single website. Getting access to more requests does require you use the API.

Using a Google Maps Iframe Embed

Showing a Google map as an iframe embed is relatively simple. You will probably need to be comfortable with PHP to customize this further, but even without that you should be able to get it working using this tutorial. I’ve commented the code in the template to help you get what you want out of your map display.

This template is based on the single record Bootstrap template, it simply adds an extra field that shows the map. As to the basic layout of the single record display, I’ll leave to you to adjust as needed, this tutorial focuses on getting your map set up.

Google Map as a Search Result

The idea behind these simple iframe embeds is the “src” value of the iframe includes configuration and search data. The address info is supplied as the search term, and the map shows the result of that search. What this template does is take the address information contained in the record and add it to the src value of the iframe so the map shows the location. You can’t do anything fancy like set the text in the marker balloon, recolor the map, or add custom markers…this is Google Maps at it’s most basic.

In this template, there is a function that takes the address data and constructs the src value for the iframe. Other parameters (such as the zoom level and map type) are set in the function. If you want to adjust these things, you can adjust them in the function where the base values are defined like this:

$gmap_params = array(
    'q'       => $search, // address search
    'mrt'     => 'loc',   // search type: loc = location, yp - business
    't'       => 'm',     // map type: m - map, k - satellite, h - hybrid, p - terrain
    'z'       => 10,      // zoom level: 1 - 20
    'om'      => 0,       // overview map: 1 - show, 0 - don't show
    'output'  => 'embed', // output type
    'f'       => 'q',     // search form type: q - standard, d - directions, l - local
);

You can read up on what these parameters do in this post, there are several options that you will probably want to tweak, depending on what kind of locations you want to show.

To get an idea of the zoom level you want to use, it’s pretty easy to go to www.google.com/maps and set up the view you want. Then take a look at the URL. At the end, you’ll see something like “16z” which tells you the zoom level for the view. You can use that number in the template (without the z) to get the same zoom level in your single record display.

The Iframe Style

The template has a simple set of CSS rules that set the size and style of the iframe. Use these to get the map to the size you want on your single record display. The width should automatically expand to the width of the container, the height you’ll need to set to a specific value.

The Template

Here is the template code, use it like any other custom template (click the link for the details on how to set that up) and it will show the location map for any record that has valid address information. The address info is used as a search, so even incomplete information will give you at least something.

To se that up, you need to tell the template where the address information is stored in the record. At the top of the template is defined the name of the group the address fields are in. Change that to the name of the group you are using to hold your address fields. Further down, in the xnau_gmap_src function, is an array called $address_fields where the list of address fields is defined. Make sure the names in this array match the names of the address fields you are using.

Using Co-Ordinates

Some databases will have latitude and longitude coordinates that can be used to set the map location. You can use these values instead of the address values, just follow the customization instructions above to include the latitude and longitude (in that order…and they must be decimal) in place of the address data.