Docs Archive - Page 8 of 12 - WP Maps Pro

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

Archives: Docs

You can display directions between two locations over google maps using the direction tab.

Step 1: Go to Manage Maps Page, Now Add/Edit Map, and scroll down to the Tabs Settings section.

Step 2: Enable the Display Tabs and Display Directions Tab box inside the display tabs. (See screenshot)

How to Display Directions using tabs settings Wpmapspro

Step 3: Then Click on Save Map and open the frontend map page.

Step 4: Add the Start Location and End Location from frontend on the direction tab and click to Find Direction.

Now you’ll see the result of the following direction.

Display Direction Tab Wpmapspro

Want to customize the name of your Categories tab? Here’s how: Follow these steps to change the title of the Categories tab:

 

Step 1 All you need to do is navigate to Add or Edit Map, then scroll down until you reach the Tabs Settings section

Step 2  Go to Display Tabs in your Settings and make sure the Display Categories Tab is enabled.

Step 3 you can modify the name of the Categories tab by selecting it and entering in your desired title. Save your changes and you’re done!

   Step 4 Save the map and you will see the title of the category tab has changed on the front end.

WP Maps Pro makes it easy to display map marker categories in a tabbed or checkbox-style filter section. This allows users to show or hide markers by selecting one or more categories — perfect for improving navigation on maps with many locations.

Note: Before using this feature, make sure you have created marker categories and assigned them to your locations.


🛠️ Steps to Enable Category Tabs

  1. Go to: WP MAPS PRO → Manage Maps.
  2. Edit a Map: Click Add/Edit on the map where you want to display category tabs.
  3. Scroll to: The Tabs Settings section.
  4. Enable: Both Display Tabs and Display Categories Tab options.

Enable Category Tabs in WP Maps Pro

Click Save Map. You will now see a tab-style filter appear in the top-right corner of your map on the frontend.

Show Categories Filter on the Map


💡 Use Cases

  • Toggle between different store types (e.g., Retail, Dealer, Service).
  • Separate event types (Webinar, Conference, Meetup).
  • Show or hide regional clusters or service zones.

Want more customization? Pair this with custom marker icons for a fully branded map experience.

Need help? Submit a support ticket — our team is ready to assist!

To display tabs on Google Maps, you will need to select from the available tabs – Category, Direction, Nearby, or Routes. After selecting one of these tabs, it will allow you to apply markers on the map in order to filter specific areas that are of interest.

Step 1 To edit a Map on the platform, start by navigating to the “Add or Edit Map” page. Scroll down to the Tabs Settings section for further details on how to customize your Map.

Step 2  To enable display tabs, select the checkbox next to the ‘Display Tabs‘ option.

How to display Tabs in Google Maps Wpmapspro

Step 3 To make your tabs visible, simply click on the ‘Save Map’ button. Your tabs will then be displayed on the map!

Street View helps you to explore world landmarks, see natural wonders, and step inside places such as museums, arenas, restaurants, or small businesses.

Note:
1. Street View images aren’t available everywhere.
2.
Street view settings are applicable on one location only.

You can display street view 2 ways :

From Backend

Step 1 Go to Add or Edit Map and scroll down to ‘Street View Settings’.

Step 2 Enable the ‘Turn On Street View’ checkbox.

Turn On Street View Wpmapspro

Step 3 Click Save Map to see the changes.

How to Display Street view Wpmapspro

From Frontend

Drag Pegman to a place on the map.

How to Display Street view

The Traffic, Transit and Bicycling layers modify the base map layer to display current traffic conditions, or local Transit and Bicycling route information. These layers are available in select regions.

Traffic Layer

You can enable traffic layer over your Google Map using this wordpress plugin. The traffic layers on Google Maps exhibit real time traffic conditions for locations that support it. The Google map below shows very high traffic by black/red, yellow depicts average and green color-codes show low traffic conditions.
Follow the steps below to display traffic layer in Google map:

