Docs Archive - Page 3 of 12

FRONTEND SUBMISSIONS ON GOOGLE MAPS is an extension of the WP Maps Pro plugin. This extension allows members/guests to add (Markers)location from the frontend on your given map. Using this extension you can allow their members/guests to submit their location/address details from the frontend and also display a location list to members/guests which is submitted by them.

Please make sure you have installed WP Maps Pro plugin on your website. In case you have not installed it yet. Please download these plugins and configure them first. Here are the following steps to install the WP Maps Pro plugin.

Here are the following steps to configure Frontend Submission On Google Map add-on:

After installing and activating this add-on:

1). Display Frontend Submission Form:

Using shortcode you can display the frontend submission form on any page/post/widget/custom post type. This shortcode displays the location submission form. Website users could submit their location details using this form.

Step 1 After activation of this addon, please paste this shortcode [fngmp_location_form] where you want to display the frontend submission form on your site page/post/widget/custom post type, after saving the page you will see the form is displaying.

After saving the shortcode form display as given in this image.

2). Manage Frontend Submission Form:

Step 1 Please go to the “WP Maps Pro -> Frontend Form Submission” page.

Step 2 Please navigate to the “Choose Fields in Add Location Form” tab section on this page (Please see this step in the given image below).

Step 3 Select fields as per your requirements by enabling the checkbox in the “Display On Form” column in this section(Please see this step in the given image below).

Step 4 After that admin can set any field that must be required by selecting the checkbox given in the “Mandatory?” column here(Please see this step in the given image below).

Please see the above steps in this image:

Step 5 After selecting fields save this setting and the admin will see selected fields are displaying in the frontend form, Please see the below-given image.

3). How To Add Extra Data Fields On Add Location Form:

Admin can display an additional information field on this frontend submission form if the admin wishes to receive additional information from the user.

Before adding additional information fields on the form please make sure you have created extra fields in the wp maps pro plugin in case you have not created extra fields then please click here to see how to create the extra fields.

After creating an extra field please follow the steps given above in the “2). Manage Frontend Submission Form” heading section and you will see your created extra field displayed here as shown below image select and save as per your requirement.

4). How To Display Selected Categorie on Frontend Form:

Admin can display selected categories on this frontend submission form, please make sure you have created categories in the wp maps pro plugin in case you have not created a category yet then please click here to see how to create the category.

Step 1 Please navigate to the “Select Category to Display on Frontend Form“tab section on this page.

Step 2 Please go to the “Select Category” option and select the category as per your requirement which you want to show on the frontend in this category dropdown. After selecting a category save this setting now you will see your selected categories are displaying in the frontend category dropdown.

5). How To Display Submitted Location Listing Table:

Admin can display the location list table on the frontend as per requirement. In this list, the user can see all locations which are submitted by him.

Please use this [fngmp_location_listing] shortcode to show location listing on any page/post/widget/custom post type. This shortcode display all location list which is submitted by users. Users could see their submitted locations in this table.
You can see it given example.

6). How To Display Selected Extra Field In The Listing Table:

If the admin has an extra field to submit in the form and the admin wants to show only a specific field value in this table then the admin can display selected additional fields on the frontend submission’s location list table as per their requirements.

Step 1 Please navigate to the “Display Extra Fields On Table” tab section.

Step 2 Admin can see here some checkboxes of extra fields are visible which you had created in Wp Maps Pro plugin’s setting page & also you can see these extra fields are displaying in the “Choose Fields in Add Location Form”.

Step 3Select extra field checkbox as per your requirement and save this setting, after saving you will see only your selected extra fields are displaying in the frontend submission’s location list table.

Display Import Location On Frontend

Using this add-on admin and website users can import locations from the frontend.

Please use this [fngmp_import_location] shortcode to show frontend import location form on any page/post/widget/custom post type. This shortcode display the import location form. Website users could import their locations using this form.

Manage Add-on Setting

In this addon, the admin can set who can submit the location or who can view the submitted location list and also who can import locations from the frontend as per their requirment.

Manage this addon setting please navigate to the “Frontend Form Submissions” addon’s setting page.

