travel-ai/try.html at main · sdswoc/travel-ai · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google Place Photo Display</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        #photo {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <h1>Place Photo</h1>
    <img id="photo" alt="Place Photo">
    <script>
        async function fetchPlacePhoto() {
            const apiKey = ''; // Replace with your actual API key
            const photoName = 'places/ChIJB0--uF7XCDkRFJ5yUFAIXMI/photos/AWYs27zBcaU4hz7ZKaNdfqLpycKQjTGqWyjvIipH8S2Pq7NRHINM0wnwUVAKzqMQs8bjZCTxkZpSmSBCrsPr-2iYkdH8plaI_WabTFMRAdeyJTOuKzWKyO7CMVpiMUtWEnifYQe9dvfcyqHMG2a_QkFu2QtXPLHUwc4T3iOg'; // Replace with actual photo name
            const maxWidth = 400; // Desired maximum width of the photo

            const url = `https://places.googleapis.com/v1/${photoName}/media?key=${apiKey}&maxWidthPx=${maxWidth}&skipHttpRedirect=true`;

            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                const data = await response.json();
                const photoUri = data.photoUri;

                // Set the photo URI to the img element
                document.getElementById('photo').src = photoUri;
            } catch (error) {
                console.error('Error fetching the photo:', error);
            }
        }

        // Fetch and display the photo on page load
        window.onload = fetchPlacePhoto;
    </script>
</body>
</html>