Step 1 Go to Add Or Edit Map and scroll down to ‘Layers Settings’ section.

Step 2 Enable or tick ‘Traffic Layer Tab’.

How to display traffic layer, transit layer and Bicycle Layer in Google map

Step 3 Then click on Save Map.
You’ll see the traffic layer on the map.

Traffic Layer Display Wpmapspro


Transit layer

The Google Maps allows you to display the public transit network of a city on your map.

Follow the steps below to display transit layer in Google map:

Step 1 Go to Add Or Manage Map and scroll down to ‘Layers Settings’ section.

Step 2 Enable or tick ‘Transit Layer Tab’.

Transit Layer Wpmapspro

Step 3 Then click on Save Map.
You’ll see the transit layer on the map.

How to display traffic layer, transit layer and Bicycle Layer in Google map


Bicycling layers

Use the Bicycling layer in WP MAPS PRO plugin to find any bicycle or bike paths available. In the map depicted the bicycling routes are indicated by dark green lines and streets with these routes are shown by light green lines. Dashed lines stand for paths recommended for bicycling.
Follow the steps below to display Bicycling layer in Google map:

Step 1 Go to Add Or Manage Map and scroll down to ‘Layers Settings’ section.

Step 2 Enable or tick ‘Bicycling Layer Tab’.

Bicycling Layer Wpmapspro

Step 3 Then click on Save Map.
You’ll see the bicycling layer on the map.

Bicycling Layer Display WPmapspro

Fusion Tables is a data management web application to gather, visualize, and share data tables. Follow the steps below to upload your own data to Fusion Tables and create a map!

Step 1 Click Create Fusion Table and follow all steps.(Use your CSV file)

Step 2 After follow all steps make sure that you copy Encrypted ID and table must be public.

Fusion Layer Encrypted ID Wpmapapro

Step 3 Go to Add or Edit Map and scroll down to ‘Layers Settings’ section.

Step 4 Enable ‘Fusion Table Layer’ tab and enter column name in ‘Fusion Select’ tab.

Step 5 Then Paste Encrypted id in ‘Fusion From’ tab.

How to include Fusion Table layer in your map Wpmapspro

Step 6 click on Save map.

Below is the map you’ll create using this tutorial.

Map Display Fusion Layer Wpmapspro

When using the WP MAPS PRO plugin, it is possible to display customized information messaging when a marker is clicked on Google Maps. This feature provides additional interactivity for users who are navigating and exploring maps. To display an info window when a user clicks on a point on Google Maps, you can take the following steps:

Step 1 Go to Add Map or Manage Maps > Edit Maps and scroll down to Infowindow Settings section.

Step 2 Choose Mouse Click option from Show Infowindow on dropdown.

How to show info window of map on Mouse Click Wpmapspro

Step 3 Click on Save Map and see the changes.

The WP MAPS PRO plugin makes it simple to display info windows on Google Maps when a mouse cursor hovers over a specific location. This is an ideal feature for providing more context and detail about locations, allowing viewers to quickly find out information. To show the infowindow you should take the following steps:

Step 1 Go to Add Map or Manage Maps > Edit Map and scroll down to Infowindow Settings section.

Step 2 Choose Mouse Hover option from Show Infowindow on dropdown.

How to show info window of the map on Mouse Hover Wpmapspro

Step 3 Click on Save Map and see the changes.

Sometimes we need to change the Google Maps zoom level on a marker click to navigate the location closely. This WP MAPS PRO plugin provides an easy way to change the zoom level on marker click using the following steps:

Step 1 Go to Add Map or Manage Maps > Edit Map and Scroll down to the Infowindow Settings section.

Step 2 Point to the Change Zoom on Click and select Zoom Level from the drop-down list.

How to Change zoom level of the map on marker click Wpmapspro

Step 3 Click Save Map and see the changes.

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.