{"id":363187,"date":"2025-09-28T11:28:23","date_gmt":"2025-09-28T05:28:23","guid":{"rendered":"https:\/\/directorist.com\/?post_type=docs&p=363187"},"modified":"2025-09-28T11:28:23","modified_gmt":"2025-09-28T05:28:23","password":"","slug":"listings-with-map","status":"publish","type":"docs","link":"https:\/\/directorist.com\/docs\/listings-with-map\/","title":{"rendered":"Listings with Map"},"content":{"rendered":"\n

Overview<\/strong><\/h2>\n\n\n\n

The Listings with Map extension adds a new layout view for directory and search results pages, allowing visitors to browse listings and view them on an interactive map side by side. The listings and advanced search filters are shown on the left, while the map with dynamic markers appears on the right.<\/p>\n\n\n\n

This layout is ideal for location-based directories, such as real estate, hotels, restaurants, travel services, or any business where users need to explore listings by location. <\/p>\n\n\n\n

Key Features\u00a0<\/strong> <\/h2>\n\n\n\n
    \n
  1. Display listings and interactive map side by side in a single layout.<\/li>\n\n\n\n
  2. Built-in shortcode for flexible placement with adjustable parameters.<\/li>\n\n\n\n
  3. Choose between 2-column or 3-column layout for listings.<\/li>\n\n\n\n
  4. Supports both Grid and List views for better browsing.<\/li>\n\n\n\n
  5. Advanced filtering with categories, tags, locations, and more.<\/li>\n\n\n\n
  6. Fully responsive and optimized for desktop and mobile. <\/li>\n<\/ol>\n\n\n\n

    Installation & Configuration<\/strong> <\/h2>\n\n\n\n
      \n
    1. Navigate to Directory Listings > Themes & Extensions<\/strong><\/li>\n\n\n\n
    2. Find \u201cListings with Map\u201d <\/strong>and <\/strong>click Install <\/strong>and then Activate.<\/strong><\/li>\n\n\n\n
    3. Navigate to Directory Listings > Settings > Extensions > Extension General<\/strong><\/li>\n<\/ol>\n\n\n\n

      Settings Reference<\/strong> <\/p>\n\n\n\n

      1. Layout Settings<\/strong> <\/p>\n\n\n\n

        <\/ol>\n\n\n\n

        Columns: Choose between 2-column or 3-column layout for displaying listings next to the map.<\/p>\n\n\n\n

        2. Listing Settings<\/strong><\/p>\n\n\n\n

          \n
        • Default View: Choose how listings should be displayed (Grid or List view).<\/li>\n<\/ul>\n\n\n\n
            \n
          • Display \u201cView As\u201d <\/strong>Dropdown: Toggle visibility of the \u201cView As\u201d option on the All Listings page.<\/li>\n<\/ul>\n\n\n\n
              \n
            • Display \u201cSort By\u201d <\/strong>Dropdown: Toggle visibility of the \u201cSort By\u201d option to allow sorting by title, date, or price.<\/li>\n<\/ul>\n\n\n\n
              \"\"<\/figure>\n\n\n\n

              Shortcode Setup<\/strong> <\/p>\n\n\n\n

              The extension comes with a dedicated shortcode for flexible placement:<\/p>\n\n\n\n

              [directorist_all_listing view=”listings_with_map” map_height=”800″]<\/strong> <\/p>\n\n\n\n

              Supported Parameters (Inherited from All Listings)<\/strong> <\/p>\n\n\n\n

                \n
              • Directory_type<\/strong>: Filter by directory type slug.<\/li>\n\n\n\n
              • Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” directory_type=”business”]<\/li>\n<\/ul>\n\n\n\n
                \"\"<\/figure>\n\n\n\n
                  \n
                • orderby<\/strong>: Sort by title, date, rand, or price.
                  Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” orderby=”date”]
                  <\/li>\n\n\n\n
                • order<\/strong>: asc or desc (default: desc).
                  Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” order=”asc”]
                  <\/li>\n\n\n\n
                • listings_per_page<\/strong>: Set number of listings per page.
                  Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” listings_per_page=”6″]
                  <\/li>\n\n\n\n
                • category<\/strong>: Filter by category slugs (comma-separated).
                  Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” category=”buffet, cafe”]
                  <\/li>\n\n\n\n
                • tag<\/strong>: Filter by tag slugs (comma-separated).
                  Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” tag=”italian, seafood”]
                  <\/li>\n\n\n\n
                • location<\/strong>: Filter by location slugs (comma-separated).
                  Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” location=”japan”]
                  <\/li>\n\n\n\n
                • ids<\/strong>: Display listings by IDs.
                  Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” ids=”1,2,5″]<\/li>\n<\/ul>\n\n\n\n
                    \n
                  • featured_only<\/strong>: Show only featured listings (yes\/no).
                    Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” featured_only=”yes”]
                    <\/li>\n\n\n\n
                  • popular_only<\/strong>: Show only popular listings (yes\/no).
                    Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” popular_only=”yes”]
                    <\/li>\n\n\n\n
                  • logged_in_user_only<\/strong>: Restrict listings to logged-in users (yes\/no).
                    Shortcode:<\/strong><\/li>\n<\/ul>\n\n\n\n

                    [directorist_all_listing view=”listings_with_map” logged_in_user_only=”yes”]
                    <\/p>\n\n\n\n

                      \n
                    • redirect_page_url<\/strong>: Redirect listings page to another URL.
                      Shortcode:<\/strong>\u00a0<\/li>\n<\/ul>\n\n\n\n

                      [directorist_all_listing view=”listings_with_map” redirect_page_url=”https:\/\/www.example.com”]<\/p>\n\n\n\n

                        \n
                      • header<\/strong>: Show or hide the header area (yes\/no).
                        Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” header=”no”]
                        <\/li>\n\n\n\n
                      • display_preview_image<\/strong>: Show or hide listing preview images (yes\/no).
                        Shortcode:<\/strong>\u00a0<\/li>\n<\/ul>\n\n\n\n

                        [directorist_all_listing view=”listings_with_map” display_preview_image=”yes”]
                        <\/p>\n\n\n\n

                          \n
                        • show_pagination<\/strong>: Enable or disable pagination (yes\/no).
                          Shortcode:<\/strong> [directorist_all_listing view=”listings_with_map” show_pagination=”no”]<\/li>\n<\/ul>\n\n\n\n

                          Frontend Preview of Business Hours<\/strong> <\/h2>\n\n\n\n

                          After configuring the settings, the final output appears as: <\/p>\n\n\n\n

                            \n
                          1. Listings & Filters on the Left<\/strong> \u2013 Users can browse listings in Grid\/List view and apply filters for categories, tags, or locations.
                            <\/li>\n\n\n\n
                          2. Map with Markers on the Right<\/strong> \u2013 An interactive map shows pins for each listing location, updating dynamically as filters are applied. <\/li>\n<\/ol>\n\n\n\n
                            \"\"<\/figure>\n\n\n\n

                            Notes:<\/strong><\/p>\n\n\n\n

                              \n
                            1. Use the map_height<\/strong> parameter in the shortcode to adjust map height for better design consistency.
                              <\/li>\n\n\n\n
                            2. For directories with many listings, enable pagination or filters to improve performance.
                              <\/li>\n\n\n\n
                            3. If caching is enabled, clear the cache after configuration to ensure map markers update correctly.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

                              Overview The Listings with Map extension adds a new layout view for directory and search results pages, allowing visitors to browse listings and view them on an interactive map side by side. The listings and advanced search filters are shown on the left, while the map with dynamic markers appears on the right. This layout […]<\/p>\n","protected":false},"author":22343,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[694],"doc_tag":[],"class_list":["post-363187","docs","type-docs","status-publish","hentry","doc_category-extensions"],"year_month":"2026-03","word_count":644,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Fairose Farabi","author_nicename":"farabisovware","author_url":"https:\/\/directorist.com\/author\/farabisovware\/"},"doc_category_info":[{"term_name":"Extensions","term_url":"https:\/\/directorist.com\/docs-category\/extensions\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/docs\/363187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/users\/22343"}],"replies":[{"embeddable":true,"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/comments?post=363187"}],"version-history":[{"count":0,"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/docs\/363187\/revisions"}],"wp:attachment":[{"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/media?parent=363187"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/doc_category?post=363187"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/directorist.com\/wp-json\/wp\/v2\/doc_tag?post=363187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}