Create Maps from Form Entries

Blog → Tutorials → Create Maps from Form Entries
January 20, 2012 · 13 Comments

MapPress is a free plugin that creates Google maps. You may have a form that collects address information that you want to generate a map from. This is handy with business listings, real estate listings, and many others.

  1. Install plugins. If you haven’t already, you need to install Formidable Pro and MapPress. The pro version of Formidable is needed for the custom display feature.
  2. Create your form. First, you need a form to collect the addresses you want to use in your maps. You can use any number of fields for your address that you would like. One field for the whole address, or multiple fields to separate out the city and state.
  3. Add a new shortocode. Copy and paste the following code into a new plugin or your theme functions.php file. If your not sure where to add it, put it add the very end of your functions.php right before the ending ?> if there is one. This doesn’t need any modification or changes. 
    add_shortcode('form_to_mappress', 'form_to_mappress');
function form_to_mappress($atts) {
     extract(shortcode_atts(array(
	      'width' => 600, 'title' => '', 'body' => '',
              'address1' => '', 'address2' => '', 'directions' => 'none'
     ), $atts));

     $mymap = new Mappress_Map(array("width" => $width));
     $mypoi_1 = new Mappress_Poi(array("title" => $title, "body" => $body, "address" => $address1));
     $mypoi_1->geocode();
     $mymap->pois = array($mypoi_1);
     if($address2 != ''){
       $mypoi_2 = new Mappress_Poi(array("address" => $address2));
       $mypoi_2->geocode();
       $mymap->pois = $mypoi_2;
     }
     return $mymap->display(array('directions' => $directions));
}
  4. Create your custom display. Now, create a custom display to loop through your entries and display them on a page. The specific settings for your custom display don’t matter. In the spot you would like to insert your map, use the new shortcode you just created above.
    [form_to_mappress address1="[25]” address2=”[26]” title=”[27]” body=”[28]” width=300 directions=”google”]
    [25], [26], [27], and [28] should be replaced with field IDs or keys for your form using the dropdowns above the content/dynamic content boxes. If you only want a single point on the map, your shortcode might look like this: [form_to_mappress address1="[25]“]

    The “directions” parameter accepts “inline”, “google”, or “none”. Choose “inline” to include a link in each map marker for directions or “google” to display a directions window from Google.

    Or, if you are using multiple fields to collect your address information:
    [form_to_mappress address1="[25], [31], [32]“]
    [25] = Address line
    [31] = City
    [32] = State

    This shortcode will work independent of Formidable as well if you want to hardcode an address.
    [form_to_mappress address1="500 chestnut st, phildelphia" width="400" title="DC" body="Beautiful Washington, DC"]

  5. Publish. There are a number of ways you might be publishing: automatically in generated posts, automatically using the settings in the custom display, or by inserting the shortcode on a page. If you are inserting the shortcode, you MUST include a parameter to tell Formidable to run the content through WordPress filters, filter=1.
    [ display-frm-data id=x filter=1]
Filed Under: Tutorials

Comments

  1. tom_streeter says:
    January 22, 2012 at 9:22 am

    I believe there’s a typo in the code.

    extract(shortcode_atts(array(
    ‘width’ => 600, ‘title’ => ”, ‘body’ => ”,
    ‘address1′ => ”, ‘address2′ => ”, ‘directions => ‘none’
    ), $atts));

    There is a missing single-quote after [directions] in ‘directions => ‘none’

    Reply
  2. ovm71 says:
    January 22, 2012 at 7:15 pm

    Great post. Thanks. In the shortcode, what does…

    title=”[27]” body=”[28]”

    refer to?

    Reply
  3. Stephanie Wells says:
    January 23, 2012 at 9:19 am

    @tom, thanks for the correction. That’s been updated above.
    @ovm71, I’m not really sure what those are for. Please refer to the MapPress documentation or just try them out to see where they are used on the map. It uses title=”DC” body=”Beautiful Washington, DC” as examples.
    http://wphostreviews.com/mappress-documentation

    Reply
  4. deeluuxe says:
    January 24, 2012 at 10:21 am

    Thanks a lot for this post!
    I´ve tried to display more than one marker and already extended the functions.php like you described in http://formidablepro.com/help-desk/can-i-integrated-with-mappress/#frm_topic_29250

    Unfortunately only one marker is being displayed. On the individual display I placed the following:

    Before the content:
    [form_to_mappress

    Content:
    address1= "[81] [82],[84], [85]” title=”[83]” body=”testing 1-2-3 id=[id]”

    After the content:
    width=600 directions=”google”]

    Questions:
    - What am I doing wrong? Maybe add a counter so variables address1, address2, address3 are being generated independent from [id], because when deleting an entry this display might be lost?
    - can I set individual titles and bodys for every entry?
    - I´d like to have different icons for some entries… ;-)

    Hope this can be done with this solution – it´s my goal to display up to 100 entries on one map. Also contacted Chris (developer of MapPress) for extending the plugin.

    Reply
  5. lynnr321 says:
    January 25, 2012 at 7:01 am

    Stephanie,
    The Pro version of MapPress includes a Map Mashup. Yeah! Just what I’ve been waiting/looking for! Do you see any reason why the mashup feature wouldn’t work with FormidablePro? Would it be possible to get a demo of how to do that? Is the plugin code any different than shown above?
    I am currently using GoogleShortcode with my forms, as previously suggested, as the mashup/global feature is not nearly as straighforward as this one, I’d like to change it. Any tips, shortcuts or things to watch out for when making the switch?

    Reply
    • Stephanie Wells says:
      January 25, 2012 at 7:34 am

      @lynn, We are not MapPress experts and have not used their pro version. You’re welcome to try it out and let us know how it goes.

      Reply
      • lynnr321 says:
        January 25, 2012 at 1:58 pm

        @Stephanie- Working on it with Christopher (MapPress), but as you know my coding skills, although gaining daily, are still at a novice stage. If I can get it to work, I will post it back here. Stubborn is a quality, right?
        Wouldn’t this be an awesome ‘Add-on’ for FormidablePro? :) Thanks and stay tuned…

        Reply
  6. Jeff Smith says:
    February 7, 2012 at 12:37 am

    Where exactly do you put the shortcode for this feature? (see below) How do you copy the code into a new plugin? And/or where exactly does it go inside the functions.php file (between what brackets, etc.). Tiny HTML experience here…

    Add a new shortcode. Copy and paste the following code into a new plugin or your theme functions.php file. This doesn’t need any modification or changes.

    Thanks!

    Reply
    • Stephanie Wells says:
      February 7, 2012 at 4:44 pm

      Instructions updated above with a little more detail.

      Reply
      • Jeff Smith says:
        February 9, 2012 at 12:43 am

        OK, great thanks. It looks like I got it, but now it’s not reading the addresses from the form and I’m getting a blank blue google map. 350=address, 349=city, 348=state, 351=zip.

        [form_to_mappress address1="[350], [349], [348], [351]“]

        I also tried just doing one field for the whole address but got the same blue google map.
        [form_to_mappress address1="[344]“]

        I have this is in the Dynamic Content of the Custom Display. Am I missing a connection somehow?

        Thanks!

        Reply
        • Jeff Smith says:
          February 9, 2012 at 8:52 am

          I took out the brackets from the code but it still did not work.

          Reply
        • Stephanie Wells says:
          February 10, 2012 at 11:23 am

          Please try adding the shortcode directly on a page without the custom display for starters. Some addresses may not be recognized without the exact formatting that MapPress is expecting.
          [form_to_mappress address1="500 chestnut st, phildelphia“]
          (Replace the address with the one you are trying to create a map for.)

          Reply

Speak Your Mind

*