Posted on by

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.

12 thoughts on “Adding a Google Map to a Single Record Display

  1. Thanks,

    I guess I just misread your last paragraph in this topic. Appreciate it.

    1. Yes, it says you can do that, I forgot about that…and it does work, just make sure the lat and long are decimal and that the latitude is first.

      Send me a link if you can’t get it working.

      1. I am trying to work through it. Would love to send you a link, but it’s an Intranet (Possibly send a snipit). I think it’s time for me to start a fresh template and go back to zero and work at it again. If this fails, I am going to start a new database and run out of the box methods for testing, then customize down.

  2. I just found PDB recently, and really enjoy the great tool and how flexible/powerful it can be. I have customized the DB to more project oriented and create a new group and removed several others to just to keep it clean. I have no problem using the sing or list templates, but I am having problems getting this one to work.

    I have changed the variables listed above to modify the “group” change, and I wanted to use coordinates to populate the query, so I also changed the array to use my lat, long.

    When the page populates, it gives me the single-record and at the bottom it just says “Map” . I don’t get any error messages of any sort as well.

    1. The problem is most likely some kind of error in your template, probably a syntax error. Without seeing the code, I can’t say, but if you don’t see the iframe at all, there is probably a problem with the code that generates the SRC.

      1. I’ve tried several templates now and the same thing. It has to be on me somehow. It’s wild all I did was change

        $group = ‘projects’

        and
        $address_fields = array(‘address’, ‘city’, ‘state’, ‘country’);
        to
        $address_fields = array(‘lat’, ‘long’);

        I am almost to the point of starting a fresh database and testing out the out of box bootstrap and DB.

        1. You can’t just replace the address with a latitude and longitude because it’s expecting a text address there. You can put the lat/long into the “center” parameter….but you’ll also need to use a different URL construction. Take a look at this page, it explains how the Google Maps Embed API works, you can take it from there.

          https://developers.google.com/maps/documentation/embed/guide

  3. Hi.
    I do not work the map, change the location xnau_gmap_src and it works but you can not see the address in the map frame

    1. The address must be complete, and it must be in a form that Google maps recognizes. Make sure all the address information is in the record.

  4. Thank you for information.

    1. Is complete but seeing the code of the source of the page the data is empty:
      src=”https://maps.google.com/maps?q=&mrt=loc&t=m&z=15&om=0&output=embed&f=q”>

      I copy the template code:
      Thank you

      1. you must edit the template on line 78 to match the names of the address fields you are using.

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.

12 thoughts on “Adding a Google Map to a Single Record Display

  1. Thanks,

    I guess I just misread your last paragraph in this topic. Appreciate it.

    1. Yes, it says you can do that, I forgot about that…and it does work, just make sure the lat and long are decimal and that the latitude is first.

      Send me a link if you can’t get it working.

      1. I am trying to work through it. Would love to send you a link, but it’s an Intranet (Possibly send a snipit). I think it’s time for me to start a fresh template and go back to zero and work at it again. If this fails, I am going to start a new database and run out of the box methods for testing, then customize down.

  2. I just found PDB recently, and really enjoy the great tool and how flexible/powerful it can be. I have customized the DB to more project oriented and create a new group and removed several others to just to keep it clean. I have no problem using the sing or list templates, but I am having problems getting this one to work.

    I have changed the variables listed above to modify the “group” change, and I wanted to use coordinates to populate the query, so I also changed the array to use my lat, long.

    When the page populates, it gives me the single-record and at the bottom it just says “Map” . I don’t get any error messages of any sort as well.

    1. The problem is most likely some kind of error in your template, probably a syntax error. Without seeing the code, I can’t say, but if you don’t see the iframe at all, there is probably a problem with the code that generates the SRC.

      1. I’ve tried several templates now and the same thing. It has to be on me somehow. It’s wild all I did was change

        $group = ‘projects’

        and
        $address_fields = array(‘address’, ‘city’, ‘state’, ‘country’);
        to
        $address_fields = array(‘lat’, ‘long’);

        I am almost to the point of starting a fresh database and testing out the out of box bootstrap and DB.

        1. You can’t just replace the address with a latitude and longitude because it’s expecting a text address there. You can put the lat/long into the “center” parameter….but you’ll also need to use a different URL construction. Take a look at this page, it explains how the Google Maps Embed API works, you can take it from there.

          https://developers.google.com/maps/documentation/embed/guide

  3. Hi.
    I do not work the map, change the location xnau_gmap_src and it works but you can not see the address in the map frame

    1. The address must be complete, and it must be in a form that Google maps recognizes. Make sure all the address information is in the record.

  4. Thank you for information.

    1. Is complete but seeing the code of the source of the page the data is empty:
      src=”https://maps.google.com/maps?q=&mrt=loc&t=m&z=15&om=0&output=embed&f=q”>

      I copy the template code:
      Thank you

      1. you must edit the template on line 78 to match the names of the address fields you are using.

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.