Docs Archive - Page 4 of 12 - WP Maps Pro

15000+ live websites are using this google maps wordpress plugin.

Archives: Docs

The Google Maps Skin Color add-on for WP MAPS PRO allows you to apply unique custom colors to your maps. Using the built-in color picker and color swatches, you can style maps to match your website’s branding or design theme.

Set Custom Colors on Google Maps

Note: Please ensure you have installed and activated the WP MAPS PRO plugin before using this add-on. If not, click here to follow the installation steps.

Steps to Configure Google Maps Skin Color Add-on:

Step 1: Go to WP MAPS PRO → Maps Skin Editor.

Step 2: From the dropdown menu, select the map where you want to apply the custom skin.
Google Maps Skin Editor

Step 3: You will see two options:
– Enable & apply skin color for this map → Apply the selected skin colors.
– Apply via color picker & override color schema → Use custom colors with the color picker.
Map Skin Options

Step 4: Enable the option and select colors from the provided schemas.
Choose Map Colors

Step 5: To override with your own colors, enable both checkboxes and pick your desired shades.
Custom Color Picker

Step 6: Click Apply Style to save changes. Your map will now display with your chosen custom colors.

Live Demo

👉 See it in action: Google Maps Skin Color Demo

Need Help?

For assistance, visit our support center.

With the Layouts & Designs Extension for WP MAPS PRO, you can display Google Maps and location listings in a variety of styles. This feature allows you to customize how maps and their associated listings appear, giving you full control over layout and user experience.

Display Google Maps with Listings in Your Chosen Design

Note: Make sure WP MAPS PRO is installed and activated before configuring this add-on. If not, follow the setup guide first.

Step 1: Navigate to Add or Edit Map and scroll down to the “Choose Layout For Google Maps” section.
Choose Layout for Google Maps

Step 2: Enable the “Enable Layouts On Map” checkbox to apply a custom design to your Google Map and its listing.
Enable Layout on Google Maps

Step 3: Once enabled, you will see a new option: “Select Layout.” Choose your preferred layout from the available options.
Select Google Maps Layout

Step 4: Click “Save Map.” Your map will now display with the selected design.
Google Maps Listing Design

—

Enable Map Zoom on Hover (Optional)

Step 1: Enable the “Enable Map Zoom On Hover” checkbox under the ‘Choose Layout For Google Maps’ section. This zooms into the map when a user hovers over a location title.
Enable Map Zoom Hover

Step 2: Set your preferred Zoom Level in the provided textbox.

Step 3: Save the map to apply the changes.
Google Map Zoom on Hover

—

Live Example

👉 Check out a working demo here: Google Maps Listing Designs Demo

Need Help?

For assistance, visit our support center.

The Gravity Form Submissions on Google Maps add-on lets you capture user entries via Gravity Forms and display them as interactive markers on Google Maps using WP MAPS PRO. This is perfect for showing user-submitted locations, customer addresses, or event entries directly on your site’s map.

Requirements

– Gravity Forms plugin installed & activated
– WP MAPS PRO plugin installed & activated

If not installed, please follow the setup guide first.

Steps to Setup Gravity Form Submissions on Google Maps

Step 1: Create or edit a Gravity Form from Forms → New Form.
Step 2: Add the Google Autosuggest field (provided by WP MAPS PRO) from the Standard Fields section so users can enter their location.
Gravity Forms Google Autosuggest Field

Step 3: Save/Update your form.

Step 4: Go to Form Settings → Location Mapping and enable mapping for this form.
Location Mapping Gravity Forms

Step 5: In the mapping screen, enable “Enable Mapping” and connect form fields (like name, address, phone) to map fields (like title, content).
Map Gravity Form Fields

Step 6: Go to WP MAPS PRO → Add/Edit Map. Find “Gravity Form Submissions To Google Maps (Addon Settings)” and enable it.
Enable Gravity Form Map Add-on

Step 7: Select your Gravity Form from the dropdown list to display its entries on the map.
Select Gravity Form in WP Maps Pro

Step 8: Customize your Info Window design by using placeholders in “Infowindow Message for Gravity Form Entries.”
Customize Gravity Form Info Window

Step 9: Save the map. Copy the generated shortcode and place it in any page/post.

Step 10: When users submit the Gravity Form, their entries will instantly appear as markers on your Google Map 🎉.

👉 See a working demo here.

Need Help?

For any issues, please reach out via our support center.

The CF7 Form Submissions on Google Maps add-on for WP MAPS PRO allows you to capture visitor details submitted via Contact Form 7 and display them on Google Maps in an interactive way. This add-on adds a Google Autosuggest Address Field, so users can easily provide their exact location while submitting a form.

Requirements

– Contact Form 7 installed & activated
– WP MAPS PRO installed & activated

If not installed yet, please follow the installation steps first.

Steps to Configure CF7 Submissions on Google Maps

