14500+ website owners are using this wordpress map plugin

Buy Now - $89

Archives: Docs

Welcome to the WP Maps Pro Troubleshooting Guide! Maps are an essential component of enhancing user experience and conveying information effectively. However, there are instances when maps might not appear as expected. Whether it’s missing markers, blank spaces, or completely invisible maps, this guide is designed to help you navigate through common issues and find solutions to ensure your WP Maps Pro integration functions seamlessly. Let’s delve into the troubleshooting steps that will assist you in getting your maps up and running smoothly.

Troubleshooting Steps:

One of the first steps in troubleshooting map visibility issues is to inspect the JavaScript console for any error messages. By right-clicking on the page, selecting “Inspect” or “Inspect Element,” and navigating to the “Console” tab within your browser’s Developer Tools, you can uncover potential errors related to Google Maps or JavaScript. These error messages provide valuable insights into the underlying causes behind the map’s invisibility, helping you pinpoint and address the issue effectively.

  1. Google Maps API Key Configuration:
    • Possibility: Incorrect Google Maps API Key configuration, particularly the Key Restrictions setting. You’ll see a “RefererNotAllowedMaperror” error in the Javascript console.
    • Solution: Double-check your Google Maps API Key setup. Ensure the key restrictions are correctly configured according to your usage. Verify that the API key has access to the necessary services. Check the guide about Generating Google Maps API Key.
  2. Multiple Maps Plugin Conflict:
    • Possibility: Activation of multiple Google Maps plugins leads to conflicting API loads. You’ll see “You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.”” in the Javascript console.
    • Solution: Deactivate or uninstall any additional Google Maps plugins you may have. Running multiple map plugins can cause conflicts in API loading. Stick with the WP Maps Pro plugin for smooth integration.
  3. Theme’s Google Maps API Inclusion:
    • Possibility: Your theme includes its own Google Maps API calls, leading to conflicts. You’ll see “You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.”” in the Javascript console.
    • Solution: Check your theme settings or documentation. If your theme is loading its own Google Maps API, it might clash with WP Maps Pro. Consider disabling the theme’s built-in Google Maps integration.
  4. jQuery Exclusion:
    • Possibility: jQuery, essential for our maps script, is excluded by another plugin or theme. you’ll see the “jQuery is not defined” error in the javascript console.
    • Solution: While rare, ensure that jQuery is not excluded by any other plugin or theme. Our maps script relies on jQuery for proper functionality. Go to WP Maps Pro > Plugin Settings and tick on “Auto Fix” in the “Troubleshooting” section.

Conclusion: By following these troubleshooting steps, you’ll be better equipped to identify and resolve issues that may prevent your maps from being visible in WP Maps Pro. Remember that seamless map integration enhances user engagement, making it crucial to address any visibility issues promptly.

In this comprehensive guide, we’ll walk you through a detailed step-by-step process to seamlessly integrate the iubenda plugin with WP Maps Pro. By following these instructions, you’ll be able to ensure that the mapping functionalities are blocked until users provide their consent. Join us as we navigate the integration process and empower your website with enhanced user privacy and an exceptional mapping experience.

Part 1 – Blocking WP Maps Pro Scripts

iubenda cookies configure
iubenda cookies configure

Step 1: Access the iubenda menu in your WordPress dashboard and click on “Configure under the “Privacy Controls & Cookie Solution” section.

iubenda script blocker
Fig 2: iubenda script blocker

Step 2: Navigate to the “Blocked Domains” section, add “maps.google.com,” choose “Basic Interactions & Functionalities” for custom scripts, and click on “Save Settings”.

That’s it! Google Maps won’t display until visitors provide consent.

Part 2 – Unblocking WP Maps Pro Scripts

In this part, you won’t need to take any additional steps. Our plugin will seamlessly handle the process automatically.

In the guide, we will explore the seamless integration of the CookieYes | GDPR Cookie Consent & Compliance Notice (CCPA Ready) plugin with WP Maps Pro. This integration ensures not only compliance with cookie regulations but also offers a user-friendly approach to displaying Google Maps on your WordPress website. Follow along as we outline the steps to effortlessly combine these two powerful tools and enhance the user experience while maintaining legal compliance.

