Blog

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, and navigate to “Map Widget”. On this page, you can add or modify any address as per your needs.

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”, copy the shortcode from the form and paste the shortcode inside the post. Click update. The Google map will now appear inside your WordPress form.

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

 

About rmagic

RegistrationMagic Editorial Staff (rmagic) is a team of WordPress registration experts and major contributor to the development of RegistrationMagic - WordPress User Registration Plugin.

Leave a Comment

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

shares