Google Maps Meets Formidable Pro

As we increasingly orient towards mobile in eLearning and web development, geo-location is a feature that appears in our work more often.

This can take many forms, from an xAPI-based mobile eLearning app that awards accomplishments or badges based on the user’s location, to the relatively simple integration of maps and locational data into websites and eLearning modules.

This post outlines a simple solution for a problem that that many developers and site-builders encounter: Adding a Google Map to a directory listing and determining the map view based on an address field.

Integrating Google Maps into Formidable Pro Views

We use the WordPress form building plugin Formidable Pro a lot in our website and eLearning work, and find it flexible, powerful and easy to use.

Formidable Pro has a lot of high-quality add-ons available, but these do not currently include a free Google Maps integration that will pick up an address from a field in a form and render the map location in a View of the form entries (There is a sophisticated commercial add-on, Formidable Geolocation from Geo My WP that solves several geolocation problems, including this simple case, but we decided to try a manual approach to integration, rather than introducing a more complex commercial option.)

The support threads and posts on how to create an integration often refer to Google Maps WordPress plugins that either are discontinued, or that have changed in ways that break the integration. We experimented with the approach documented by Michael Davis, but found that none of the plugins discussed were an option, as all were discontinued or now required coordinates instead of a street address to generate the map.

After some experimentation we found a Google Map plugin that plays well with Formidable Pro: Responsive Styled Google Maps, a commercial, but inexpensive plugin that is available from CodeCanyon for $12 USD. There is also a more limited free version in the WordPress repository that might work as well, though we have not tested it.

The Recipe

Here is the procedure we followed:

  1. Download and install the plugin. This is a straightforward, typical install. Once activated, the plugin is available from Setting > Responsive Styled Google Maps Helper.
    Responsive Styled Google Maps
  2. Get your Google Maps API key. The Google documentation will help you navigate though this process. We highly recommend locking down your API key to the domain you will be using it on, to prevent any abuse of the key. The Google docs linked above will guide you though the process.
  3. Once you have your key, enter it in the RSGM settings:API Key Needed
    You can leave the address at the default, since you will be replacing it with Formidable Pro field IDs .
  4. Pick your map pointer, and set as many of the other options as you wish in the extensive controls:Lotsa Controls
  5. Once you have set the options you want, copy the shortcode:Shortcode Example
  6. Go to the Formidable Pro view that you want to display the map on. Formidable Pro is a well documented and versatile forms system, that allows you to create custom ‘views’ to display data collected in your forms. In our case we are creating a directory, so we built a View with a list of businesses, each of which links to a details page that will include the map with a pointer for the location. As shown in the next step, I pasted the Responsive Styled Google Maps shortcode into a div at the bottom of the listing.
  7. Now comes the fun part! Substituting Formidable Pro fields for the fixed content in the shortcode.In this case the Street and City codes – [74] and [76] in my particular form –are substituted for the fixed address generated by the plugin. In addition, the description that appears when the user clicks on the pointer is also customized, by substituting the field codes for the business name – [83] and conditionally for the phone number if one is listed [82].
  8. The result is a Formidable Pro View showing the location of the business based on the street address collected in the form.Working Formidable Pro and Google Map integration.

 

An alternative to basing the display on a street address would be to collect latitude and longitude coordinates in the form.  These would be more reliable than street addresses, but would only be practical in a situation where you are already collecting coordinates for your database – when preparing a view for back country recreation or scientific research, for example.

Have you integrated Google Maps into Formidable Pro or other forms tools? If so, please share your solution in the comments!

Leave a Reply

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

Some of our happy customers...