On Frontend Form Submissions page you can see some shortcode settings checkboxes are available these addon settings you can select according to your requirements. Choose the shortcode setting then enable the “Login Required” checkbox & add a message to display on the frontend, in the given message box for a non-logged-in user then save these changes.

Using this Customer Itinerary is an extension of the WP Maps Pro plugin. This extension allows members/guests to add (Markers)trip route from the frontend on your given map. Using this extension you can allow their members/guests to submit their trip location details from the frontend and also display location trip route to members/guests which is submitted by them.

Please make sure you have installed WP Maps Pro plugin into your website. In case you have not installed it yet. Please download these plugins and configure them first. Here are the following steps to install the WP Maps Pro plugin.

Here is the following process to configure Customer Itinerary add-on:

Step 1: Please navigate to the “WP Maps Pro -> Add Map” and create your map to display the trip route.

Step 2: After activating this addon, you will see two post types generated by this addon:

Trip Locations
My Trip

Please go to the “Trip Location” post type menu page and start creating locations for adding on a trip .

Step 3: Create locations here for adding on the trip, please click on the ‘Add New Location’ page and start creating your location, enter post title as location name, and add autosuggest address using WP MAPS PRO Metabox and select map from Metabox which you created for display trip location.

Step 4: Also, you can see all the locations you have created for the trip on that map which you created for above for this trip which wants to show a map with all the locations created by your addon’s trip location custom post.

Step 5: When you go to that place by clicking on the ‘read more’ button in the infowindow to see this place post, then you will see two more buttons on that place page: 1. Create New Trip, 2. Add To Existing Trip

1. Create New Trip: Here you can create a new trip then you can assign that location on the new created trip by enabling below the given checkbox.

2. Add To Existing Trip: Here you can select a trip from the given dropdown to assign this location.

Step 5: Please go to the “WP Maps Pro -> Customer Itinerary On Google Maps” menu page.

Step 6: Now select your map from the given ‘Select Map’ dropdown on this addon settings page, to display the trip route on the map.

Step 7: After a small process please click on the Save Setting button.

Display Form:

Step 8: Please use this shortcode [user_trips_list] to display the trip list on the frontend, copy this shortcode and paste it on the selected page of your website where you want to create a trip form and display the trip list. After doing this small process your form is displayed here.

Create Trip:

Step 9: Click on “Create New Trip” button after doing this you can see a ‘Create Trip’ form are displaying here.

Step 10: Now enter the name of your trip in textbox given in ‘Create a New Trip’ section, then click on the ‘Create Trip’ button to save your trip, you can see a below, created trip are displaying in the table. Now assign locations to the trip as per your requirement.

Assign a location to the trip:

Step 11: Please click on the “Edit” link to assign locations of your ‘trip’ on which you want to assign locations.

Step 12: Now you are in the update trip form, here you can assign locations to your trip as per your requirement, please click on the “Add More” button and select locations to assign your trip, after selecting locations for this ‘trip’ then click on “Update Trip” button, Now your Trip is created you can see it on map.

Step 13: After assigned locations, you will see these selected locations are displaying on your created map to view this location route on the map, please go to the ‘trip’ page and click on the “View” link to view your trip route on the map.

Selected locations routes are displaying on the map.

To ensure your WP Maps Pro plugin stays current and benefits from its latest features, there are two effective methods for updating – a manual approach and an automated option using Envato’s Own Plugin, Envato Market. Whether you prefer hands-on control or seamless automation, this guide will walk you through the steps required for a successful update, allowing you to keep your maps functioning optimally.

Method 1: Manual Update

Step 1: Download the Latest Version:

Visit codecanyon.net/downloads and locate the WP Maps Pro plugin.
Download the plugin in the form of a zip file to your computer.

Step 2: Update via WordPress Dashboard:

Log in to your WordPress Dashboard.
Navigate to “Plugins” and click “Add New.”
Click the “Upload Plugin” button at the top.
Choose the downloaded zip file and click “Install Now.”
WordPress will automatically replace the previous version with the new one.
Your data remains intact throughout this process.

Method 2: Automated Update using Envato Market Plugin

Step 1: Install Envato Market Plugin:

Download the Envato Marker Plugin
Install the plugin.

Step 2: Configure Envato API Personal Token:

Visit build.envato.com and generate an API Token.
In the WordPress Dashboard, go to the “Envato Market” settings.
Enter the API Token in the designated field to establish a secure connection.

Step 3: Access Purchased Plugins:

Once connected, a list of purchased WordPress plugins becomes available.
You can now install or update any purchased plugins directly within WordPress.

Conclusion: By following these methods, you can seamlessly update your WP Maps Pro plugin to its latest version. Whether you choose the manual approach or leverage the Envato Market Plugin, staying up-to-date ensures optimal performance and access to the plugin’s enhanced features.

Search Widget For Google Maps is an extension of the WP Maps Pro plugin. This extension creates a search widget for site users where the user searches and then he will be redirected to the map page where this location displays the search result.

Using this shortcode [google_search_form map_url="your_map_page_url"] admin can display the search forms very easily and with flexibility. Admin can easily decide which map will connect with a specific search form by passing a map URL in the shortcode.

Please make sure you have installed the WP Maps Pro plugin on your website. In case you have not installed it yet. Please download these plugins and configure them first. Here are the following steps to install the WP MAPS PRO plugin.

Here are the following steps to configure Search Widget For Google Maps add-on:

After installing and activating this add-on:

You have to enable a URL filter for that specific map, for enable the URL filter please go to add/edit map scroll down to Advanced Settings switch to enable URL Filters. For displaying form please place this code in any page/post/widget where you want to show it.

You could pass the form title, search box placeholder, and search location button text through a parameter in a shortcode. There is the plugin settings page for saving these parameter values common for all search forms. The Shortcode parameter got priority to show labels in form.

Please make sure you have installed the WP MAPS PRO plugin on your website. In case you have not installed it yet. Please download this plugin and configure them first. Here are the following steps to install the WP MAPS PRO plugin.

Here is the following process to configure the Search Widget for WP Maps Pro:

Step 1: Please navigate to the “WP MAPS PRO -> Search Widget Settings”, fill in form details as per your requirements and save this setting.