Part 1: Blocking WP Maps Pro Scripts

CookieYes Add cookies
Fig 1: CookieYes Add cookie

Step 1: Navigate to “Cookie Manager” within the CookieYes plugin. Under the “Functional” section of the Cookie List, click “Add Cookie.”

CookieYes Edit Cookies
Fig 2: CookieYes Edit Cookies

Step 2: Fill in the required information for the new cookie. Enter the Cookie ID, Domain, Duration, Category, and a brief Description. For further control, click on “Advanced Options” and input “maps.google.com” as the script URL pattern.

That’s it! By completing these steps, you have effectively blocked the Google Maps scripts from running until user consent is granted.

Part 2: Unblocking WP Maps Pro Scripts

No manual steps are required for this part. Our WP Maps Pro plugin will seamlessly handle the unblocking process once the user gives their consent.

And there you have it! With the CookieYes plugin, you can easily ensure that your Google Maps only appear after user consent is obtained. This integration ensures both compliance and a smooth user experience.

In the tutorial, we will delve into the seamless integration of the Cookie Notice & Compliance for GDPR / CCPA WordPress plugin with WP MAPS PRO. This step-by-step guide will empower you to enhance your website’s compliance with data protection regulations while maintaining the functionality of your Google Maps display. Let’s explore how to achieve a harmonious balance between user privacy and the dynamic visualization of maps on your WordPress site.

Part 1: Blocking WP Maps Pro Scripts

WP Maps Pro Cookies Acceptance
Fig 1: WP Maps Pro Cookies Acceptance

Step 1: Go to WP Maps Pro > Plugin Settings page. Locate the “Cookies Acceptance” segment and enable the “Enable Cookies Acceptance” option. Craft a compelling “No Map Notice” message that will be displayed in lieu of Google Maps when user consent has not been granted.

By following these simple steps, you’ll effectively block the execution of Google Maps scripts until user consent is obtained. Instead, visitors will encounter the personalized notice message in place of the maps.

Cookies Notice No Maps
Fig 2: Cookies Notice No Maps

Part 2: Unblocking WP Maps Pro Scripts

Cookies Notice Reload
Fig 3: Cookies Notice Reload

Step 1: Visit the Cookies plugin settings page and scroll down to the “Notice Settings” section. Here, activate the “Reloading” feature. This will ensure that the page automatically refreshes after the user provides their consent through the notice.

In just a few steps, you’ve successfully integrated the Cookies Notice plugin with WP Maps Pro to seamlessly manage the display of Google Maps in alignment with user consent. This integration not only adheres to regulatory compliance but also maintains a user-friendly experience on your WordPress site.

Welcome to our comprehensive guide on integrating Borlabs Cookie with WP Maps Pro! As a website owner, it’s crucial to ensure compliance with privacy regulations, and Borlabs Cookie is a powerful tool that helps you manage cookies and user consent. When combined with the advanced features of WP Maps Pro, you can create a seamless user experience while maintaining full control over cookies and data privacy. In this guide, we’ll walk you through the steps to integrate these two essential plugins, ensuring that your website not only provides valuable map functionalities but also adheres to the highest standards of data protection. Let’s get started!

The Importance of Hiding Google Maps Until Consent is Given

Borlabs cookies popup with Google Maps
Fig 1: Borlabs cookies popup with Google Maps

When it comes to privacy compliance and user consent, the integration of Google Maps on your website plays a crucial role. Google Maps can collect and process personal data, which requires you to obtain user consent in accordance with data protection regulations such as GDPR (General Data Protection Regulation) and the ePrivacy Directive.

Hiding Google Maps before asking for consent is an essential practice for several reasons:

  1. Data Protection Compliance: By showing Google Maps only after the user has given explicit consent, you ensure that your website is compliant with data protection laws. This practice respects the user’s right to control their personal data and builds trust with your audience.
  2. User Transparency: Informing users about the use of Google Maps and obtaining their consent before loading the map ensures transparency. Users appreciate knowing how their data is being used, and this proactive approach enhances the user experience.
  3. Avoiding Unwanted Data Collection: Some users may have concerns about the information Google Maps collects. By hiding the map until consent is given, you prevent any unintended data collection, providing a more privacy-focused browsing experience.
  4. Reducing Legal Risks: Failure to comply with data protection laws can lead to legal consequences, including fines. By following best practices, like obtaining proper consent, you mitigate potential legal risks for your website.

