Listing Page Map

Make a page with locations or areas listed and interactable between the map and your posts.

With Mapster Pro, you can create a page that will list the posts that you've attached to a map beside them, and allow users to interact with the post listings and have things change on the map. This is easiest to see in an example like the one below.

This type of map can be a little tricky to set up, but these instructions should help you to get going.

Make Your Posts, Then Geographies, & Associate Them

This type of map was originally built for polygons, but it should work equally well with other types of geographies. The idea is that you create a geography in Mapster, and then "associate" that geography with another post in your Wordpress installation. It doesn't matter what post type your other post is, you can associate in the sidebar area of any geography that you create.

This associated post will be used to create the "Listing" side of the Listing Map. It will use the Title and Featured Image of this post in order to create the listing itself, and when the user clicks on the listing, they will be directed to the post's URL on the frontend.

Create the Listing Map

For the listing map, not every geography that you add will be shown in the Listing area. Only those geographies that are "associated" with other posts in your installation will be shown.

So, feel free to add any geographies you want as if you were creating a normal map! This can be handy to add labels on top of polygons, for instance, if you want to only associate posts with polygons but still show neat labels on top of them.

Make sure to go to the "Specialty Maps" section and select "Listing Page".

You can choose a few options:

  • Lazy load (still in development)

  • Center on hover -- when a user hovers over one of the listings, the map will automatically center on the associated geography

  • Listing style -- choose between an image grid (great if you have featured images) or just a simple list

  • Stick map -- if you have a long set of listings, the map will move smoothly beside the listings as the user scrolls down the page

Adding the Shortcodes

The best way to add the Listing Map and the Listings into your installation is to use the provided shortcodes in different container <div>. You can find the Map shortcode on the "Maps" page in Wordpress, and the Listing shortcode in the "Specialty Maps" > Listing Page area of the specific map you created.

Put these shortcodes into the areas you want them to appear on your page -- usually best as two columns -- and you should see your listing map appear!

Last updated