What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to Create Geolocation or Geo Tagging System using Google Maps + JotForm

    Asked by dinesh-it on May 02, 2013 at 01:10 PM

    Hi,

    I found a way to create a simple Geo tagging system using Google Maps and JotForms

    Here are the step by step procedures to accomplish this

    1. Create a simple Form using JotForm form-builder which contains the following fields: 

    a dropdown box , a Text Field, a Text Area, 2(two) hidden boxes, a save button

    Rename and arrange the fields as shown in the figure below

    Create Form

     

    2. Get the form source as shown below

     *  Click Embed Form Icon

    *  select iframe form the pop-up list

    Get Form Source

    Copy the source code

    3. Delete the script tag from the copied source

     The copied source now contains an tag and <mce:script type="text/javascript"><!-- tag, Delete the <script> tag ( from <script> to // --></mce:script> )</span></p><p style="font-family: Arial; font-size: 12px;" _mce_style="font-family: Arial; font-size: 12px;"><span style="font-family: arial, helvetica, sans-serif; font-size: small;" _mce_style="font-family: arial, helvetica, sans-serif; font-size: small;">Now You have source code which looks like this ( replace the src url value with your form url )</span></p><p style="font-family: Arial; font-size: 12px;" _mce_style="font-family: Arial; font-size: 12px;"><span style="font-family: arial, helvetica, sans-serif; font-size: small;" _mce_style="font-family: arial, helvetica, sans-serif; font-size: small;"><strong><iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.me/form/31182615290449" _mce_src="//form.jotform.me/form/31182615290449" frameborder="0" style="width:100%; height:527px; border:none;" _mce_style="width: 100%; height: 527px; border: none;" scrolling="no">

     

    4. Create a simple google map using Google Maps API

     You can learn the google Maps API tutorial here http://www.w3schools.com/googleAPI/default.asp

    Here is the Source code to create map for this esenario   here https://dl.dropboxusercontent.com/u/44188862/For%20JotForm/map%20source.txt

    5. Embed JotForm form( your form ) to the info window of google map

    copy the source code that you get at the end of step 3 to the "content:" attribute of google maps info window (replace "Hello World" in the above provided GMaps source code)

     var infowindow = new google.maps.InfoWindow({

    Content: ''

     });

    6. Prepopulate latitude and longitude values to the hidden fields of the form

    Go to this page to learn about prepopulating fields in a form via URL https://www.jotform.com/help/71-Prepopulating-the-fields-to-your-JotForm-via-URL-parameters

     

    Find the name of the hidden elements of the created form

    Click preview and select open in new tab

     preview

    Right click on the page (on your form that is opened) and select "view page Source" 

    then find the name value of two hidden elements that are added to the form at the end of the source 

    find name values

     

    Using javascript String Concatenation and location object provided by Google Maps, assign the lattitude and longitude values to the respective hidden box fields 

    ?longitude=' + location.lng() + '&' + 'lattitude=' + location.lat()

     

    Now append the above line to the end of src value url of the iframe as shown below

    var infowindow = new google.maps.InfoWindow({

    Content: ''

    });

    That's all Now a simple Geo tagging system is ready.

     Go Here To See Demo: http://tapntag.site44.com/

     

    Feel Free to ask Questions.

    Thank You. 

    JotForm google maps create form source iframe form style geolocation geo-tagging
  • Profile Image

    Answered by landsurveyorsU on June 04, 2013 at 09:28 PM

    WOW... this is amazing thank you for sharing..

  • Profile Image

    Answered by landsurveyorsU on June 04, 2013 at 10:08 PM

    I'm trying right here.  any ideas what i might be doing wrong?

  • Profile Image

    Answered by dinesh-it on June 04, 2013 at 11:23 PM

    Hi, Do you want to embed this map to your page? Can you please explain little more, what you did and what problems you faced?

    Waiting for your reply.

    thank you.

  • Profile Image

    Answered by landsurveyorsU on June 05, 2013 at 01:31 PM

    well the one adjustment I made was zoom level and tried to change the initial lat/long...

    first had a problem with the maps id as it seems to no longer be needed..am i correct on this?

  • Profile Image

    Answered by landsurveyorsU on June 05, 2013 at 01:48 PM

    Also trying it here  map will not show

  • Profile Image

    Answered by landsurveyorsU on June 05, 2013 at 02:01 PM

    Ok...got it to almost work here.. but for some reason it says my form isn't valid

  • Profile Image

    Answered by dinesh-it on June 05, 2013 at 02:03 PM

    Hi, There is (') missing: correct it as shown below

    var infowindow = new google.maps.InfoWindow({

        Content: '<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.co/form/31547803631856?longitude='+ location.lng() + '&'+ 'latitude=' +location.lat()+ ' " frameborder="0" style="width:100%; height:527px; border:none;" scrolling="no"></iframe>'

      });

    this will now show the map.

  • Profile Image

    Answered by dinesh-it on June 05, 2013 at 02:18 PM

    Hi, its working fine from my local directory.

    result

     

    Reduce the form size to improve the look.

    Let I will try to solve the issue why it is not working from dropbox. (from link)

  • Profile Image

    Answered by landsurveyorsU on June 05, 2013 at 02:40 PM

    ok...thanks for your help... i've now got a working model on my server..thanks so much.

  • Profile Image

    Answered by dinesh-it on June 05, 2013 at 02:47 PM

    Glad to know this. Me too finally got it to work here.

    Feel free to ask for further clarification.

    Thank you.

  • Profile Image

    Answered by COREVI on June 12, 2013 at 03:19 PM

    This is exactly what I want! Unfortunately the directions are a bit over my head. I would really love to figure this out!

  • Profile Image

    Answered by dinesh-it on June 12, 2013 at 03:27 PM

    Hi, Feel free to ask if you have any clarifications. We are ready to help you.

  • Profile Image

    Answered by dinesh-it on June 15, 2013 at 06:12 AM

    Hi all, I have just found an another workaround same like this.

    Refer this thread: How-to-Add-a-Geo-Marker-Google-Maps-Marker-in-the-JotForm-Form#0

    It may be usefull for you.

    Thank you.

  • Profile Image

    Answered by JULIORESTREPO on December 18, 2013 at 03:13 PM

    Very Good! It Works !!! Thanks a lot!

  • Profile Image

    Answered by nategarvin1 on February 18, 2014 at 06:29 PM

    I am interested in having the state the lead was originated in show up on the output form. I dont actually need the map. Any ideas of how this can be done?

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 18, 2014 at 08:12 PM

    @nategarvin1

    Check my colleague's reply on your thread here: http://www.jotform.com/answers/335261

    Regards!

  • Profile Image

    Answered by Max Corso on July 06, 2015 at 05:47 PM

    Hi, I'm new to this, so I don't understand WHERE I put my completed code for the Google map. I have the JobForm script in your code in place of Hello World and have substituted in the desired latitude and longitude in place of yours... Now what do I do with this code? I'm not too familar with JavaScript so if you could explain this in lay terms it would be much appreciated. Thank you!
  • Profile Image
    JotForm Support

    Answered by BDAVID on July 06, 2015 at 06:19 PM

    @Max Corso, your question will be address on this thread: http://www.jotform.com/answers/604247

  • Profile Image

    Answered by on April 26, 2016 at 12:09 PM

    Hi

    I enter the addres of my spreadsheet in google docs, but the filled forms are not saving there!! Can you help me?

  • Profile Image

    Answered by on April 26, 2016 at 01:10 PM

    Hi I have another question, how can i share the url of the created map?

    Thanks

  • Profile Image
    JotForm Support

    Answered by Charlie on April 26, 2016 at 02:27 PM

    @s

    This thread is quite old, it would be best to open your own thread for us to assist you. I went ahead and opened two threads for the two questions you have. Please refer to the following links:

    https://www.jotform.com/answers/826924 

    https://www.jotform.com/answers/826925 

    Please refer to those link instead. We will address them shortly. Thank you.