Configuring Borlabs Cookies for GDPR Compliance and WP Maps Pro

 

Part 1: Blocking WP Maps Pro Scripts

In this part, we will preemptively block the maps.google.com API call prior to obtaining user consent.

Step 1: Accessing Script Blocker

Borlabs cookies script blocker
Fig 2: Borlabs cookies script blocker
  1. Navigate to your WordPress admin dashboard and go to “Borlabs Cookies” > “Script Blocker.”
  2. Click on “Add New” to begin setting up the script blocking for Google Maps.

Step 2: Scanning the Page

Borlabs cookies page scan
Fig 3: Borlabs cookies page scan
  1. Choose the specific page or pages where you’ve integrated Google Maps using WP Maps Pro.
  2. Click on “Scan” to analyze the selected page.

Step 3: Script Blocker Setup

Borlabs cookies page scan completed
Fig 4: Borlabs cookies page scan completed

 

  1. Once the scan is complete, click on the “Next” button.
  2. Provide a unique ID and a descriptive Name for the script blocker.
  3. Enable the Status to activate the script blocker.
  4. In the “Additional JavaScript Handles” section on the same page, specifically block ‘wpgmp-google-api’ and ‘wpgmp-google-map-main.’

    Borlabs cookies script blocker page
    Fig 5: Borlabs cookies script blocker page
  5. Finally, click on “Create Script Blocker” to save the settings.

Step 4: Copy the “Unblock Code” from the “For Content Blocker” section.

borlabs cookies copy unblock code
Fig 6: Borlabs cookies copy unblock code
  1. After saving the Script Blocker, a corresponding “Unblock Code” will be generated.
  2. Keep this code safe; we’ll use it in Part 2.

Part 2 – Blocking Maps Output

This section delineates the straightforward steps for substituting the map output with a consent placeholder, which remains in place until the user’s consent is granted.

Step 1 – Edit Google Maps Content Blocker:

Borlabs Content Blocker Access
Fig 1.1: Borlabs Content Blocker Access
  1. Open your WordPress Dashboard and go to the “Borlabs Cookie > “Content Blocker” page and find “Google Maps. and Click the Edit icon.
  2. Scroll to the “Javascript” section and paste the copied unlock code in Part 1. Then turn on the “Execute Global code first” and write wpgmpInitMap(); in the “Initialization” input field. Please check the below figure for reference.

    Borlabs cookies paste unblock code
    Fig 6: Borlabs cookies paste unblock code

Step 2 – Copy the Shortcode:

Borlabs Content Blocker Copy Shortcode
Fig 1.3: Borlabs Content Blocker Copy Shortcode
  1. Copy the generated shortcode: [borlabs-cookie id="googlemaps" type="content-blocker"]...block this...[/borlabs-cookie]. from the “Content Blocker Setting” section.

Step 3 – Replace and Implement:

Borlabs Content Blocker Use Shortcode
Fig 1:4 Borlabs Content Blocker Use Shortcode
  1. Replace “…block this…” with your maps’ shortcode.
  2. For instance: [borlabs-cookie id="googlemaps" type="content-blocker"][put_wpgm id=1][/borlabs-cookie].
  3. Insert this shortcode onto your chosen WordPress page.

The Result: With this setup, Google Maps will only be loaded when the user gives their consent for external media, enhancing user privacy while still providing a great interactive experience.

Conclusion

By following these simple steps, you can seamlessly integrate Borlabs Cookies with WP Maps Pro, ensuring that Google Maps scripts are only loaded on your website when users explicitly provide their consent. This not only prioritizes user privacy but also makes your website compliant with data protection regulations.

