Clicking marker shows popup with listing name, category, and detail link

Markers without popups force users to guess what each pin represents or drill into a separate detail page just to identify a listing, crushing map-to-detail conversion and making the directory feel broken. Users abandon flows when a tapped marker does nothing, silently loses context, or reveals only an opaque listing ID. Missing name, category, or detail link on click also breaks WCAG 2.2 SC 2.4.4 (Link Purpose) because users cannot discern where the interaction leads without surrounding context.

Attach a click handler to each marker that opens a popup containing the listing name, category or type, and a link to the detail route. Use the map library's built-in popup primitive so focus, escape-to-close, and outside-click dismissal are handled for you. Example with Mapbox GL:

new mapboxgl.Marker()
  .setLngLat([listing.lng, listing.lat])
  .setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML(
    `<h3>${listing.name}</h3><p>${listing.category}</p><a href="/listings/${listing.id}">View details</a>`
  ))
  .addTo(map);

• ID: directory-map-location.map-rendering.marker-popups

• Severity: high

• What to look for: Click on a marker and verify that a popup or modal appears showing at least the listing name, category, and a link to the detail page. Check whether popups close when clicking elsewhere or pressing Escape.

• Pass criteria: Clicking any marker shows a popup containing at least 3 pieces of information: (1) listing name, (2) category or type, and (3) a clickable link to the listing detail page. Count all fields displayed in the popup. Popup closes when appropriate (clicking elsewhere, Escape key).

• Fail criteria: Markers are not clickable, or clicking shows no popup. Popup is missing key info (name, category, or detail link). A popup showing only a listing ID with no readable name does not count as pass.

• Skip (N/A) when: No map markers or marker interaction exists.

• Detail on fail: "Markers clickable but popup shows only the listing name; no category or detail link" or "Markers not clickable — no interaction implemented"

• Remediation: Attach click handlers to markers and render a popup or modal:

  function addMarkerPopups(map, listing) {
    const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(`
      <div class="popup">
        <h3>${listing.name}</h3>
        <p class="category">${listing.category}</p>
        <a href="/listings/${listing.id}">View details →</a>
      </div>
    `);
  
    new mapboxgl.Marker()
      .setLngLat([listing.lng, listing.lat])
      .setPopup(popup)
      .addTo(map);
  }