Using this Google Map extension you can display google maps in different layouts according to your choice.

Display Google Maps and Listing on Design

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 “Choose Layout For Google Maps” section.

Step 2 Please enable the “Enable Layouts On Map” checkbox to apply the design on this google map and it’s listing.

Step 3 When you enable layout on a map you will see one more option are visible “Select Layout”. Now select layout according to your choice.

Step 6 After a small process please click on “Save Map”.

Enable Map Zoom Hover On Location Title

Step 1 Please enable “Enable Map Zoom On Hover” checkbox from ‘Choose Layout For Google Maps’ to enable zoom into the map when a user hovers on location title.

Step 2 After enabling the above defined option you will see one more option are visible “Enter Zoom Level”, enter zoom level as per your requirement on a given textbox.

Step 3 After a small process please click on “Save Map“.

You can view google map and listing design working example here.

Gravity Form Submissions On Google Maps add-on get entries from gravity form and show locations on google map. Here are the following steps to configure this add-on with Gravity Form and WP MAPS PRO.

Displays Gravity Form Submissions On Google Maps

Please make sure you have installed Gravity Form and 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 Gravity Form Submissions On Google Maps add-on:

Step 1 Create a new Gravity Form, navigate to Gravity Form -> New Form or edit your existing form and start building your form.

Step 2 Please add “Google Autosuggest” type control from Standard Fields section which is registered by our plugin. This field enables google autosuggest feature in frontend form. Users could submit their locations from the frontend.

Displays Gravity Form Submissions On Google Maps

Step 3 After adding all form elements according to you, now update this form.

Step 4 Now we are going to enable location mapping into your selected gravity form navigate to Settings-> Location Mapping. It’s connect form field to locations field.

Displays Gravity Form Submissions On Google Maps WP Maps Pro

Step 5 In Location Mapping setting page, please enable the checkbox of “Enable Mapping” & also select from fields dropdown connect with corresponding location property. Now update settings.

Displays Gravity Form Submissions WP Maps pro

Step 6 After complete mapping process, please navigate WP MAPS PRO -> Add Map or Edit Map and find the “Gravity Form Submissions To Google Maps (Addon Settings)” section and enable the checkbox provided.

Gravity Form Submissions On Google Maps

Step 7 Now select Gravity Form in edit map page, from given “Select Gravity Form” dropdown in Addon Settings to show entries on a map. Select which one gravity form you mapped & want to show entries on the map.

Gravity Form Submissions On Google Maps WP Maps Pro

Step 8 You can display Gravity Form submissions in the marker info window. You can manage info in the marker info window using placeholders. Please find the “Infowindow Message for Gravity Form Entries” section and edit the info window message using placeholders according to your requirement.

Displays Gravity Form Submissions On Google Maps

Step 9 Save this edit map page settings. The shortcode generated by this map will display all the entries submitted by the gravity form on any page.

Step 10 When users submit their details from gravity form and you could see submitted entries showing on google map.
Please have a look once here working example.

This WP MAPS PRO add-on takes visitor’s inputs from cf7 form, creates a custom post type in backend and display all the submitted entries on google map in an interactive way. Creates google’s autosuggest address field, allowing visitors to provide their exact location easily through the CF7 form.

Displays CF7 Form Submissions On Google Maps

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

Step 1 Create a new CF7 form Contact Form=> Add New Form, You will also need to add a Google Autosuggest type control along with other form elements on the cf7 form, so that visitors can specify their location easily and to display that entry on google maps later.

Displays CF7 Form Submissions On Google Maps

This field must be set as mandatory by using the default “*” character. Please see the above image for reference.

Step 2 After adding address field now click on “Additional Settings” tab and add 4 lines of text displayed in the below image in the additional settings tab.

Displays CF7 Form Submissions WP Maps Pro

cf7entry : true (For specifying that submission from this form needs to be saved in the database)
cf7entry_title_field : your-name (Name of the field whose value will be displayed as title in info window)
cf7entry_message_field : your-message (Name of a field whose value will be displayed as main content in info window)
cf7entry_featured_image_field : your-image (Name of file control field whose image needs to be saved on a server and later displayed on info window)

Step 3 Please navigate to Add or Edit Map and scroll down to the GEO Tags section and enable the checkbox provided.
Now copy and paste names of three fields in the textboxes provided in front of “cf7_as_entries” post type.
Name of three fields are:-
fc_cf7_autosuggest_place,
fc_cf7_autosuggest_lat,
fc_cf7_autosuggest_lng

Displays CF7 Form Submissions On Google Maps

Also, you can change the info window design & listing style from the edit map page according to you.

Step 4 Save the map. The shortcode generated by this map will display all the entries submitted by the CF7 form on any page.

Step 5 Users could submit their details with current location from the CF7 form very easily with google’s autosuggest address control.

Displays CF7 Form Submissions On Google Maps Wp Maps Pro

Step 6 All submitted entries now displayed in given map
Please check working demo here.