Step 2: Please insert this shortcode [google_search_form map_url=""] on any page/post/widget where you want to show search form.
Example: [google_search_form map_url="https://www.wpmapspro.com/example/restaurants-listing/“]

Note: “map_url” this parameter is required for searching on the map.

You could pass the form title, search box placeholder, and search location button text through a parameter in a shortcode. These shortcode parameters got priority to show labels in form.

1. Search Widget title: Please pass this “title” parameter as below given.
[google_search_form map_url="https://www.wpmapspro.com/example/restaurants-listing/" title="Find Near By Restaurant"]

2. Search Widget Placeholder Please pass this “placeholder” parameter as below given.
[google_search_form map_url="https://www.wpmapspro.com/example/restaurants-listing/" placeholder="Enter restaurant name / cuisine name / dish name "]

3. Search Widget Button Text Please pass this “button_text” parameter as below given.
[google_search_form map_url="https://www.wpmapspro.com/example/restaurants-listing/" button_text="Search Restaurants"]

To view an example of Grid style please click here.

With this WP MAPS PRO and JSON To maps plugin, site admins can display JSON data on google maps very easily and with flexibility. Site admin just needs to upload a JSON file in backend and then he/she needs to do the mapping that will decide what will be served as title, content, and images in the info-window and listing from the JSON file.

Please make sure you have installed WP MAPS PRO plugin into your website. In case you have not installed it yet. Please download these plugins and configure them first. Here are the following steps to install the WP MAPS PRO plugin.

Here is the following process to configure JSON Data On maps plugin:

Step 1: Please navigate to the “WP MAPS PRO -> JSON File To Map”.

Step 2: Please select your map from the given ‘Select Map’ dropdown to add locations on a map.

Step 3: After selecting a map you will see one more dropdown “Choose JSON File” is visible here, please upload a JSON file.

Step 4: When you upload a JSON file, all the columns associated with it appear below with some dropdown. Select associated location field data from the given dropdown in front of a table field.

Step 5: After selecting the associated location field from the given dropdown in front of a table field, click on ‘Save Settings’.

Note: Title, Latitude, and Longitude are required for mapping. You can use Extra Fields and Category for multiple column mapping.

Step 6: Please edit a specific map from the map listing page edit the selected map and scroll down to the “JSON To Google Maps (Addon Settings)”.

Step 7: Enable “Enable MySql Locations” checkbox from ‘JSON To Google Maps (Addon Settings)‘ given section and save settings.

Step 8: After enabling this add-on please click on “Save Map”.
You could see your selected table field data is displaying on a selected map.

You will see the working demo here.

With this Excel To WP Maps plugin addon/extension, site admins can display excel sheet data on google maps very easily and with flexibility. Site admin just needs to upload the excel sheet in the backend and the second step is to do the column mapping to serve excel sheet columns as title, content, and images in the info window and listing. This is a premium addon of our WP MAPS PRO plugin For the WordPress main plugin.

Here is the following process to configure Excel Data On Maps plugin add-on:

Step 1: Please navigate to the “WP MAPS PRO -> Excel File To Map”.

Step 2: Please select your map from the given ‘Select Map’ dropdown to add locations on a map.

excel to Map

Step 3: After selecting a map you will see one more dropdown “Choose Excel File” is visible here, please select an excel file.

excel data map

Step 4: When you upload an excel file, all the columns associated with it appear below with some dropdown. Select associated location field data from the given dropdown in front of a table field.

excel data on a map

Step 5: After selecting the associated location field from the given dropdown in front of a table field, click on ‘Save Settings’.

Note: Title, Latitude, and Longitude are required for mapping. You can use Extra Fields and Category for multiple column mapping.

Step 6: Please navigate to the “WP MAPS PRO -> Edit Map” edit the selected map and scroll down to the “Excel To Google Maps (Addon Settings)”.

Step 7: Enable “Enable MySql Locations” checkbox from ‘Excel To Google Maps (Addon Settings)‘ given section and save settings.

edit map

Step 8: After enabling this add-on please click on “Save Map”.
You could see your selected table field data is displaying on a selected map.

save map

You will see working demo here.

With this WP Maps Pro and Mysql Data On maps plugin, you can display custom Mysql table data on google maps very easily and with flexibility. You can easily decide what information pieces ( out of different columns in the table) they want to display on google maps. The Mysql table columns can be easily selected and mapped from the back-end to serve as title, content in the info-window, and listing.

Here is the following process to configure Mysql Data On maps plugin add-on:

Step 1: Please navigate to the “WP Maps Pro -> MySQL TABLE To Map”.

Step 2: Please select your map from the given ‘Select Map’ dropdown to add locations on a map.

Step 3: After selecting a map you will see one more dropdown “Please Select a WordPress Table” is visible here, select table to map fields for location.

Step 4: When you select the table, all the columns associated with it appear below with some dropdown. Select associated location field data from the given dropdown in front of a table field.

Step 5: After selecting the associated location field from the given dropdown in front of a table field, click on ‘Save Settings’.

Note: Title, Latitude, and Longitude are required for mapping. You can use Extra Fields and Category for multiple column mapping.

Step 6: Please navigate to the “WP Maps Pro -> Edit Map” edit the selected map and scroll down to the “MySql To Google Maps (Addon Settings)”.

Step 7: Enable “Enable MySql Locations” checkbox from ‘MySql To Google Maps (Addon Settings)‘ given section and save settings.

Step 8: After enabling this add-on please click on “Save Map”.
You could see your selected table field data is displaying on a selected map.

You will see working demo here.

Now you can display custom Mysql data on Google Maps.

With this WP MAPS PRO and Airtable Data To maps plugin, site admins can display airtable’s spreadsheet data on google maps very easily and with flexibility. Site admins can easily decide what information pieces ( out of different columns in table) they want to display on google maps. The airtable table columns can be easily selected and mapped from back-end to serve as title, content and images in the info-window and listing.

Generate Airtable Base ID and Personal Access Tokens

You need to Airtable Base ID and API Key to display airtable data on google map, please follow these steps to get an ‘Airtable Base ID’ & ‘Airtable Access Tokens’:

Airtable Personal Access Token:

Step 1: Please visit airtable website and log in with the account details, open the Create Token page(Account Page -> Go to developer hub -> Create Token) there is a button Create New Token. Click on this button.

airtable-create-token

Please add the unique token name and select these 2 scopes.

1. data.records:read

2. data.records:write

then select your base/workspace, where your table exists, and click on Save Changes.

airtable-create-token

A new pop-up will display, please copy your Personal Access Token.

Airtable Base ID:

Step 2: Please click on the ‘Airtable API‘ link is given in API description in generate the API page.

Step 3: In this API page click on your base which base data you want to show on the map, now you are in your base api page in this page your selected base ID is displaying here.

Step 4: Please navigate to the “WP MAPS PRO -> Configure Airtable” insert your airtable Base ID and access token in the ‘Configure Airtable Details’ section.

airtable-connection-with-maps-pro

Step 5: After a small process please click on “save settings”.

Display Airtable data on Google Map

Here is the following process to configure Airtable Data To maps plugin add-on:

Step 1: Please navigate to the “WP MAPS PRO -> Add Map” create a map and scroll down to the “Airtable To Map (Add-On Settings)”.

Step 2: Please navigate to the Airtable Table Name textbox insert here your airtable database table name which you want to show on a map.

Step 3: Please go to the “Airtable To Map (Add-On Settings)” section, enter the name of the column of your table, the table name you have entered in the ‘Airtable Table Name’.

Step 4: After a small process click on save map.

To see the working demo please click here.

Using this Google Map add-on your site visitor could bookmark their favorite locations on a map. In this add-on, you could display a bookmark icon on location infowindow or a location listing as per your requirements. You need to this {is_favorite} placeholder to display a location bookmark icon on location info window and location listing according to you.

Before activating this extension, you need first to activate WP MAPS PRO. Please follow the given steps to configure this add-on.

Step 1 Please navigate to Add or Edit Map and scroll down to “Infowindow Message for Locations” section and insert bookmark placeholder on your selected info window.

Step 2 Please navigate to “Location Listing” section and insert a bookmark placeholder on your selected info window.

Step 3: After a small process click on “Save Map” button.

You will see the working demo here.

“Google Maps Skin Color” Using this google map extension you can set custom colors on google map. You can easily apply custom color on google map with help of color picker and color swatches. Here are the following steps to configure this add-on with WP MAPS PRO.

Set Custom Colors On Google Maps Skin

Please make sure you have installed the WP MAPS PRO plugin into your website. In case you have not installed it yet. Please download these plugins and configure them first. Here are the following steps to install the WP MAPS PRO plugin.

Here are the following Steps to setup Google Maps Skin Color add-on:

Step 1: Please navigate to the “WP MAPS PRO -> Maps Skin Editor”.

Step 2: Select your map from the given ‘Select Map’ dropdown on this page.

Select Google Maps

Step 3: Afte selecting map you will see two checkboxes are visible “Enable & apply skin color for this map” is for apply skin color on map and “Apply via color picker & override color schema” is for override custom skin color on map.

Step 4: Please enable the “Enable & apply skin color for this map” and select color as per your choice from given color schema in this page.

Step 5: If you want to apply own schema color then enable “Enable & apply skin color for this map” then navigate to the “Apply via color picker & override color schema” and select color as per your choice.

Step 4: After a small process please click on “Apply Style”.
You can view a working example here.

Archives: Docs

1). Display Frontend Submission Form:

2). Manage Frontend Submission Form:

3). How To Add Extra Data Fields On Add Location Form:

4). How To Display Selected Categorie on Frontend Form:

5). How To Display Submitted Location Listing Table:

6). How To Display Selected Extra Field In The Listing Table:

Display Import Location On Frontend

Manage Add-on Setting

Method 1: Manual Update

Method 2: Automated Update using Envato Market Plugin

Generate Airtable Base ID and Personal Access Tokens

Display Airtable data on Google Map

Set Custom Colors On Google Maps Skin

Install Plugin Now!

Use Cases Demos

Quick Links

Live Examples