Step 1: Create a new CF7 form (from Contact → Add New Form) and add the Google Autosuggest field provided by WP MAPS PRO. This field is required so users can submit their exact location.
Add Google Autosuggest field in CF7

—

Step 2: Go to the Additional Settings tab in your form and add the following lines:

  • cf7entry : true → Save entries to the database
  • cf7entry_title_field : your-name → Display this field value as the marker title
  • cf7entry_message_field : your-message → Display this field value as marker content
  • cf7entry_featured_image_field : your-image → Save image uploads as marker images

Additional settings in CF7 for Google Maps

—

Step 3: Go to WP MAPS PRO → Add/Edit Map. In the GEO Tags section, enable the checkbox and map the following fields to cf7_as_entries post type:
– fc_cf7_autosuggest_place
– fc_cf7_autosuggest_lat
– fc_cf7_autosuggest_lng
Map CF7 fields to Google Maps

—

Step 4: Save the map. Copy the generated shortcode and paste it on any page/post where you want to display submissions.

Step 5: Users can now submit forms with Google Autosuggest. Their entries, including exact location, will be saved and displayed on the map.
Display CF7 Submissions on Google Maps

Step 6: All submitted entries will appear instantly on the map as interactive markers 🎉

👉 See a working demo here.

Need Help?

If you face any issues, please visit our support center.

The WordPress Users on Google Maps add-on for WP MAPS PRO allows you to display registered users of your site on an interactive Google Map. You can show user information in markers, info windows, and listings — and even filter by user roles with custom marker icons.

Requirements

– WP MAPS PRO installed & activated

Steps to Configure WordPress Users on Google Maps

Step 1: Go to Add or Edit Map and scroll down to “WordPress Users on Google Maps (Addon Settings)”.

Step 2: Enable the “Enable Addon” checkbox and save.
Enable WordPress Users on Google Maps Addon

Now, an **Autosuggest Address Field** will appear on the user registration and profile edit pages.

– Example Registration Page:
Registration page autosuggest field

– Example Admin User Edit Page:
Edit user with Google Maps autosuggest

—

Assign Marker Icons to User Roles

Step 3: Create marker categories via WP MAPS PRO → Add Marker Category. Assign categories according to user roles.
Marker categories for user roles

Step 4: Go to Users → Assign Role Category. For each role, assign a marker category (with icon).
Assign marker categories to WordPress user roles

—

Display Selected User Roles on the Map

Step 5: In the map settings under WordPress Users on Google Maps (Addon Settings), use the “Select Roles to Display” option to filter by specific roles.
Select WordPress user roles to display

Step 6: Save your map. Only the selected user roles will now display on the map 🎉

👉 See a working demo here.

Need Help?

If you face any issues, visit our support center.

The BuddyPress Members on Google Maps add-on for WP MAPS PRO lets you display registered BuddyPress members on an interactive Google Map. Admins can show members by user roles or BuddyPress groups, with member details in info windows and listings.

Requirements

– BuddyPress installed & activated
– WP MAPS PRO installed & activated

Steps to Display BuddyPress Members on Google Maps

Step 1: Go to Add or Edit Map → “BuddyPress Members Google Maps (Addon Settings)”.

Step 2: Enable “Enable BuddyPress” and save.
Enable BuddyPress on Google Maps addon

—

Add an Address Field to Member Profiles

Step 3: Navigate to BuddyPress → Profile Fields in the WordPress Users menu.
BuddyPress Profile Fields Menu

Step 4: Click “Add New Field” under the Base (Primary) tab.
BuddyPress Add Profile Field

Step 5: Name the field “Address”, set the field type to Google Autosuggest, and save.
BuddyPress address field with Google Autosuggest

Now members can add/update their location in their profile.

—

Assign Marker Icons to Roles & Groups

Step 6: Create marker categories in WP MAPS PRO → Add Marker Category.
Marker Categories for BuddyPress

Step 7: Go to Users → Manage Marker Categories.
Manage marker categories for BuddyPress roles

Step 8: Edit a role, assign it a marker category with an icon, and save.
Assign marker icon to BuddyPress role

—

Filter Display by Roles or Groups

Step 9: To display only specific **BuddyPress group members**, enable “Select Group’s to Show”.
BuddyPress group display settings

Step 10: To display only specific **roles**, enable “Select Roles to Show” and save.
BuddyPress roles display settings

—

Display Member Info in Map Markers

Step 11: In the map settings, go to “Message for BuddyPress Member” and customize the info window with placeholders.
BuddyPress member info window

Your BuddyPress members will now appear on the map with full profile details.
BuddyPress member marker info

👉 See a working example here.

Need Help?

If you face any issues, visit our support center.

Extra fields in WP MAPS PRO let you show additional details (like ratings, business hours, or website links) for each location. You add these via custom placeholders and they appear in both the map infowindow and the listing view.

Steps to Display Extra Fields with Labels

Step 1: Create your extra fields from the
Extra Field settings.