WP Maps Pro is a powerful plugin that enhances your WordPress site with Google Maps functionality. To get started, you need to install the plugin on your WordPress site. Here’s a step-by-step guide to help you with the installation process:

  1. Purchase and Download the Plugin:
    • First, purchase WP Maps Pro from Codecanyon.net. Once you’ve completed the purchase, you’ll have access to the plugin.
    • Go to Codecanyon.net and log in to your account.
    • Navigate to the “Downloads” section to find the WP Maps Pro plugin.
    • Download the plugin ZIP file to your computer.
  2. Install WP Maps Pro:
    • Log in to your WordPress dashboard.
    • Go to the “Plugins” section in the left-hand menu.
    • Click on “Add New.”
    • Click on the “Upload Plugin” button at the top of the page.
    • Choose the WP Maps Pro ZIP file you downloaded earlier and click “Install Now.”
  3. Activate the Plugin:
    • After the installation is complete, you’ll see a success message. Click on the “Activate Plugin” link to activate WP Maps Pro.
  4. Enter Your License Key:
    • To access the plugin’s page, you’ll need to enter your license key. You should have received the key in the purchase confirmation email or read where is my purchase code
    • Go to “WP Maps Pro” in the WordPress dashboard.
    • Enter your license key in the designated field and click “Verify Purchase”

That’s it! WP Maps Pro is now installed and ready to use on your WordPress site. You can start creating maps, adding locations, and utilizing the plugin’s powerful features to enhance your site’s mapping capabilities.

Infowindows play a vital role in providing location-specific information on maps powered by WP MAPS PRO. They allow users to view important details about a place with just a simple click. While the “Basic fields” like location title, city, country, and address provide essential information, WP MAPS PRO offers an extra layer of customization with “Extra Fields”. These user-defined fields enable you to display any additional data you desire, such as phone numbers, fax, emails, custom HTML, image sources, or video URLs.

In this guide, we will explore how to create custom Infowindow messages using extra fields to enhance the user experience and make your maps more informative and engaging.

Understanding Basic Fields and Extra Fields

Before diving into customization, let’s understand the distinction between basic fields and extra fields. Basic fields are the default attributes, such as location title, city, and country, that WP MAPS PRO provides for every location. On the other hand, extra fields are dynamic data tags created by users to include personalized information for each location.

This plugin provides the following basic fields to be used.

  • {marker_id}: This field represents a unique identifier for each location marker on the map.
  • {marker_title}: The title or name of the location, which will be displayed as the main heading in the Info window.
  • {marker_address}: The street address of the location, helping users to easily identify and locate the place.
  • {marker_latitude}: The latitude coordinate of the location, determining its vertical position on the map.
  • {marker_longitude}: The longitude coordinate of the location, determining its horizontal position on the map.
  • {marker_city}: The city in which the location is situated, providing additional context to users.
  • {marker_state}: The state or province where the location is located, if applicable.
  • {marker_country}: The country in which the location is situated, adding global context to the information.
  • {marker_postal_code}: The postal or ZIP code of the location, aiding in specific geographical identification.
  • {marker_zoom}: The zoom level at which the map will display this location marker, determining its initial magnification.
  • {marker_icon}: The icon or image that represents the location marker on the map.
  • {marker_category}: The category to which the location belongs, allowing users to filter or group markers based on similar attributes.
  • {marker_message}: A brief message or description related to the location, providing additional information to users.
  • {marker_image}: An image associated with the location, which can be displayed in the info window for a visual representation.

Setting Up Extra Fields in WP MAPS PRO

To get started, follow these simple steps to create extra fields for your locations:

  1. Access your WordPress admin dashboard and navigate to WP MAPS PRO > Plugin Setting.
  2. Look for the “Create Extra Fields” section.
  3. Define the field name, and click on “Add more” to add more extra fields.
  4. Click on “Save Settings” 

With the extra fields set up, you can now proceed to use these extra fields to customize your Infowindow messages.

Customizing Infowindow Messages with Basic & Extra Fields

