{"id":1620853,"date":"2020-05-13T14:21:13","date_gmt":"2020-05-13T14:21:13","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&#038;p=1620853"},"modified":"2021-01-19T13:19:43","modified_gmt":"2021-01-19T13:19:43","slug":"displaying-a-list-of-posts-on-a-map","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/es\/course-lesson\/displaying-a-list-of-posts-on-a-map\/","title":{"rendered":"Displaying a List of Posts on A Map"},"content":{"rendered":"\n<p>You need to place both&nbsp;<strong>View&nbsp;<\/strong>and&nbsp;<strong>Map&nbsp;<\/strong>blocks on the same page. It is only important that the View has access to the address custom field.<\/p>\n\n\n\n<p>A View will <a href=\"https:\/\/toolset.com\/es\/glossary\/wp_query\/\">query the database<\/a> 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.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>To add a map that uses a View as the source for the markers you have to:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Add a&nbsp;<strong>View&nbsp;<\/strong>block to your page. This View must list posts that feature an&nbsp;<strong>Address&nbsp;<\/strong>custom field.<\/li><li>Insert a&nbsp;<strong>Map&nbsp;<\/strong>block.<\/li><li>As the source of the markers choose the&nbsp;<strong>View block<\/strong>.<\/li><li>In the&nbsp;<strong>View block&nbsp;<\/strong>dropdown choose the name of the block you have inserted and in the&nbsp;<strong>Field&nbsp;<\/strong>dropdown select the <a href=\"https:\/\/toolset.com\/glossary\/custom-fields\/\">custom field<\/a> that contains the address.<\/li><\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"b5a74f76e0a99cd2b2d006b7829aadc0\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/maps-view-as-the-source.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2019\/11\/maps-view-as-the-source-500x339.png\" alt=\"Settings for the map that uses a View as the source for the markers\" class=\"wp-image-1380899\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Settings for the map that uses a View as the source for the markers<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>That&#8217;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.<\/p>\n","protected":false},"author":4341,"featured_media":1626003,"template":"","related-lesson":[8423,8411],"class_list":["post-1620853","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-maps","related-lesson-view"],"_links":{"self":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1620853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/users\/4341"}],"version-history":[{"count":5,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1620853\/revisions"}],"predecessor-version":[{"id":1842201,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1620853\/revisions\/1842201"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media\/1626003"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media?parent=1620853"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/related-lesson?post=1620853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}