Step 2: Go to Add / Edit Map → scroll to
“Info Window Message for Locations / Listing Item Skin”. Use your placeholders inside the “Info Window Message” HTML box to print extra field values with labels.

Examples (label + placeholder):

  • Rating – {rating}
  • Hours – {hours}
  • Website – {website}

Add extra field placeholders to the infowindow template

Step 3: Click Save Map. Your Location Infowindow and Listing will display the extra fields with labels.

Extra fields rendered with labels in the infowindow and listing

Need Help?

If you have questions or need assistance, please contact our support team.

In our WP MAPS PRO plugin version 5.0, we have introduced a new feature where a user can 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.
Switch on the Enable URL Filter option.

Enable URL Filter in Maps Plugin

Step 2: Click on Save Map and you’re done.

Now go to the frontend page where the map is located and pass parameters with the query string in the URL. Below are the supported query parameters:

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

Examples:

1.) Search Filter: Filter the locations by search text.


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

2.) URL Category Filter: Filter locations by category.


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

3.) URL Zoom Filter: Change the map zoom level.


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

4.) URL Per Page Filter: Display number of locations per page.


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

5.) Hide Map Filter: Hide the map with the parameter hide_map=true.


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

6.) Map Only Filter: Show only the map (hide tabs, filters, and listings).


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

Load Google Maps Only After Cookie Consent (GDPR-Compliant)

Under the EU’s GDPR, you should not load third‑party scripts that collect personal data (like the visitor’s IP via the Google Maps API) before the user has given consent. WP MAPS PRO supports a consent-first flow so maps and their scripts load only after the visitor accepts cookies.

What’s the Issue?

Google Maps loads via the Google Maps JavaScript API. When this script is requested, the visitor’s IP address is sent to Google. Without prior consent, this can violate GDPR. The solution is to hold back the Maps scripts until the user accepts cookies.

Steps

Step 1: Go to WP MAPS PRO → Settings and enable Cookies Acceptance. Once enabled, the Google Maps API and maps will load after the visitor accepts cookies.

Enable Cookies Acceptance so maps load after consent

Step 2: Show a cookie consent banner. We recommend Cookie Notice by dFactory,
which is simple and flexible.

Step 3: (Optional, for custom consent plugins) Use the
wpgmp_accept_cookies hook to tell WP MAPS PRO when to load scripts. This lets you integrate with
any GDPR/cookie plugin. Below is an example for the “Cookie Notice by dFactory” plugin.

Code Example: Verify Consent Before Loading Maps

Add this snippet to a site-specific plugin or your (child) theme’s functions.php:


// Let WP MAPS PRO know if cookies were accepted.
// Example for "Cookie Notice by dFactory" plugin.
add_filter('wpgmp_accept_cookies', function ($accepted) {
    // If Cookie Notice is active, use its helper.
    if (function_exists('cn_cookies_accepted')) {
        return cn_cookies_accepted(); // true when user has accepted cookies
    }
    // Fallback to whatever WP MAPS PRO passed in.
    return $accepted;
});

Reference gist:
Verify Cookies Consent Before Showing the Google Maps

Tips

  • If you use a different consent plugin, adapt the filter to call that plugin’s “consent accepted” function.
  • After enabling consent mode, clear any caching/optimization (page cache, CDN, JS defer) so the change takes effect.
  • Consider displaying a placeholder box (e.g., “Map will load after cookies are accepted”) for better UX.

Need Help?

Questions or custom integrations for GDPR? Email us at support@flippercode.com or open a ticket via our
Support Center.

In WP MAPS PRO v5.0+, you can apply ready‑made info window skins and fine‑tune the design with a built‑in editor. Customize font family, size, color, alignment, spacing (margin/padding), and even set background colors or images for a polished, on‑brand look.

Apply a Skin to a Location Info Window

Step 1: Go to WP MAPS PRO → Add Map or Manage Maps → Edit Map.

Step 2: Scroll to the Infowindow Message for Locations section and choose a Skin from the list.

Select an info window skin in WP MAPS PRO

Step 3: Use the left‑side editor to edit HTML, add content, and insert placeholders (e.g., extra fields). Click Apply Changes to preview.

Customize info window layout, text, and placeholders

Step 4: Click Save Map and check the frontend to see the updated design.

Customization Tips

  • Typography: Set font family, size, weight, and alignment for titles and body text.
  • Branding: Apply background colors or a background image for consistent branding.
  • Spacing: Use margin/padding controls for clean, readable layouts.
  • Dynamic Data: Insert placeholders (e.g., {title}, {address}, your extra fields) to auto‑populate content.
  • Preview Often: Use Apply Changes before saving to confirm your styling.

Need Help?

If you have questions or need styling guidance, visit our
Support Center.

Install Plugin Now!

WP MAPS PRO helps you create dynamic, customizable maps using Google Maps or Leaflet — no coding required. Includes free updates, premium support, and a 30-day money-back guarantee.

Get Started Now
Proudly crafted & developed by flippercode.com
Use Cases Demos