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:
- MapPress
- The forms and views in Formidable Forms Pro
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]"]
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]
Great post. Thanks. In the shortcode, what does...
title=”[27]” body=”[28]”
refer to?
@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
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.
Deeluxe and others wanting a global/or map mashup,
Here is the link for my feature request with Chris Richardson, the developer of MapPress. http://wphostreviews.com/forums/topic/mappress-and-formidableforms-pro-pre-purchase-question.
Maybe if we all ask nicely and promise to support his premium plugin, he'll move it to the top of the 'to do' list? Add your request to my forum request at the link above.
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...
is there anyone who has a demo on how the mash-up will work with mapress?
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!
Instructions updated above with a little more detail.
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!
I took out the brackets from the code but it still did not work.
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.)
After less than an hour I found this plugin "Walk Score" http://wordpress.org/extend/plugins/walk-score/ and it's working great with the formidable pro, It has a mash-up functionality.
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.
It just shows the form_to_mapress shortcode on the post using the dynamic display
Please add filter=1 to your custom display shortcode (not the form_to_mapress shortcode). This should tell your custom display to interpret [ ] as a shortcode rather than just text. For example: [display-frm-data id=x filter=1]
here is more info on that: https://formidableforms.com/knowledgebase/publish-a-view/
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.