display_places

display_places.js

for (let i = 0; i < places.length; ++i) {
        const place = places[i];
        const address = place.location?.formatted_address || place.location?.address || 'Address not available';
        const categories = place.categories?.map(cat => cat.name).join(', ') || 'Category not available';
        const lat = place.geocodes?.main?.latitude;
        const lng = place.geocodes?.main?.longitude;

        output += `
            <div class="place-card" data-lat="${lat}" data-lng="${lng}" data-name="${place.name}">
              <div class="place-image">
                ${place.categories && place.categories[0]?.icon ? 
                  `<img src="${place.categories[0].icon.prefix}88${place.categories[0].icon.suffix}" alt="${categories}">` :
                  'No Image Available'
                }
              </div>
              <div class="place-details">
                <div class="place-name">${place.name}</div>
                <div class="place-category">${categories}</div>
                <div class="place-address">${address}</div>
                <div class="place-buttons">
                  <button class="view-map">View on Map</button>
                </div>
              </div>
            </div>
        `;
    }

    resultsContainer.innerHTML = output;
}