An WP MAPS PRO plugin extension that displays registered WordPress users of your site on google maps easily with all the user information in info window and listing.
Using this extension you can display their registered users on Google Map by user roles.

Display WordPress Users On GoogleMaps

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 “WordPress Users on Google Maps (Addon Settings)” section.

Step 2 Enable “Enable Addon” checkbox from ‘WordPress Users on Google Maps (Addon Settings)‘ given section and save settings.

How to Display WordPress Users On GoogleMaps Wpmapspro

After this small process Autosuggest Address Field visible on Register/ edit user profile page similar to the below screenshot.

Register page view:-

How to Display WordPress Users On GoogleMaps Wpmapspro

Admin Edit User Page view:-

How to Display WordPress Users On GoogleMaps Wpmapspro

Assign marker icons to the WordPress user roles

Step 3 Now Assign icons according to the WordPress User roles. First, you need to create a marker category from “WP MAPS PRO => Add Marker Category”. You can name the marker category according to you/user roles.

How to Display WordPress Users On GoogleMaps

After creating marker categories in the WP MAPS PRO plugin, now you can assign a marker icon to the User Roles.

Step 4 Now navigate to “Users -> Assign Role Category” here display all user roles. Click on the edit link of any user role, you are in the “Assign Category to-“ page here displaying all created google maps marker categories with an icon. Select category according to you then save it.

How to Display WordPress Users On GoogleMaps Wpmapspro

Display Only selected WordPress user roles in map

Step 5 Please navigate to Add or Edit Map and scroll down to “Select Roles’s to Display” in WordPress Users on Google Maps ( Addon Settings ) section select roles according to you and save it.

Display Only selected WordPress user roles in map Wpmapspro

Step 6 Now you can see only selected user roles are displaying on map.
You can view wordpress users on map in this working example.

An WP MAPS PRO plugin extension that displays registered BuddyPress members of your site on Google Maps easily with all the member information in info window and listing.
Using this extension admin can display their registered BuddyPress members on Google Maps by user roles or BuddyPress group.

Display BuddyPress Members On GoogleMaps

Before activating this extension, you need first to activate BuddyPress & 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 “Buddypress Members Google Maps (Addon Settings)” section.

Step 2 Enable “Enable Buddypress” from ‘Buddypress Members Google Maps (Addon Settings)‘ given section and save it.

How To Display BuddyPress Members On GoogleMaps Wpmapspro

Add ‘Address’ field on Register/ edit profile page:

Step 3 Add ‘Address‘ field, click on “Profile Fields” of buddypress’s menu available in wordpress users menu.

Step 4 In “Profile Fields” page,Here Click on “Add new field” button in ‘Base(Primary)’ Tab.

Step 5 Enter field name for Address field then select field type “Google Autosuggest type” and save it.

After this small process Autosuggest Address Field visible on Register/ edit profile page.

Assign marker icons to the user roles/groups:

Step 6 Now Assign icons according to the all User roles/Groups. First, you need to create a marker category from “Add Marker Category” in WP MAPS PRO. You can name the marker category according to you/user roles.

Display BuddyPress Members On GoogleMaps

After creating marker categories in WP MAPS PRO plugin, now admin can assign a marker icon to the User Roles/Groups.

Step 7 Now navigate to “Users -> Manage Marker Categories” here display all user roles, edit any user roles to assign marker icons according to you.

Display BuddyPress Members On GoogleMaps

Step 8 click on the edit link of any user role, you are in the “Assign Marker Category to-user role” page here displaying all created google maps marker categories with an icon. Select category according to you then save it.

Assign Marker Category to-user role

Display only BuddyPress group members/BuddyPress users on the map:

Step 9 If you wants to show only BuddyPress group members on the map then enable “Select Group’s to Show” given in the addon setting section.

Step 10 If admin wants to show only BuddyPress registered members on the map then enable “Select Roles’s to Show” given in the addon setting section and save it.

Select Roles's to Show

Display BuddyPress user’s info in the marker infowindow:

You can display BuddyPress user’s info in the map user info window. You can manage info in the marker info window using placeholders.

Step 11 Navigate to Add or Edit Map and scroll down to “Message for Buddypress Member” section.edit this according to you & save it.

Display BuddyPress user's info in the marker infowindow

After saving this setting you can view BuddyPress members info on the map’s marker.

After saving this setting you can view BuddyPress members info on the map's marker

After saving all settings you can view BuddyPress members on the map.
To view example, click on BuddyPress members

Extra fields are used to display extra information about the location in info-window by using custom placeholders. WP Google map allows you to create unlimited extra fields and display them in the info window.

Display extra fields

Step 1: First you can create Extra Field from Extra Field link.

Step 2: After add extra field in location, Go to Add or Edit Map page and scroll down to ‘Info window Message for Locations / Listing Item Skin’ section and use placeholders in ‘Info window Message’ HTML input field.
* Use {extra_field} to display extra field, in the info window content.
In this e.g, You can use the extra field as:
Rating – {rating}
Hours – {hours}
Website – {website}

