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 Add a Geo Marker (Google Maps Marker) for Geolocation purposes

    Asked by dinesh-it on June 15, 2013 at 06:04 AM

    Hi, I would like to share a workaround that i found for adding a Geo Marker ( a google maps marker) to the JotForm Form.

    Here are the step by step procedures to add a geo marker to the Form

    1. Create a Form and add following two fields, If you have created a form already, please add these two fields to your form.

    1. A Free Text HTML Field

    2.A Hidden Box Field

    You can find these two fields under Power Tools category as shown below.

    Add Fields

     

    Now Add the Following HTML code to the the Free Text HTML Box as Shown below.

    1.1. Select the Free text HTML Field and Click "Edit HTML" button.

     

    1.2. Click HTML icon at the right bottom of the field.

    HTML

     

    1.3. Now copy the following HTML code (div tags) to the HTML Source Editor Window

    <div>Mark your location on the Map

    <div id="googleMap" style="width: 100%; height: 527px; background: #5A8E4A;">Map</div>

    </div>

     

     Once you copied the code, click on Update button.

    HTML Source Editor

     

    1.4. Now Click on Complete button on the Free Text HTML Field.

    Once you completed the above given steps, your form will be look as shown below.

    1.5. Now You have to find the ID of the Hidden Box added to the form in the first step.

    Select the field, Click on settings ( gear icon), select Show Properties from the dropdown.

    In the properties window you can see the ID number of the field. In this example snap it is 15

    Please note this ID. you have to update this on the script.

    2. Now you have to copy a script and have to update this ID on the copied script.

    Please Copy this source code (click here) to any text editor. eg:Notepad.

    Now open the source code that you copied to your notepad and change the ID value as shown below.

    You will find this ID on second line of the source code.

    3. Copy this Code too: Google Maps API

    4. Now Copy the Source Code Of your Form that you created in the step one.

    To Copy the form Source Code You can follow these steps:

    * Open your Form in Edit Mode.

    * Select Embed Forms Option under Setup & Embed tab.

    * Select Source Icon in the Embed Source Wizard 

     

    Copy this Source Code on the text area shown.

     

    Thats all everything is ready now. Only thing left is, you have to embed all the source code you copied in the above three steps to your webpage.

    Copy the code to your page in this order:

    * First, copy the code obtained from step 3.

    * Second, copy the code obtained from step 2.

    * Last, copy the code obtained from step 4.

    After you complete all the above steps(copied all the source to your web page), now you can see the form with map on your page.

    This is the smple page: Sample Geo Marker Form

    Feel free to put test submissions to the form and give feedback.

    After submiting the form you will get ( lattitude,longitude ) value in your submissions. This is enough to get any location on a map right :).

    Feel free to ask if you have any clarifications.

    Thank you.

    Page URL:
    http://shots.jotform.com/dinesh/sampleGeoMarker.html

    JotForm google maps Submissions form source create a form style
  • Profile Image

    Answered by COREVI on June 15, 2013 at 09:05 AM

    Alright, so this looks SO much easier than the other one! I did it, but it's not working. file://localhost/Users/kittyedwards/Desktop/geoscreenshot.tiff i don't know if that screenshot is going to work, but I'll copy what's happening on my page. I did all the copying and pasting but I think there's just a text error somewhere. 

    This is going on before the form comes up, and the map is still the green box like it was in step 1.4.

    /* Script for Google maps geo Marker */ var geolocationID = 6; var map; var marker; var clickFlag = 0; var myCenter=new google.maps.LatLng(39.436192999314095, -101.77734375); function initialize() { var mapProp = { center:myCenter, zoom:4, mapTypeControl:true, sensor:true, mapTypeControlOptions: { style:google.maps.MapTypeControlStyle.DROPDOWN_MENU }, mapTypeId:google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("googleMap"),mapProp); google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); }); } function placeMarker(location) { if(clickFlag == 0) { marker = new google.maps.Marker({ position: location, animation:google.maps.Animation.BOUNCE, map: map, }); //var infowindow = new google.maps.InfoWindow({ // Content: ''+ location //}); //infowindow.open(map,marker); clickFlag = 1; } else { marker.setPosition( location); map.panTo(location); } //this ID of the hidden field should be common. document.getElementById("input_"+geolocationID).value = location; //alert(document.getElementById("mapLatLang").value); } google.maps.event.addDomListener(window, 'load', initialize);

    CORE Location Testing
  • Profile Image

    Answered by dinesh-it on June 15, 2013 at 10:34 AM

    Can you please share your Page URL? so that it will be easy for me to find the solution.

    Thank you.

  • Profile Image

    Answered by COREVI on June 15, 2013 at 10:39 AM

    http://form.jotform.co/form/31653646395866 My form

    http://www.corevi.org/geo-test.html

    And that's the page. I did a little experiment and put the second code inside the first code so now all that text is gone, but the map still doesn't work.

  • Profile Image

    Answered by dinesh-it on June 15, 2013 at 10:40 AM

    Ok, Got it. Very sorry for this inconvenience. I forget to add the script tag since i am using the link.

    Now Please change the code like this.

    <script> code obtained from step 2 </script>

    Let us know the result.

    =======

    EDIT:

    I have updated the source code with <script> tag. No More issues.

  • Profile Image

    Answered by COREVI on June 15, 2013 at 10:44 AM

    That helped! The map is now blue, but it won't zoom or anything. I tried to change my lat & lon so that may have messed it up.

  • Profile Image

    Answered by COREVI on June 15, 2013 at 10:47 AM

    I was missing a comma between the lat & Lon!!!!! HURAY!!!

  • Profile Image

    Answered by dinesh-it on June 15, 2013 at 10:52 AM

    I am able to see your page with map working. :)

    Well, Feel free to ask if you have any further clarification.

    Thank you.

  • Profile Image

    Answered by COREVI on June 15, 2013 at 10:54 AM

    Ok one more question, and maybe this will completely mess it up. Is there any way to make a map of all of my pins that people have entered?

  • Profile Image

    Answered by dinesh-it on June 15, 2013 at 11:02 AM

    Ya, I am still searching for this solution. Once I found a solution - a workaround, I will share that on this thread.

    Thank you.

  • Profile Image

    Answered by COREVI on June 15, 2013 at 11:04 AM

    Well so far this is amazing! I am so glad I found this website :)

  • Profile Image

    Answered by dinesh-it on June 15, 2013 at 11:05 AM

    Thank you. I will update you with the solution as soon as possible. :)

  • Profile Image

    Answered by COREVI on June 15, 2013 at 11:14 AM

    I ruined it :( I tried to put it on a form I already had, and it has Facebook integration so it made me do the iFrame. The form works, but the map is gone again. While moving it over did I forget something? The link is the same.

  • Profile Image

    Answered by dinesh-it on June 15, 2013 at 11:25 AM

    You can accomplish this only by copying the full source code. No other way. iframe source will not work.

    Use source code instead of iframe: which means the step 4.

    Let us know the result.

  • Profile Image

    Answered by COREVI on June 15, 2013 at 11:27 AM

    So that means I can't have facebook integration on this form :( I am trying to collect data without them having to enter it every time and the facebook was working great, but it looks like I have to choose the facebook or the map, right?

  • Profile Image

    Answered by dinesh-it on June 15, 2013 at 11:29 AM

    yes, sorry to say this.

    But I will do some research and let you know if I found any solution for this.

    Thank you.

  • Profile Image

    Answered by landsurveyorsU on June 16, 2013 at 06:57 PM

    trying this one now.. could you please take a look here and tell me what I am doing wrong?

     

    thank you for your time

  • Profile Image

    Answered by dinesh-it on June 17, 2013 at 12:45 AM

    @landsurveyorsU 

    Remove the following code from your source:

     

    Here is the edited version of your file and it is working fine, you can copy this code now.

    Feel free to ask if you have further clarification.

    Thank you.

  • Profile Image

    Answered by landsurveyorsU on June 17, 2013 at 05:14 PM

    thank you Dinesh...works perfectly..thank you

  • Profile Image

    Answered by Reagle on June 23, 2013 at 09:01 PM

    Hello Dinesh,

     

    Taking advantage of the API, it would be possible to collect JotForm in other fields as well as latitude / longitude, eg, country, state and city?

     

    It would also be possible to include the previous fields (text or drop-down list) for providing an initial approximate location?

     

    Thank you,

     

    Reagle.

  • Profile Image

    Answered by Reagle on June 23, 2013 at 09:57 PM

    Could help find the problem? Please!

     

    The form works, but the map does not appear and collects GeoLocation!

     

    http://folkdigital.com.br/test/

  • Profile Image
    JotForm Support

    Answered by Welvin on June 24, 2013 at 12:12 AM

    Hi,

    That is probably because you have missed to include all the necessary codes to the form source codes. The codes on Step 2 and 3.

    I have modified your file and include all the missing codes, use it instead:

    https://shots.jotform.com/welvin/pages/reagle.html

    The source codes here: view-source:https://shots.jotform.com/welvin/pages/reagle.html

    Thanks

  • Profile Image

    Answered by Reagle on June 24, 2013 at 08:03 AM

    Thanks, Welvin!

     

    I used the code of your file and it really worked! I am very surprised at the efficiency of support JorForm!

     

    Regards,

     

    Reagle!

  • Profile Image

    Answered by jwelle on June 28, 2013 at 09:01 AM

    ah ok   so after you have api script, modified properties script and full source....you put to a new html page?  not a jotform?

    because I ended up with this  http://form.jotform.co/form/31783804785869

     

  • Profile Image
    JotForm Support

    Answered by Welvin on June 28, 2013 at 09:36 AM

    @jwelle,

    Yes, you have to embed the form source codes and include all the additional necessary codes to the form source codes to display the map and to capture the Location of your user.

    Please kindly review the process. 

    Thanks

  • Profile Image

    Answered by COREVI on June 30, 2013 at 09:18 AM

    I don't know if there is another thread for this, but is there any process on having all of the pins saved to a google map? Perhaps they could be added to a custom layer on google maps, or in reports a google map could be an option? That would be very amazing!

  • Profile Image

    Answered by dinesh-it on June 30, 2013 at 09:38 AM

    Ya, Have not yet solved, it needs lot of codes. So I think It is Not Good workaround for users. I suggest you to try http://www.mapbox.com/.

    Hope this will help you to put pins on map using Google spreadsheet.

    Thank you.

  • Profile Image

    Answered by coconnexion on July 14, 2013 at 10:55 PM

    Hi I'm trying to get this to work but it shows the map in green. 

    here is the form I'm trying to ge to work http://barranavidad.com.mx/negocios.

    Please could you help me to make this work?

     

     

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 15, 2013 at 03:29 AM

    @coconnexion

    You have to use your form source code not the default script embed code. Please click "Source" instead of "Embed" then copy the provided source code. 

    Thanks!

  • Profile Image

    Answered by coconnexion on July 15, 2013 at 02:26 PM

    Thank you it is working now! 

  • Profile Image

    Answered by dinesh-it on July 15, 2013 at 02:28 PM

    Glad to know this. 

    Thank you.

  • Profile Image

    Answered by servisebin on September 09, 2013 at 02:35 AM

    Hi all,

    Can you share the final version of the code?
    Thanks,
  • Profile Image
    JotForm Support

    Answered by Welvin on September 09, 2013 at 03:25 AM

    @servisebin,

    You can check for an example here: https://shots.jotform.com/welvin/pages/GeoMap.html. If you'd like some help regarding this one, please open a separate thread so we can give you the information you need.

    Thanks

  • Profile Image

    Answered by servisebin on September 09, 2013 at 06:47 AM

    The map is  working with google chrome but not working  with internet explorer. Why? 

    Thanks

     

  • Profile Image

    Answered by servisebin on September 09, 2013 at 08:04 AM

    i use the code below, but the map is not working. i cant find whats the problem. :(

    ---------------------------------------------------------------------------

    EDIT:

    Codes moved to Pastebin to secure space in the thread: http://pastebin.com/2RJ8pL6C

    ---------------------------------------------------------------------------

     

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on September 09, 2013 at 10:30 AM

    @servisebin,

    I couldn't see your thread. Would you please create one? You can link this thread to your post so we'll know that you are trying to do the same method or workaround. And so we can help you resolve the problem in IE.

    Thanks

  • Profile Image

    Answered by COREVI on November 03, 2013 at 08:42 AM

    Hello again, I just wanted to check in and see if there has been any more work on expanding this feature. My form is working and I am collecting the geolocation on the map, but I would really like to have a map automatically generated from the form. And after that is done, I would like to be able to filter the data so that you can select the time range for the submissions you see. Still loving JotForm, but I'd like to see it get better! (and none of the new apps do this, I checked)

    Kitty

  • Profile Image

    Answered by jeanettebmz on November 03, 2013 at 12:13 PM

    Our developers recently released 100 new apps. Among these, we got 2 apps which are related to geolocation

    JotMap   Which creates a simple map of your JotForm submissions that have address fields.

    Submissions Locator   Which will let you analyze regional interests of your form. You can easily filter certain answers to get locational correlations to questions

    Please take a look at these and open a new thread to let us know your further questions.

  • Profile Image

    Answered by COREVI on November 03, 2013 at 03:30 PM

    Unfortunately like I said I checked the two apps and neither of them do that. Submissions location gives the location of the user filling out the map, not the location marked on my form. And JotMap looked like it might work but it appears it can't handle the GPS coordinates created with the geo locator created with the method in this thread. And the description says right on it that it will only map 20 locations. My form is up to 356 at the moment. I appreciate all the work that is being done and the apps that are being added. I hope that the developer who figured out the geomarker can continue his work and figure out how to create a map from that data. And add a date filter on it :)

    Kitty

  • Profile Image

    Answered by jeanettebmz on November 03, 2013 at 04:36 PM

    We are very happy to hear your comments and compliments. These apps will be surely improved with time.

    I'll pass your comments to the developer in charge of this

    Cheers!

  • Profile Image

    Answered by saultrejo33 on November 21, 2013 at 11:22 AM

    I, for the life of me, can't figure this out. I followed all the steps so I'm not sure where I could be going wrong,

    This is my link: http://form.jotform.co/form/33223722893859

    And this is the code I tried: https://www.dropbox.com/s/tyrg6vtybl0tbo3/Jotform%20Code.docx

    (code is way too long to post in here)

    I've been using this tool to test the code: http://w3schools.com/html/tryit.asp?filename=tryhtml_intro

    Please advise.

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on November 21, 2013 at 02:29 PM

    @saultrejo33

    Can you please open a new thread with your request (you can refer to this one) and explain to us what is exactly what you have done.Please copy the code you have come up with (you can use pastie.bin and then refer to it)

    This way you'll help us to maintain a more organized way to help our users

  • Profile Image

    Answered by saultrejo33 on November 22, 2013 at 05:03 AM
    I made a new thread, but when I hit submit I did not see a confirmation
    message and no autoresponder email was received. Was my new thread received?
  • Profile Image
    JotForm Support

    Answered by EltonCris on November 22, 2013 at 07:56 AM

    @saultrejo33

    Yes and I just replied to it here: http://www.jotform.com/answers/294335

    Kindly check. Thanks!

  • Profile Image

    Answered by carlosgis on April 24, 2014 at 06:33 PM

    Thanks works great! 

  • Profile Image
    JotForm Support

    Answered by TitusN on June 02, 2014 at 12:37 PM

    Hello,

    We have developed a widget for this very purpose - Show Map Location

    Please try it out and let us know how it worked out for you.

  • Profile Image
    JotForm Support

    Answered by steve on September 30, 2014 at 06:00 PM

    Update-

    The map needs a new script tag to ensure it doesn't conflict with the prototype JS library, which is included in JotForm scripts. Please use this script tag instead:

    <script type="text/javascript" src="//maps.google.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=true&v=3" />

    Sample form:

    http://jsfiddle.net/5ytkx/145/

    Without this the zoom and terrain selection controls won't appear.