The [vista_listings_map] shortcode queries the same listings and accepts the same parameters as [vista_listings_list]. However, instead of a repeater view, a map is used to display the listings. The map is contained within a div element with the ID vsta-listing-map.

[vista_listings_map]
[/vista_listings_map]

The example above produces the following map:

Of course, this map isn’t very useful without specific details about each listing. To accomplish this, when one of the blue pins on the map is clicked, details regarding the clicked listing appear underneath the map in a div element with the ID vsta-listing-map-info. Similar to the mechanism behind [vista_listings_list], the format of the details that are displayed within this div is defined by the shortcode content. By adding HTML and valid field names as shortcodes to the [vista_listings_map] shortcode content, you can define a rich and complex listing format which appears under the map whenever a pin is clicked. Here's a complex example:

[vista_listings_map]
[first-photo]
<div class="info">
  <h2>[address]</h2>
  <p class="price">$[listPrice]</p>
  <span class="stats">
    <span class="stats-section">
      <i aria-hidden="true" class="fas fa-bed"></i>
      [bedrooms]
      <p>BEDS</p>
    </span>

    <span class="stats-section">
      <i aria-hidden="true" class="fas fa-bath"></i>			
      [baths]
      <p>BATHS</p>
    </span>

    <span class="stats-section">
      <i aria-hidden="true" class="fas fa-ruler-combined"></i>			
      [sqft]
      <p>SQ. FT</p>
    </span>

    <span class="stats-section">
      <i aria-hidden="true" class="fas fa-dollar-sign"></i>		
      [sqftPrice]
      <p>$/SQ. FT</p>
    </span>
  </span>
  <p class="ID">Listing #[listingId]</p>
  [viewButton]
</div>
[/vista_listings_map]

When styled with some CSS, this shortcode produces listings that look like the following:

This display only appears once one of the blue pins on the map is clicked. As you can see, details about the clicked listing are shown below the map using the HTML specified in the shortcode content. Clicking a different pin will update the listing displayed under the map with new MLS data while keeping the same format. Currently, there's no way to close the detail view under the map once it's open. Valid field names that can be used as shortcodes within the [vista_listings_map] contents are the same as the fields that are usable within [vista_listings_list]: