Are you looking for a way to create routes on Google Maps? Creating routes on Google Maps is easy and can be customized to your particular needs for your visitors. You can choose the color, line width and opacity of your route as well as its direction, so that you have full control over how it’s presented on the map!

How to create routes on Google Maps

Note : Before you can create a route on Google Maps, you need to make sure that you have created some location using the “Add location” feature. If not, please add the locations that you are going to add in the route.

Step 1 Go to WP MAPS PRO > Add Route from plugin menu.

Step 2 Under the Route Information section, enter the Route Title. You can change Route Direction color by Stroke Color and change the Stroke Opacity and Stroke Weight of direction stroke.

Travel Modes-For the calculation of distances, you may specify the transportation mode to use. By default, distances are calculated for driving directions.

Create Routes on Google Maps

Step 3 Now specify the Start Location & End Location for the route. After specifying that, specify the waypoints that will connect the start and end location of the route from the WayPoints table. You can choose a maximum of 8 waypoints in a route. Now scroll down a bit and click on the Save Route button.

Step 4Go to WP MAPS PRO > Manage Maps screen & click on the Edit icon to edit the map. Scroll down to Route Direction Settings section.

Step 5 Enable the Turn On Map Route Directions checkbox & then select the map route to display in your map.

Route Direction Wpmapspro

Step 6 Then click Save Map.

You’ll see the selected routes on the map.

Create Routes on Google Maps

The WP MAPS PRO plugin allows you to assign multiple locations on a single map. A location is used to display markers on the map. With the help of the WP MAPS PRO plugin, you can easily assign locations on a map.

Assign location in the map

Before you assign locations on a map, make sure you created locations. To learn more, take a look at our tutorial on how to create a location using a simple method.

Step 1 Go to Manage Maps, click on Add/Manage Map, and Scroll down to the Assign Locations To Map section.

Step 2 All the locations that you have created are displayed in this section. Check mark the locations that you want to display on the map. You can filter locations by typing in the search box.

Step 3 Then Click on Save Map. Now open your frontend map page and see the locations on the map.

The Google Map here illustrates a normal 2D roadmap with overlays bound to certain latitude/longitude coordinates. The WP MAPS PRO wordpress plugin allows you to customize the overlays with options like border color, border style, overlay width, overlay height, font size etc.

How to apply overlays on a map

Step 1 Go to Add or Edit Map and scroll down to ‘Overlays Settings’ section.

Step 2 Enable or tick ‘Apply Overlays’ tab as below.

Display Overlay Setting

Check the option to activate overlay

Overlay Border Color: Select a border color for overlay.
Overlay Width: Insert overlay width.
Overlay Height: Set height of overlay.
Overlay Font Size: Add desired font size.
Overlay Border Width: Set a border width.
Overlay Border Style: Choose a style from available options.

Step 3 Click save map and open it in browser.
You’ll see overlay lines on a map.

How to apply an overlay layer on a map WP Maps Pro

Before displaying the search Form, category sorting filter, and Radius filter first you need to display listings below the map. Previously we have seen tutorial Display listings below the map. Refer to How to Display listings below the map.

In this tutorial, we will use a search form, category sorting filter, and Radius filter.

Search Form

Search Form is used to search any location and display it on a map.

Step 1 Enable the Display Search Form option in the Listing Settings section as below.

then you’ll see the search field below the map on the front end.

Step 2 Enter a search location into the search box. Search results will appear automatically in listing the location’s Filters as you type.

Category Sorting Filter

Sort locations by title, category name, or address, alphabetically, in both ascending and descending order.

Step 1 In the Listing Settings section enable the Display Category Filter option and also enable the Display Sorting Filter tab.

Step 2 Move to the browser and select any category and sorting filter from the listing. You’ll see a location display according to your category sorting. (See image)

Radius Filter

Mapping for single points on a map and filtering within a specific mile radius.

Step 1 Enable the Display Radius Filter option in the Listing Settings section.

Dimension: Dimension is the unit of distance, you can choose kilometers, or miles. The calculator will immediately calculate with the selected distance unit.
Radius Options: You can use this tool to find the radius around a point on the map.

Step 2 You can create as many radius using the comma(,). Then you’ll see the radius dropdown below the map on the front end.

Miscellaneous Options

You can display sorting, switch between grid & list view, and print listing options as well. If you tick all of them, it will give you an all-in-one solution.

then you’ll see awesome locations listing, with filters, below the map on the front end.

Each category can have its own marker icon to visualize them differently on the map. Using the WP MAPS PRO plugin you can choose between a number of available marker icons or upload your own. You can change the marker category icons from URL, media library, and pre-defined icons by the plugin.

Step 1 Go to Add Marker Category from WP Google Map Plugin and click choose button.

Marker Category Icon

A popup will display, where you can add a marker icon from From Computer tab, From the URL tab, and from Media Library.

From Computer :

Step 2 Select any image from the computer then it will be displayed in the ‘Media library ’.

Step 3 Go to the Media Library tab and click the show link from the right side which marker or image you want to display.

Media Library Image

