Google Maps Form Field

  1. Home
  2. Docs
  3. Form Field Types
  4. Google Maps Form Field

Google Maps Form Field

weForms has a Google Maps form field option that lets you incorporate Google Maps right in your website’s contact form. Google Maps can be very helpful because it provides you with a short profile of any location in the world. It can also be used to communicate the location to your visitor.

One way to use this would be to add this field to your purchase form. Once the buyer has submitted the form, you can open Google Maps and learn about their whereabouts. You can also decide how you wish to deliver the purchased product.

You can see the nearby stores and find a suitable storehouse for the purchased product, which will store the product until the buyer collects it.

Google Maps

Or if you have multiple deliveries to make in a state, you can pick the most cost-effective route for your delivery truck.

Setup Google Map API Keys

To setup your Google Maps API key, you will need to first create it on Google, then provide weForms with the API Key to authenticate your requests.

Google Maps API Key setting for weForms

Google Maps Form Field Options

  • Field Label: Add a precise label. Keep in mind what you are exactly looking for. You may name the field “Country” to know about your applicant’s current Country. Or you can name the field as “Your Current City” to know about the city they are from.
  • Meta Key: This key is used to locate the information in the database. You must use a unique key for every field.
  • Show directions link: If you check the box the form will have a separate option to set direction between two places.
  • Help Text: This option lets you be more specific in your instructions.
  • Required: This option lets you make this field optional or mandatory for your users to answer. You just need to tick Yes to make the field mandatory. Or check the option No to make it optional.
  • Map Settings: This option lets you set the appearance of the map to your specific requirements. You can set the zoom-level and also default coordinates. You can also include an address search box by checking the box Show address search box just at the bottom of the Map Settings area.

Advanced Options:

  • CSS Class Name: Every WordPress generated web page needs a style sheet language to project its data and other elements, in a certain format and layout. You can use separate formatting for separate parts of a single web page. This can also be done to separate sections of your weForms generated form. With CSS Class Name you are able to do this.
  • Dynamic Value Population: Field values or options can be populated dynamically through a filter hook or query string.
  • Conditional Logic: This lets you decide what version of the form will be displayed to an individual. Conditional logic can be used to show or hide fields according to certain responses.
Using Google Maps in weForms

After you are done, save the form and click on the Preview option at the top right corner of your screen. It will open a new window with your form’s preview.

You can also use the Google Map field to autofill the Address field.


Congratulations! You now know how to use the Google Maps form field on your WordPress forms. Next, you may want to learn more about other weForms form field types that are available for use within your forms.

Was this article helpful to you? No Yes 3

How can we help?