Skip Navigation
Buy Now
Home » Course lessons » Displaying a List of Posts on A Map in WordPress

Displaying a List of Posts on A Map in WordPress

Toolset allows you to easily display a list of posts on a map by using the View and Map blocks together.

Duration

You need to place both View and Map blocks on the same page. It is only important that the View has access to the address custom field.

A View will query the database for the posts you select. As it goes through posts, it will output an address for each of them and place a marker on the map.

You can use a View as a source for the map markers even if that View has no visual output. However, if you do display the results, you will see some additional features. For example, if your View uses pagination, as you go through pages, the markers on your map will update.

To add a map that uses a View as the source for the markers you have to:

  1. Add a View block to your page. This View must list posts that feature an Address custom field.
  2. Insert a Map block.
  3. As the source of the markers choose the View block.
  4. In the View block dropdown choose the name of the block you have inserted and in the Field dropdown select the custom field that contains the address.
Settings for the map that uses a View as the source for the markers
Settings for the map that uses a View as the source for the markers

That’s it. Now, you can further customize the map by adding marker pop-up and hover content, or display a map side-by-side with a custom search.

Add marker pop-up content and hover hints

You can easily customize the text that appears when someone hovers or clicks on the map markers.

  1. Click to select your Toolset Map block.
  2. In the right sidebar, scroll to the options for your marker.
  3. Click the Edit link next to the Pop-up content section to select what to display when any marker is clicked.
  4. Click the Edit link next to the Hint content section to select what to display when any marker is hovered.
  5. In both cases, a pop-up dialog with a very simple HTML editor opens. You can enter text or click the Add Field button to insert dynamic content like standard post fields or custom fields. As you add dynamic content, the editor shows you a preview of that content, based on one of the marker data.

Display a map with a search and a list of posts side-by-side

Displaying a map side-by-side with your custom search and a list of posts is very popular on real estate and travel websites. It provides a great search experience and instant visual feedback to user’s actions.

Create or edit a page and follow these steps:

  1. Insert a Toolset Container block. You will use this block to adjust the spacing and alignment of the whole content.
  2. Insert a Toolset Grid block inside the Container. Select the two-column layout. Here’s how it should look like.

Creating a layout for displaying custom search and map side-by-side
Creating a layout for displaying custom search and map side-by-side

  1. Insert a Toolset View block into one Grid column and create a list of posts with a custom search. For detailed instructions, check out the lesson about creating custom searches.
  2. Insert a Toolset Map block into the other Grid column. As explained in the main part of this lesson, make sure to select your View as the source for the map’s markers.

You now have a custom search with a list of posts on one side and the map displaying the posts on the other.

However, this content will probably need some adjustment. Most importantly, you will want it to stretch to the full-width of the page.

Some themes, like the Toolset-recommended ones, allow you to change the page width right from the Block Editor. They also offer you to use a layout with no sidebars. For recommended themes, you can find these options in the right sidebar, under the Document tab.

Making the page stretch to the full width
Making the page stretch to the full width

Once you make the page full-width and without a sidebar, you can adjust the main container:

  1. Click to select the Container block you created in the first step.
  2. In the right sidebar, expand the Inner Content section. There, you can customize the Max-width option to your liking. This allows you to set how wide you want the content to appear in relation to the full width of the page.

Adjusting the width of the main container
Adjusting the width of the main container

 

 

Use custom map marker icons

Out-of-the-box, Toolset provides you with an array of map marker icons. You can also easily add your own custom ones.

Go to the Toolset → Settings page and click the Maps tab. There, look for the Map markers section and click the Add a new marker button.

We recommend using the following format:

  • Use transparent PNG or SVG format so the map is visible underneath the marker icon.
  • Use icons with dimensions of 32 x 32 pixels. This is the dimension we automatically resize the SVG markers to. We don’t scale other image format so if you use them, upload them in the exact size as you want them to appear on the map.

Main Toolset Block Used in this Lesson

Map

Maps with static and dynamic markers

Dario
Updated
January 19, 2021
Send feedback to our documentation team