Utilizing the basic and extra fields in your infowindow messages is straightforward. Insert dynamic data tags within the Infowindow message template to display the relevant information for each location. For instance, use {phone} to show the phone number, {email} for the email address, or even embed an image using {image_src}.

    • Go to the “Manage Maps” section and choose the map you want to edit.
    • In the map editor, find the “Infowindow Message for Locations” section.
    • Using Basic Fields:
      • Use these placeholders within curly braces to display location information:
        • {marker_title}: Location title or name.
        • {marker_address}: Street address.
        • {marker_city}: City name.
        • {marker_country}: Country name.
        • {marker_zoom}: Map zoom level, if needed.
        • {marker_icon}: Marker icon or image.
    • Using Extra Fields:
      • If you’ve created extra fields, use their names within curly braces to show additional data.

Dynamically Adding Extra Fields to Locations with WordPress Hook

WordPress hooks provide a powerful way to modify data and customize functionality in plugins. In the case of WP MAPS PRO, you can leverage the ‘wpgmp_markers’ filter to dynamically add extra fields to your locations. In this guide, we’ll explain how to use this filter along with a custom callback function to achieve this functionality.

// Define your custom callback function to modify the data
function custom_wpgmp_markers_filter($filterd_places, $map_id) {
    // Your custom filtering logic here
    // Modify the $filterd_places array as needed
	// Assuming $places is the array containing the places data
	foreach ($filterd_places as &$place) {
		
		// Check if 'dynamic_extra_field' exists in the 'extra_fields' subarray
		if (!isset($place['location']['extra_fields']['dynamic_extra_field']) or empty($place['location']['extra_fields']['dynamic_extra_field'])) {
			// 'dynamic_extra_field' exists, do nothing, it already has a value
			$place['location']['extra_fields']['dynamic_extra_field'] = 'This is dynamic value';
		}
	}

// Now the $places array has been modified with the default value for 'dynamic_extra_field' if it was missing

    // Return the modified array
    return $filterd_places;
}

// Add the custom callback function to the 'wpgmp_markers' filter
add_filter('wpgmp_markers', 'custom_wpgmp_markers_filter', 10, 2);

By following these steps, you can easily use both basic fields and extra fields to create custom infowindow messages for each location on your WP MAPS PRO-powered map. This will make your map more informative and engaging for users.

The very first step in creating and displaying a google maps on any website is to create a google maps API key.

Below is a step-by-step guide that will help you in creating the right google maps API key for your website. Google Maps requires the usage of an API key in order to work properly, as stated by the company’s new regulations in June 2016. Follow these steps to generate a google maps api key:

Log in to the Google Cloud Platform:

    • Go to the Google Cloud Platform Console.
    • If you don’t have a Google Cloud account, you’ll need to create one. Otherwise, log in using your existing account.

Create a New Project:

Google Cloud New Proejct
fig 1: Google Cloud New Proejct
  • If you haven’t already created a project for your WordPress site, click the project dropdown in the top navigation bar and select “New Project.”
  • Give your project a name, choose the organization (if applicable), and click “Create.”
Google Cloud Project Details
fig 2: Google Cloud Project Details

 

 

  • Once a project is created, you’ll be redirected to the project dashboard.
Google Cloud Project Dashboard
Fig 3: Google Cloud Project Dashboard
  • Once you’re in your project dashboard, click on the “APIs & Services”.

Enable  APIs & Services:

Google Cloud API Library
Fig 4: Google Cloud API Library

The ‘APIs & Services’  page provides detailed traffic information for each enabled API. It’s a valuable resource for monitoring which APIs are active and understanding how each API is being utilized. In the following step, please enable the following four APIs for WP Maps Pro: Maps JavaScript API, Places API, Geocoding API, and Directions API.

Google Cloud Library Page
Fig 5: Google Cloud Library Page
  • Click on the “APIs & Services” > “Library” to search for required APIs and enable them.
  • Search for APIs: In the Library, search for “Maps JavaScript API” and click on it. Then click the “Enable” button.
Maps Javascript API Page
Fig 6: Maps Javascript API Page
  • Repeat for Other APIs: Repeat for the other three APIs: Places API, Geocoding API, and Directions API. Enable each of them.

Create an API Key:

