Add Google Map Inside WordPress Form Easily

Display Google map inside WordPress form

A map inside WordPress form can display an address.  As an example, if the map is added to appointment form to display the address of the office, it will certainly be easier for your users to figure out directions to the appointment centre. As another example, if someone inquires about a property that is up for sale, the map can display location of the property. That is, the map can show property marker pointing to the property address.

Navigating to the Map widget

From your WordPress dashboard navigate to the “All Forms” section in RegistrationMagic. Move your cursor across one of the forms. Click on the “Field” hyperlink or the “Field Manager”.

map inside WordPress form

Click on “Add Field” from the operations box. Look for read only, display fields. Click on the “Map” widget from the Magic Widget pop-up. This will navigate you to a page named “Map Widget”. On this page, you can add or modify any address as per your needs.

map inside WordPress form fields

Before going ahead, please note that you must not forget to configure the autocomplete feature in the address field. You can configure the autocomplete feature from the External Integrations icon inside the Global Settings. You will need to configure Google Maps API key.

Read this tutorial “How to autocomplete address field of registration form?” if you would like implement the autocomplete address feature.

Configuring the Google map

On the Map widget settings page, you will be see options such as Label, Latitude, Longitude etc. Fill the Label field with “Office address”.

map inside WordPress form options

There are two methods to populate your address. One method is to enter the address manually. This approach will present you with address suggestions. As an example, if you type 1A then all addresses starting with 1A will appear as suggestions. The second method is to directly click on the mapped select the exact location.

Both methods will auto-populate the Latitude and Longitudes accordingly. So, these fields don’t need to be entered manually. Set the zoom and map width according as per your design requirement. Apply CSS class only if it is defined in the coded file.

map inside WordPress form advance options

Embedding Google map inside WordPress form

Now go back to RM “All forms” and copy the shortcode from the form card. Navigate to the “All Pages” section from “Pages” on the WordPress dashboard. Paste the shortcode inside the post. Click update.

Go back to your Map widget page and click on “Add to Form”. The image below shows how the Map widget will appear inside your WordPress form.

map inside WordPress form front-end

This completes our tutorial on how to add Google map inside WordPress form.


Leave a Comment

Your email address will not be published. Required fields are marked *