Skip to main content

Regions and Markers as links

This tutorial will show you how to create an interactive map with regions or markers working as clickable links.

1

Go to :fa-object-group: Regions > :fa-pencil-square-o: Edit fields.

Click on Text button at the bottom to add a new Text field and name it "Link". Click on Save fields button at the bottom.

2

Go to :fa-object-group: Regions > :fa-list-ul: List. Click on Edit regions button above the map, then click on a country on the map to edit its fields. Enter URL in the Link field, click OK.

3

Go to :fa-mouse-pointer: Actions. Click on the following checkbox: Region click > Go to link stored in ..., Then choose the Region.link field from the drop-down list. Save the map settings.

4

You can't test links in the map preview mode so you need to create a page add the map to it. Go to WP Admin > Pages > Add new, then click on + sign on the left and search for the "shortcode" block in Gutenberg editor.

5

Add mapsvg shortcode in the following format: [mapsvg id="YOUR_MAP_ID"]. Publish the page, open it and try to click on the country in which you've added the link.

6

Not let's get back to the map settings and try to set up markers in the same way. Go to :fa-database: Database > :fa-pencil-square-o: Edit fields. Click on Text button at the bottom, create a Link field as you did previously for regions.

7

Go to :fa-database: Database > :fa-list-ul: List. Click on an object in the list and add an URL to the Link field, then click OK.

8

Go to :fa-mouse-pointer: Actions. Click on the following checkbox: Marker click > Go to link stored in ..., Then choose the Object.link field from the drop-down list. Save the map settings, go to the page you've create previously and try to click on the marker.

9