Jotform has a lot of mapping widgets available for your forms. We have a map widget that can display your business location. We have a map widget that can calculate distance from the origin to the destination. There is a widget that can geo stamp your form submission without the need for users to input it.
Jotform’s mapping widgets work with the default API key we have. However, we highly recommend setting up your API key to avoid interruptions.
Having a separate key for the widget is recommended because once the default API key reaches its limit, there is no way for Jotform to notify you about it. Whereas, if you own the key, Google will notify you if there’s an issue or if your billing needs to be updated.
So, how do you get Google Maps API Key for Jotform mapping widgets? Please follow the steps below:
Note that if you did not set up the API key before, it is likely that you do not have a Google Cloud Project yet. In this case, you will be presented with the following window, and you need to create one.
Guide to create Project: https://cloud.google.com/resource-manager/docs/creating-managing-projects.
If the project was already created or as soon as the project is created, you will be presented with the following window:
Regardless if it’s already created, we recommend setting up a new key. Click the Create Credentials button as shown in the above screenshot.
Choose API Key, which is the first option.
The API Key will be created and given in the next window. To secure the key, to make sure no one can use it, you need to restrict it. Click the Restrict Key button to proceed on the next settings.
In the Restriction settings, choose HTTP referrers (websites). Add the list of the Jotform domains as shown below.
You can get the list here: https://shots.jotform.com/welvin/text/jotform-mapping.txt.
***If you are from the EU region or HIPAA account, you do not need to specify the EU and HIPAA domain as it is already part of the .jotform.com item in the restriction list.
Please don’t forget to click the Save button at the bottom.
You can filter the list by clicking this link https://console.cloud.google.com/apis/library?filter=category:maps.
Click the item and on the next page, click the Enable button, and that’s it. Go to the other item and do the same.
Next, this is very important. You need to associate a billing account for the project and API keys to work.
If your billing is not yet set up, you’ll get the following window. Select the Project, and click the Link a billing account button.
Click the Create Billing Account link.
The next window is self-explanatory.
For details and more information regarding the billing, please check the following guide from Google: https://cloud.google.com/billing/docs/how-to/manage-billing-account.
3. Last, but not the least, go to the form builder, and add the API key on the widget settings. Here’s an example, without the key, the Location Coordinates widget does not work:
As soon as the key is entered, the map and full address are shown.
Click the Update Widget button and you’re done.
If you have any suggestions or issues following this guide or setting up the mapping widgets, please let us know in the comments box below or create a new thread to our support forum.