The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk

Example: Comprehensive Google Map Plugin - map showing location of all form entries

Labels

This Discussion is public

Notifications

Challenge: Display a map with a marker for each entry /record / row of a form's database

Solution: Use Formidable Pro Custom Display in conjunction with Comprehensive Google Map Plugin

Plugins required:

 

Primary limitations:

  • Special characters: Form fields that are displayed by Comprehensive Google Map Plugin can *not* contain special characters such as # ( ) < > [ ] { } *** (Note: Use the generic form validation function sample code provided here on the forum to validate form entries and prevent special characters in the form's database. validation function here: https://formidableforms.com/help-desk/example-generic-form-field-validation-function/ )
  • No ability to format map marker info box content. This is a limitation of the current version of Comprehensive Google Map Plugin. You can mitigate this somewhat by limiting what you display in the info box to a link to the Dynamic detail, which you have full control over: content, formatting, etc.
  • Dummy record: Comprehensive Google Map Plugin uses the "|" character as a record delimiter. The "|" character is the last entry in the FMP Content area and the Comprehensive Google Map Plugin expects one, last final location to display. This dummy location is the first entry in the "after content" area.

 

There are two basic things to setup for this solution:

  • Comprehensive Google Map Plugin
  • Formidable Pro

 

For Comprehensive Google Map Plugin you need to:

  • Install the plugin
  • Set the main options for the plugin
  • Generate the shortcode for your desired map. You will copy and paste sections of this generated shortcode into the Formidable Pro Custom Display.

 

See the documentation provided with the Comprehensive Google Map Plugin for information on how to perform these steps.

 

For Formidable Pro, you need to create:

 

*** Note: You must insert your own form's field IDs or Keys into the Custom Display. The sample field IDs and Keys provided here will not work for you. ***

1. First, create a form. This sample uses an event form.
2. Then, using Formidable Pro Custom Displays:

Use Entries from Form:
Select your form

Display Format:
Both (Dynamic)

Detail Link:
Paremeter Name: event-name
Parameter Value: Key

Before Content:
[google-map-v3 width="580" height="350" zoom="12" maptype="roadmap" mapalign="center" directionhint="false" language="default" poweredby="false" maptypecontrol="true" pancontrol="true" zoomcontrol="true" scalecontrol="true" streetviewcontrol="true" scrollwheelcontrol="true" draggable="true" tiltfourtyfive="false" addmarkermashupbubble="false" addmarkermashupbubble="false" addmarkerlist="

Content:
[if 170][170],[171]{}1-default.png{}***** #[detaillink clickable=1] Click Here For Event Details# ***** Event name: [148]; ***** Event start date: [155];|[/if 170]

After Content:
39.069313,-95.688965{}1-default.png{}False event used by mapping system" bubbleautopan="true" showbike="false" showtraffic="false" showpanoramio="false"]

Dynamic Content:
<hr>
<strong><p class="none"><a href="http://pccorner.staging.wpengine.com/papercraft-events-map/" title="Return to Events Map"><-- Return to Events Map</a></p></strong>

<strong><p class="none"> Event Name:</strong> [event_name]</p>
<strong><p>Event Start Date:</strong> [event_start_date] <strong>Event End Date:</strong> [event_end_date]</p>
<strong><p class="none">Event Cost:</strong> [event_cost]</p>
<strong><p class="none">Event Location:</strong><br class="none" />
[if event_location_name]<DIV STYLE="padding-left: 15px">[event_location_name]<br class="none" /></DIV>[/if event_location_name]
[if event_location_address]<DIV STYLE="padding-left: 15px">[event_location_address]<br class="none" /></DIV>[/if event_location_address]
<DIV STYLE="padding-left: 15px">[if event_city][event_city] [/if event_city] [if event_state][event_state show=frm_usloc_state_abr] [/if event_state] [if event_zip][event_zip] [/if event_zip][if event_country][event_country][/if event_country]</p></DIV>

[if event_phone]<strong><p class="none">Event Location Phone:</strong> [event_phone]</p>[/if event_phone]
[if event_website]<strong><p class="none">Event Web Site:</strong> <a href="[event_website]" title="Event Website" target="_blank">[event_website]</a></p>[/if event_website]
[if event_email1]<strong><p class="none">Event Info Email:</strong> <a href="mailto:[event_email1]">[event_email1]</a></p>[/if event_email1]

<p>&nbsp;</p>

Advanced Settings:
all default

 

3. Select and copy the Map Custom Display's shortcode

4. Creat a page

5. Paste the Map Custom Display shortcode into the page

6. View the page with your map displaying a marker for each entry / record of your form's database

 

 

@dhackney - great post and idea! I'm trying to integrate it but got stuck with a couple of steps.

Would you be so kind as to clarify the following?

1) I have latitude and longitude captured on my contact form. Where do I insert these fields so the map knows where to get the latitude and longitude?

