append.tourist.js

gistfile1.txt

function displayPlaces(places) {
    if (places.length === 0) {
        resultsContainer.innerHTML = '<div class="loading">No places found. Try a different location or category.</div>';
        return;
    }

    resultsContainer.innerHTML = ""; // Clear previous results

    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;

        // Create place card
        const placeCard = document.createElement("div");
        placeCard.classList.add("place-card");
        placeCard.dataset.lat = lat;
        placeCard.dataset.lng = lng;
        placeCard.dataset.name = place.name;

        // Create place image container
        const placeImage = document.createElement("div");
        placeImage.classList.add("place-image");

        if (place.categories && place.categories[0]?.icon) {
            const img = document.createElement("img");
            img.src = `${place.categories[0].icon.prefix}88${place.categories[0].icon.suffix}`;
            img.alt = categories;
            placeImage.appendChild(img);
        } else {
            placeImage.textContent = "No Image Available";
        }

        // Create place details container
        const placeDetails = document.createElement("div");
        placeDetails.classList.add("place-details");

        const placeName = document.createElement("div");
        placeName.classList.add("place-name");
        placeName.textContent = place.name;

        const placeCategory = document.createElement("div");
        placeCategory.classList.add("place-category");
        placeCategory.textContent = categories;

        const placeAddress = document.createElement("div");
        placeAddress.classList.add("place-address");
        placeAddress.textContent = address;

        // Create buttons container
        const placeButtons = document.createElement("div");
        placeButtons.classList.add("place-buttons");

        const viewMapButton = document.createElement("button");
        viewMapButton.classList.add("view-map");
        viewMapButton.textContent = "View on Map";

        placeButtons.appendChild(viewMapButton);

        // Append all elements
        placeDetails.appendChild(placeName);
        placeDetails.appendChild(placeCategory);
        placeDetails.appendChild(placeAddress);
        placeDetails.appendChild(placeButtons);

        placeCard.appendChild(placeImage);
        placeCard.appendChild(placeDetails);

        resultsContainer.appendChild(placeCard);
    }
}