User Guide

Add Google Map Geolocation Marker to your Form

Last Update: April 18, 2014

This guide is deprecated. You can now add Geolocation to your form without writing any more scripts. Get it here: http://widgets.jotform.com/widget/geolocation

The following guide will teach you how to add a google map marker to your form. This will enable you to get user's longitude and latitude for any given location using Google Maps.

First off, this involves source code editing so you have to get your form source code and use it for embedding the form.

1. Add a Free Text HTML field to your form and insert this HTML code.

Mark your location on this Map

<div><font size="3">Mark your location on this Map</font>
<div id="googleMap" style="width: 100%; height: 527px; background: #5A8E4A;">Map</div>
</div>



2. Add  a Hidden Box field to your form and copy it's ID number. Get the google map script here:
http://pastiebin.com/52516d192fa3f and replace the geolocationID number with your hidden box ID number. Check these visual guides:



Example:


3. Get your form source code and paste the modified script above at the bottom part of your form source code.

4. Embed your form.


***You can also add this URL on your email notification so when you get submissions via email, you can click the link to view the google map location.

https://maps.google.com/maps?q={geolocation}
 
Replace {geolocation} field variable with your hidden box field variable.




If you have questions, feel free to post it below.

7 Comments...

  • Paul

    How would you embed the modified HTML on a Wordpress site and link up the CSS & JS files?

    I've got it all working but lose the styling once I paste the HTML code into Wordpress.

    Thanks for your help, otherwise your tutorial is awesome!

     
  • d4v3g

    This is exactly what I need for a Neighbourhood watch incident form, but I get stuck at the point where I'm supposed to paste the modified script below my form source code. It won't let me paste into the window in which the code is presented.
    What am I doing wrong?

     
  • Kenric

    Hello,

    I was wondering if this can show a map to us after the user submits the form? I looked into Geolocation widget, and it only shows me the coordinates once the user submits the form.

    We would like to have a map of where the user dropped the pin after he/she submits a form.

     
  • jtledesma

    I added the geolocation widget but the map pin is set in US by default :(

    The map can't detect my current location.

     
  • hassan

    if change to satellite mode ?

     
  • gpra_forms

    Why cant you just cut and paste the map address in. this is not simple for basic users......

     
  • northwoodsmapping

    Can you have polygons tool on the google map api, so the user can add polygon to the map?

     

Send Comment