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 (October 10, 2013 at 01:32 AM)

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!

View Answer


   
d4v3g (November 13, 2013 at 10:07 AM)

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?

View Answer


   
Kenric (October 22, 2014 at 10:33 AM)

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.

View Answer


   
jtledesma (November 20, 2014 at 03:49 AM)

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

The map can't detect my current location.

View Answer


   
hassan (November 07, 2015 at 09:35 AM)

if change to satellite mode ?

View Answer


   
gpra_forms (January 14, 2016 at 09:58 PM)

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

View Answer


   
northwoodsmapping (February 20, 2016 at 11:35 PM)

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

View Answer


Send Comment