Step 3 After opening, you can edit the image size. Click on Edit image then click to insert into a post below the same popup.

Image Size Edit

Step 4 Then click Save Marker Category.

You will see your selected custom marker displayed on your map.

Custom marker Map

From URL :

Step 1 Copy Image Url from any site and paste in Url tab.

Step 2 Then click insert into post on the below of the same popup.You will see your selected custom marker display in your map.

Media Library :

All computer selected markers display in media library. You can select them click on show link and then click to insert into post.

Choose Icons :

You can select icons from Pre defined icons in choose icon tab.

Marker Icons

If you are using WP Maps Pro as your main plugin for viewing and creating maps, it is quite straightforward to change the language on your Google Maps. To do this, go to Settings within the plugin and the click map language tab. Here you can select from a list of languages, which will then be applied to all your maps.

To change the language of your map you should do the following steps :

Step 1 To change the language of Google Maps, navigate to the Settings page.

Step 2 To change the language of your Google Maps, locate the ‘Map Language’ tab and select your desired language from the dropdown list.

how-to-change-language-in-a-map

Step 3 Click on the Save Setting button to confirm your choice.

This WP MAPS PRO plugin allows displaying the post’s custom field information in the infowindow message easily. Custom Fields can be associated with Pages, Posts, or custom post types. You can create unlimited custom fields and display them in the info window message.

Manage Custom Fields

Step 1 WordPress allows adding custom fields by default. If this is not visible on your edit post page then you need to use the Screen Options at the top of the posts/pages and enable custom fields.

How to show post info window using custom field Wpmapspro

After that, the custom fields meta box appears at the bottom of the post editor screen.

Custom Field Box Wpmapspro

Step 2 Here, you can add custom fields. All you need to do is give it a name and value.

Add Custom Field Wpmapspro

Show Custom Fields

First, make sure you have assigned posts to your maps.

Step 1 Go to Add or Edit Map page and scroll down to Infowindow Message for Posts and use custom field placeholders.

Follow {%custom_field_name_here%} format to display custom fields in the infowindow content. e.g Use {%phone%}, {%website%} placeholders to display phone and website custom fields values.

Infowindow Message Post Wpmapspro

Step 4 Click on Save Map.

Below is the expected output which shows custom field values in infowindow message.

How to show post info window using custom field Wpmapspro

You can create multiple shapes and display them on the map. You can Highlight areas on google maps with your own colors and display custom information on click. The following shapes are available: lines, polygons, circles and rectangles. You can also configure your shapes so that users can edit or drag them.

How to Draw in Google Map

Step 1 Go to Drawing page and select your map.

How to Draw in google maps Wpmapspro

Step 2 First Choose the shape you want to draw from top middle of the map.

How to Draw in google maps

Step 3 Then click on the map and drag mouse to create a shape. You can create any number of shapes on the map.

Map Display Wpmapspro

Step 4 To modify a shapes properties, click on the shape and you’ll see options on the right side.

Shape properties

Stroke Color: A stroke is an outline. It describes the edges of a shape or it can be a simple line.
Fill Color : A fill is a solid shape, often contained or surrounded by a stroke. It is the surface area of a shape.
Stroke Weight : Sets the thickness of all lines and outlines drawn by stroke.
Stroke Opacity : The stroke-opacity attribute specifies the opacity of the outline on the current shape.
Fill Opacity :This attribute specifies the opacity of the color.

How to Draw in google maps

Step 5 Then Click Save Drawing.

If you have a huge collection of location information to display on maps and it’s time-consuming to enter them one by one. Our import tool enables you to import locations in bulk, and you can then assign those locations to any number of maps.

CSV is a simple file format used to store tabular data, such as a spreadsheet or database. CSV stands for comma-separated-values.

Import CSV File

Step 1 Go to the Import Locations page from WP MAPS PRO Plugin.

Step 2 Then click on the Choose a File button and valid the CSV file.

Step 3 Then click on the Continue button.

Step 4 You will see the Column Mapping section. Here you will see all your CSV file Fields where you have to select fields according to the CSV Field like a screenshot below.

Note: Leave the ID field empty if you’re adding new records. The ID field is used to update existing locations.

Step 5 Now click on Manage Locations. Here you will see all your added / update CSV file locations.

How to display extra field value as clickable link

Step 1 Go to Plugin Settings and scroll down to the Create Extra Field(s) section and add your Placehoder value and Save Setting.

Step 2 Go to Manage Locations and edit your locations and navigate to Extra Fields Values section and add your Extra Fields Value and Save Locations.

Step 3 Go to functions.php file on the currently active theme in your website and edit your functions.php file and add this Hook and Save File.

add_filter('wpgmp_final_map_data', 'wpgmp_map_data_load_anchor_tag',10,2); function wpgmp_map_data_load_anchor_tag($map_data, $map){ $map_data['map_options']['link_extra_field'] = array( '{website}' => '<a href="{website}" target="_blank">Website</a>', ); return $map_data; }

Step 4 Go to frontend map page and refresh the page. You will see your website link as a clickable link.

Archives: Docs