2) In the content it says “[if 170][170],[171]{}1-default.png{}***** #[detaillink clickable=1] Click Here For Event Details# ***** Event name: [148]; ***** Event start date: [155];|[/if 170]”

–> What does {}***** # mean?

--> What type of field is [170]?

Looking forward to your response.

Here the working solution for displaying all markers (entries) in one map. User dhackney has just uploaded a solution for one marker in the map.....(btw. 170 is his latitude ID and 171 the longitude ID from formidable Geolocation fields.

How to display all markers (all entries) in one map:

Must have activated and configured Formidable Geolocation plugin, Formidable Location plugin and Comprehensive Google Map Plugin.

Step 1. Create a form with your fields.

Example (Employees):

Fields: Name, Age, Map Location (Pro Fields), Longitude (Pro Fields) and Latitude (Pro Fields).

Step 2. Create two or more entries with this form (Lat and Long fields will be autofilled if you pick the marker on the map (Field: Map Location) to the desired position)

Step 3. Go to Comprehensive Google Map Plugin and klick Shortcode Builder link

Step 4. Create a new shortcode you like until you reach the step "Marker GEO Mashup".  Let the checkbox "Make this map a Marker Geo Mashup" empty!

(ok, since you read the manual, you know that you can provide all markers into one map, if you use this "Make this map a Marker Geo Mashup" function, but for Formidable we don't need this!!! What we need, are the followed information from Step "Map Markers")

At step "Map Marker" choose your marker design (I took the first red one, called 1-deafult.png). Fill out the two fields right beside "Location"
"Enter marker destination adress or latitude, longitude here (required)" input  40,15
"Enter markerinfo bubble text here (optional) input what you want or leave it empty. I left it empty for my example.
Click the blue "Add" Button

Go on with the form with your desire then click "generate shortcode" button.

Go to link "Saved Shortcodes" and copy the code ( do no ckick on the link [insert to post])

Step 5. Now go to Formidable and create a new View

Use entries from Form: Employees
View Format: Both (Dynamic)

Content (Paste your code into the before Content box, it will look like:
Before Content:

[google-map-v3 shortcodeid="333b471ccb" width="100%" height="500" zoom="12" maptype="roadmap" mapalign="center" directionhint="false" language="default" poweredby="false" maptypecontrol="true" pancontrol="true" zoomcontrol="true" scalecontrol="true" streetviewcontrol="true" scrollwheelcontrol="true" draggable="true" tiltfourtyfive="false" enablegeolocationmarker="true" enablemarkerclustering="true" addmarkermashup="false" addmarkermashupbubble="true" addmarkerlist="

Notice: delete pasted code after ....addmarkerlist="

Content

[116],[117]{}1-default.png{}***** #[detaillink clickable=1] Click Here For Event Details# ***** Name: [113]; ***** Age: [114];|

Change my [116] with your! Latitude ID, my [117] with your! Longitude ID, my [113] with your! Name ID and my [114] with your! Age ID - then go to After COntent box

After Content (optional) [this is the part of deleted code from the Before Content box)

{}1-default.png{}info" bubbleautopan="false" distanceunits="miles" showbike="false" showtraffic="false" showpanoramio="false"]

Dynamic Content:

Coose Fields you like from your Formidable Customization box or input some html

Advanced Settings:

all default

Save and pulish, you will have all entries on your map!

Thanks!

@menoo
I'm having issues getting it to display.
I have:
[413],[412]{}1-default.png{} #[detaillink clickable=1] [8] [9]# <strong>Website:</strong> [11];|
413=lat
412=long
8=first name
9=surname
11=website
Basically the map doesn't even load.
1) What does this do in the after content "{}1-default.png{}info"" since it has the image in the content section?
2) What have I got wrong since it's not showing?
3) Is there a way to track a visitors location in the background without having them select the map?
4) what I really want is a list of all entries on map, with format:
Name Surname (linkable to details)
Date: xx/xx/xx
Website: Website