Step 3: click Save Map and your Location infowindow & Listing looks like :

In our WP MAPS PRO plugin version 5.0, we have introduced a new feature where a user can able to filter the locations directly from the URL.

Step 1: Please Go to the Manage Maps page, Now Add/Edit Map and scroll down to the URL Filters Settings section.

Please switch on the Enable URL Filter.

Step 2: Click on Save Map and You are done.

Now Go to the frontend page where the map is located and pass the parameter with the query string in the URL. Below Mentioned Query Parameters, you can pass along with the URL

search, category, limit, perpage, show_all_locations=true, zoom, hide_map=true, map_only=true

Examples:

1.) Search Filter: Filter the locations by matching the search text from the URL

Example: https://www.wpmapspro.com/example/filter-by-category-in-google-maps/?search=american

2.) URL Category Filter: Filter the category direct from the URL

Example: https://www.wpmapspro.com/example/filter-by-category-in-google-maps/?category=beaches

3.) URL Zoom Filter: You can change the zoom of the map using a Zoom URL filter.

Example: https://www.wpmapspro.com/example/filter-by-category-in-google-maps/?zoom=1

4.) URL Per Page Filter: Display # of Locations per page.

Example: https://www.wpmapspro.com/example/a-complete-listing-solution-for-google-maps/?perpage=3

5.) Hide Map Filter: You can hide the map using the URL Filter parameter ‘hide_map= true’.

Example: https://www.wpmapspro.com/example/a-complete-listing-solution-for-google-maps/?hide_map=true

6.) Map’s Only URL Filter: To show only maps. Tabs, filters, and listings will be hidden.

Example: https://www.wpmapspro.com/example/a-complete-listing-solution-for-google-maps/?maps_only=true

In our updated version 5.0.0 the plugin, we have added several skins that are applied on a Location infowindow very easily. We have also provided an editor which is very useful for customizing the info window content like Fonts Family, Font Style, Alignment, Font Color, Font Size, Font Color, etc similarly you can manage info window by applying your custom margin, and padding and choose a background color or any image as a background. This package makes the plugin more powerful. In this tutorial we’ll help you to apply skins on a Location Info window and customize it using Editor.

How to Apply skin on a Location Infowindow

Step 1: Go to Add Map or Manage Maps > Edit Map.

Step 2: Scroll down to Infowindow Message for Locations section and Choose the skin.

Skins Infowindow

Step 3: On the left side, you can modify the HTML structure, add new content, and use placeholders to show extra fields. Click on Apply Changes to preview the changes.

Edit Infowindow Contents

Step 4: Click Save Map and see the changes.

In WP Maps Pro, you have the ability to create custom filters that allow users to dynamically refine the displayed locations on Google Maps. These filters provide a powerful tool for enhancing user experience and improving the relevance of map-based content. In this tutorial, we’ll walk through the process of creating custom filters step by step, enabling you to effortlessly add this valuable feature to your maps.

Prerequisites:

WP Maps Pro plugin installed and activated on your WordPress site.
Locations already assigned to a map in the “Assign Locations To Map” section.

Step 1: Enable Custom Filters

Go to Add/Manage Map:
- Navigate to the “Add/Manage Map” section in WP Maps Pro.
Edit the Desired Map:
- Choose the map for which you want to enable custom filters.
- Edit the map to access its settings.

Step 2: Assign Locations

Assign Locations:
- In the map editing interface, locate the “Assign Locations To Map” section.
- Select the locations you want to display on the map.

Step 3: Enable Custom Filters

Scroll Down:
- Scroll down within the map editing interface to find the “Custom Filters” section.
Enable Custom Filters:
- Look for the “Display Custom Filters” option within this section.
- Toggle it ON to enable custom filters for this map.

Step 4: Define Placeholders and Filter Labels

Insert Placeholders:
- In the same “Custom Filters” section, locate the text input fields.
- Use placeholders like {country}, {state}, {city}, or any other relevant placeholders.
- These placeholders correspond to the fields you want to use for filtering (e.g., location country, state, city).
Set Filter Labels:
- In the adjacent text input fields, insert the filter labels.
- These labels will be displayed to users on the frontend, allowing them to understand the purpose of each filter.

Step 5: Save Map

Save Changes:
- Once you’ve added the placeholders and set the filter labels, scroll to the bottom of the map editing interface.
- Click the “Save Map” button to save your changes.

Step 6: Observe Custom Filters on Frontend

View the Map:
- Visit the frontend page where the map is displayed.
Explore Custom Filters:
- You’ll now see the custom filters you created on the map.
- Users can interact with these filters, refining the displayed locations based on the selected filter criteria.

Conclusion:

Congratulations! By following this tutorial, you’ve successfully created custom filters for your WP Maps Pro maps. These filters provide users with a convenient way to tailor the map’s content to their preferences, enhancing the usability and relevance of your map-based content. Experiment with different placeholders and filter labels to optimize the user experience, and enjoy the benefits of a more interactive map!

Archives: Docs