Creating an API key for Google Maps is essential because it grants your application access to the Google Maps Platform services. This key acts as a unique identifier, allowing Google to track your usage and ensuring that you comply with usage limits and billing requirements.

    • In the Cloud Console, click on the “Navigation Menu” > “APIs & Services” > “Credentials.” and Click the “Create Credentials” button

      Google Cloud Credentials Dashboard
      Fig 7: Google Cloud Credentials Dashboard
    • and select “API key.”

      Google Cloud Credentials API Key
      Fig 8: Google Cloud Credentials API Key
    • A new API key is generated and displayed. When generating an API key, it initially comes without restrictions. It is highly recommended to restrict the API key to prevent unauthorized usage and ensure security.

      Google Cloud Credentials API Key Unrestricted
      fig 9: Google Cloud Credentials API Key Unrestricted

Restrict the API Key (Recommended):

In this step, we’ll apply two types of restrictions: Key Restrictions and API Restrictions. In the Cloud Console, go to “APIs & Services” > “Credentials.”. Find your API key in the list and click on it to apply these restrictions.

Key Restrictions: These restrictions are applied directly to the API key itself. There are two types:

  • Websites: You can specify the web domains (URLs) from which the API key is allowed to be used. This helps ensure that the API key is only used on authorized websites.
  • IP Addresses: You can specify specific IP addresses or IP ranges that are allowed to use the API key. This adds an extra layer of security by limiting access to known IP addresses.

    Google Maps API Key Restrictions
    Fig 10: Google Maps API Key Restrictions

Correctly adding the website URL is crucial for the maps to display properly. Here are the proper URL formats with clear examples to ensure the setup is accurate:

  1. Single Domain URL:
    • Example: https://example.com
    • Example: https://www.example.com
    • Example: http://www.example.com
    • Example: http://example.com
  2. Single Subdomain URL:
    • Example: https://sub.example.com
    • Example: http://sub.example.com
  3. All Subdomains in a Single Domain using a Wildcard:
    • Example: https://*.example.com
    • Example: http://*.example.com

API Restrictions: These restrictions control which APIs can be accessed using the API key. You can choose which Google APIs the key can be used for. This helps to prevent unauthorized usage of APIs that your application doesn’t require.

Google Maps API Key - APIs Restrictions
Fig 11: Google Maps API Key -APIs Restrictions

Linking a Billing Account to Your Google Maps API Key:

Linking a billing account to your Google Maps API key is a crucial step to ensure the continued functionality of your maps and location-based services. Without an active billing account, your API key may be limited or restricted, affecting the availability of map data and essential features on your website or application.

Step 1: Go to the Project Dashboard:

  1. Start by accessing your Google Cloud Platform Console.
  2. Select the project where you’ve generated the Google Maps API Key.
  3. Within the project dashboard, locate and click on the “Billing” link. This link takes you to the billing settings for the selected project.
Google Cloud Billing
Fig 12: Google Cloud Billing

Step 2: Check for Existing Billing Account:

Upon accessing the billing settings, you may encounter a notification indicating that no billing account is currently associated with the project. This is a common message, especially if this is your first time setting up billing for this particular project.

  1. To link a billing account, click on the “Link a billing account” button. This action initiates the process of connecting a billing account to your project.

    Google Cloud Billing LInk
    Fig 13: Google Cloud Billing LInk
  2. You’ll now be presented with a list of available billing accounts. Choose a billing account that is associated with the “Google Maps Platform.” This ensures that the account will cover the usage of the Google Maps services utilized by your project.
  3.  Once you’ve selected the appropriate billing account, confirm your choice, and follow any on-screen prompts to finalize the linking process.

That’s it! You’ve successfully generated a Google Maps API key and you’re ready to leverage the power of Google Maps on your website, and you can start creating dynamic and interactive maps. If you encounter any issues or need further assistance, refer to the plugin documentation or reach out to WP Maps Pro support.

You can create unlimited google maps with our plugin. You just need to assign the already created locations to the map and provide some basic information about map that’s it, you will get a shortcode of the map at the end, which you can paste inside the content editor of any post / page / cpt to display our map.