(I'll add in date but couldn't get basic shortcode working!)

1) {}1-default.png{}info just creates the marker on the map and the line in the after content is the part of shortcode you have deleted in before content

2) did you create your own short code map? not just copy my before content shortcode with my ID? you need your own ID which will be registered in your wordpress DB by creating a shortcode map from  admin section

1) I've got it working!

Is it possible for the following:

1) Make entry text bold?

2) Move it onto 2/3 lines?

3) Have links open in a new tab?

I seem to not get the effects when I enter in the content area.

Here is code I used:

[if 413 not_equal=""][if 412 not_equal=""][413],[412]{}2-default.png{}<p><strong>[created-at format="d M Y"]</strong><br /></p>
<p><strong>[8] [9]</strong></p>
<p><strong>#http://site/contact/details/?details=[id]&clientfname=[8]&clientlname=[9] View Entry#</strong></p>
[/if 412][/if 413]|

4) When my entries are grouped, you are unable to zoom in and view individual entries. Is this a setting or a bug?

5) If I wanted to show a map with only the location of the particular entry I created a view with a filter in place, but it's not showing up the correct entry. What's the best way to do this?

I've just come across a better plugin than Comprehensive Google Map called 5Sec Google Maps Pro

http://5sec-google-maps-pro.webfactoryltd.com/

I have just tested and the short codes are far more easier to use.

You can also modify the pop-ups with html and its pro features allow you to have multiple pins.

Took me a while to find a replacement plugin, but well worth the $15 for the pro version. I'm not affiliated with the plugin by the way.

 

@Ravy - does it allow you to customise the pin information better? I.e. add shortcodes to the pin?

Alex, you can add short codes within the pin bubble.

I've done a quick example using Formidable Pro on my website

Seems to works great so far. I might do a tutorial when I have some time. Cheers.

Lovely site! I think I'll definitely upgrade my site with this new plugin.

Ravy  how did you manage to to get he map to display the pins from formidable geo codes??

my code is

Before content
[map width="100%" height="500px"]

Content
[pin][125], [126][/pin]

After content
[/map]

125 - long
126 - lat

 

Robert, it should be lat and then long

Before content: [map fullscreen="1" autofit="1"]

Content: [pin][126],[125][/pin]

After: [/map]

I tested it on another site (I have something on my main one that is stopping the pins showing) I have it worked great actually.

Ravy,

I know its been a while since you last commented on this thread, but I wanted to know if you were able to post multiple pins to the map using a filtered view of multiple entries in formidable.

I am ready to buy that plugin, but your example link is no longer valid and I just wanted to be clear.

Thank you,

Jamie

The plugin is perfect.

Today you can to do that with a lot of  plugins. you have to check some free and some that are payed.

formidablepro is always needed for front entry.

a good one is also google maps from wpmu.

 

Hi Jamie,

Yes, the plugin can be used in a filtered view.

An example can be found when you search for a tutor at fusetutor.com, then a map (using the 5sec google map plugin) is shown with the filtered results via Formidable Pro.

nicolas,

The plugin you referred to seems nice and addresses my need to have the map center on user meta containing lat/lon.

How did you get it to load multiple markers referencing the formidable database?  Is is a mashup?

I can't wrap my mind around the solution.

TIA,

Jamie

ravy,

I tried to use the link and was unable to find any results in the database.  I'll keep poking around.

Thank you for your reply.

Jamie

Jamie, try some Australian suburbs like Melbourne, Fitzroy, Sydney etc when searching. Ta

Ravy,

Nice work!  The radius I assume was simulated with the zoom level?

I ended up buying the plugin from wpmu, it seems more robust and offers key feature for centering map on user.

Thank you for you help and examples.

Jamie

If you any problem ask for help.

Both companies are perfect on customer support.

good luck

Ravy, did you use the Formidable Locations Add on?

I use 5sec google maps plugin as well with formidable to display realtor house listings:

http://www.etnextras.com/form/openhouse/real-estate-listings-page/

I couldn't be more happy with this plugin. Ravy, did you ever try adding a KML layer or seeing if a link would open up a description bubble automatically upon click? I can't seem to figure either one out. Might not be capable with this plugin, I'm not sure.

jmccullor, links do work in the description bubble.

Your 'content' section in your custom view should look something like this:

[pin tooltip="[158]" description="<a href='[detaillink]'>[158]</a><br>"][721], [722][/pin]

