See All Features Get Started Join 200,000+ using Formidable Forms to build solution-focused forms!

The Most Advanced WordPress Forms Plugin and Form Builder

/

How to Create WordPress Maps from Form Entries

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

Install Plugins

This tutorial uses two plugins:

If you would prefer a tutorial for integrating the Codespacing Progress Maps plugin, read another blog post about how to embed a Google map with WordPress form submissions.

Create your WordPress Form

First, you need a WordPress 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.

Add a WordPress Map Shortcode

Copy and paste the following code into a new plugin or your theme functions.php file. If you're not sure where to add it, install the Code Snippets plugin. This example 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));
}

Create WordPress Maps View

Now, create a view to loop through your entries and display them on a page. The specific settings for your view 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]"]
mappress
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"]

Publish your Maps

There are a couple of ways you might be publishing: automatically in generated posts, 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]

Comments

  3. Thanks a lot for this post!
    I´ve tried to display more than one marker and already extended the functions.php.

    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.

  4. 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?

    • @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.

      • @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...

  5. 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!

      • 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!

        • 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.)

  6. Hi Stephanie,

    The shortcode appears to work for me on a page without the custom display (ie using the format [form_to_mappress address1="500 chestnut st, phildelphia“]), but if I copy and paste the same shortcode with the hardcoded address (or address made from shorcodes of my form address fields) in the custom display.

    Am I doing something wrong?

    Thanks!

    • *but it does not work if I copy and paste the same shortcode with the hardcoded address (or address made from shorcodes of my form address fields) in the custom display.

  7. i bought F.Pro yesterday, great product, bought mappress pro last night, seems good (although not got it working yet.

    ok, so in my CF of my CT i have:

    id 96 = address (street), 97 = town, 98 = region, 99= country and 100 = postcode.

    i have set Mappress settings to include my CT, BUT, in the mappress settings it says "which field to use for address, well, i have 5, but can only select one, do i need to create a new field that contains a merge of the address fields for mappress to use then in its sidebar widget? thoughts? (also not sure how to create a merged hidden field, ideas?

    also, i then have this shortcode in my post (hard coded for now):

    [form_to_mappress address1="[99]" title="Nice map"] - just get blue map of death

    also tried

    [form_to_mappress address1="[96],[97],[99][100]" title="Nice map"]

    no joy, and that isnt working as when i see the map title it shows the ids so the comma is screwing around with it.

    i am really stumped now. I just want a dynamic shortocde on my posts that a user creates front end 🙂

    boo hoo

    anyone got this working

    Thanks
    Darren

    • When using the shortcode with ids, it MUST be inside a custom display, not on a post page.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

Follow Us

Top Features

Company