How to create a google map

Step 1 Go to our WP MAPS PRO > Add Map plugin menu.

Step 2 Enter the Map title, width, height, zoom level, and other general information. You’ll see lots of options here which you can configure according to your requirements.

How to create a map Wpmapspro

  • Map Title: This will appear as the title of the map in your blog/ website frontend page. (Mandatory)
  • Map Width: This is the width of the map. (e.g 500).
  • Map Height: Sets the height of the map. (Mandatory)
  • Map Zoom Level: Sets the various levels at which the map can be zoomed. The default zoom level is set to 0.
  • Map Type: WP MAPS PRO provides four types of maps, Select any Map type which you want to display on your site.

Assign locations to map

Now you have to add locations to your map. Scroll down to the Assign Locations To Map section of the same window and select locations.

Add Map Choose Location Wpmapspro plugin

Infowindow Message for locations

Now you can update your locations infowindow skin. Scroll down to the Infowindow Message for Locations section of the same window and select infowindow skin(Default skin is by default selected). You can also update your infowindow HTML content using their editor.

Add Map Choose Location Wpmapspro plugin

Display Locations Listing Below the Map

Now you can display locations listing below the map. Scroll down to the Listing Settings section of the same window and check the Display Listing option.

Add Map Choose Location Wpmapspro plugin

Update Listing Item Skin

Now you can update your listing skin. Scroll down to the Listing Item Skin section of the same window and select listing skin(Default skin is by default selected). You can also update your listing HTML content using their editor.

Now click on Save Map. All the maps you created will be displayed on the Manage Map page.

From the Manage Map page, please copy your map Shortcode and paste it into your post / page / cpt in the content section. Now view your post/page/cpt frontend page. you can see your created google map on that page.

WP MAPS PRO have a new functionality to assign location using Advanced Custom Fields. In this tutorial we will look at how the Advanced Custom Fields plugin can be used to create a location in Google Map Plugin.

1. Create a Custom Field Group

Step 1 First install the free wordpress plugin ACF plugin and activate it.
A new Custom Fields menu should now show up in your WordPress admin area.

How to assign location using ACF Plugin

Step 2 To create custom field, click Custom Fields in the WordPress admin area.

Step 3 Click Add New button at the top to create a new field.

Create a Custom Field Group

Step 4 Then Give a useful Name like “Google Maps” and Click the Add Field button to create the fields.

Custom Field Group

Step 5 It’ll open a form and enter the Field Label , Field Name(automatically be populated with the label), and select Field Type -> Google Map.

add new field group

Click Publish button to save the fields.

2. Create a location Using Posts(ACF location)

After that, you need to create a post to add a location using ACF. For this:

Step 6 From the WordPress dashboard go to Posts -> Add New.

Step 7 Enter the title and post content and assign a category to the post.

Step 8 Now scroll down the post page, and you’ll see a google map display on your page. Enter the Name of your location. Type a few words of your address and choose your Address(using google autosuggest).

Create location Using Posts

Click Publish button to publish your post.

Note: If you didn’t get the ACF field google map or find any error, Open up your functions.php file located in wp-content/themes/your-theme-name/ and add this code to it:

function my_acf_google_map_api( $api ){
$api['key'] = 'Insert your api key here';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

3. Copy the Field Name

Step 9 Go to Custom Fields -> Edit and copy the field name.

Copy Field Name

4. Assign ACF location on Map page

Step 10 Go to WP MAPS PRO -> Add or Edit Map page and fill the general information to create a map.

Step 11 Scroll down the page and point to the Show Posts using ACF Plugin section and paste the ACF field name(in my case it would be google_maps).

Assign ACF location in Map page
and click to Save Map.

5. Display the map in frontend

Step 12 Go to the Manage Map page, copy the shortcode of your map, and paste it into any post/page to display Google Map.

We have created a tutorial related to this please follow it. HOW TO DISPLAY MAP IN FRONTEND?

Now you’ll see a location created using ACF in frontend.

Display map in frontend

Install Plugin Now!

This plugin is exclusively available at codecanyon.net. You'll get free updates and full support to use this plugin.