Jamie, there isn't a need to use Formidable Pro Locations Add on, since the 5sec google maps plugin automatically geocodes any address given.

I use the locations add on though to speed things up a bit since the longitudes and latitudes will be readily available on the database for 5sec map to process.

Ah - so the description inside the bubble can link to the detailed listing (singly entry view if you follow formidable terms). What about the other way around. For instance, turn those listings into links that when the link is clicked, the specific description bubble OPENS up and centers. I like the idea either way.

Ravy,

regarding geo location, I figured that out after a couple hours lol.

The one I am using is virtually automatic, but I am still trying to harness the features.

Alls well on this end.  Just need to tweak the layout.  the plugin I am using requires post tag to filter maps so had to do a little retro fitting.

thanks everyone for your comments.

jamie

 

Will the 5Sec Google Maps Pro plugin be able to work with 2 separate sets of City and State fields on a form, showing the pins and directions Map Content below it? I'm looking for the map to show on the active form, not on a post. If not, do any of you know of a better option?

-Sean

I ended up with the WPMU Dev Google Maps Plugin and have really customized it beyond my wildest dreams. (with help from their community)

Are you saying you want it to show on the form right when someone enters the data into the form?  Or is the map created from another source and just displayed on the form page?

Jamie

Thanks Jamie for the response.

I looked at the WPMU and the 5sec based on the posts aboved. But wasn't sure whether either would do what I need it to do.

I need it to show on the form as they are entering the data. They enter an origin City and State, then the destination City and State. Once entered the map will show below, the two points with a direction linking the two. Then user can use it as a reference for filling out the rest of the form.

-Sean

I've purchased the WPMU Google Maps plugin. After messing with it for a few hours this morning and no real results, I posted the same questions in their WPMU Community. They referenced a post from nicolas (one of the gentlemen that commented up above in this section). But it looks like he decided to go another direction with what he was trying to accomplish.

Does anyone have any ideas on how to get the 2 points with direction to show on a Formidable Form through WPMU Google Maps?

-Sean

CoastalLights, I think what you'll have to create is a VIEW of the forms data, based on the entries in the form, and include the VIEW and the FORM on the same page. If the WPMU maps plugin has a shortcode, you should be able to include that in the VIEW with the map parameters. (I'm not familiar with the WPMU plugin at all).

 

Hello.

You need to create first three  custom fields for the map fields.

in google map you declare those fields in the special place that the have.

On your form (pro for all the plugins) you assign the fields for formidable form map with the custom field for wpmu map.

And for the result you need a the view.

You can have a mashup separate with shortcode or included in the view.

If you need more help i will need to see what a little more details.

Have a nice day

CoastalLights,

I do not have a full grasp on the under experience you are trying to achieve.

What address are they entering, is it for directions from their location and the destination is already known?  If that is the case all the user has to do is click "directions" button and enter their address.

There are shortcodes that either allows you to show maps inline [location] or [map] for mashups and static maps.  You can also use posts rendered from formidable with meta data (custom fields - ie address or city and state) and the google maps plugin will render a map automatically.

If you can provide a link to the site or explain in detail the process you want user to follow it might be helpful to better understand.

 

Sorry for the late response. I haven't been able to play with it anymore now that I'm back on the road for a few days with limited internet.

I thought that this would be an easy task, but found that I'm well out of my knowledge zone. After days of looking for tutorials to dumb the subject down, I'm more confused.

What I'm looking to do with this section of the form is for the User to enter (State/City) for the Origin, and (State/City) for the Destination. Then right below those 4 fields the map will display the 2 locations with either directions or a line between them. Then the User can use what they see on the map as information to continue filling out the rest of the form. The map needs to show in the middle, on the form.

I've uploaded what the center section of the form should look like. I also included the views and entries. But haven't figured out what or how to use the views, since all the other Formidable Forms that I have worked with on my site so far were basic.

-Sean

Sean,

That is what I thought you were driving at, but I wasn't sure.

The easiest way I can see it working is if you made a two part form, where the user fills out the first form somewhere in there they enter the address information required. They then click enter and that would create the maps, redirects to new form page with the maps embedded and they continue to fill the form from there. Otherwise you are looking at some sophisticated javascript/php to push the data and update the page dynamically.

Keep in mind, for the most part webpages are not breathing programs they are static views.  Granted the use of javascript allows for things to move and update dynamically, but all that stuff needs to be custom scripted for an application like you have described.

Wish I had a better answer.

Discussion closed.