जगह की फ़ोटो

यूरोपियन इकनॉमिक एरिया (ईईए) के डेवलपर

अगर आपका बिलिंग पता यूरोपियन इकनॉमिक एरिया में है, तो 8 जुलाई 2025 से, सेवाओं के आपके इस्तेमाल पर Google Maps Platform की ईईए से जुड़ी सेवा की शर्तें लागू होंगी. यह सुविधा, देश/इलाके के हिसाब से अलग-अलग हो सकती है. ज़्यादा जानें.

Place Photos की मदद से, अपने वेब पेजों पर अच्छी क्वालिटी का फ़ोटोग्राफ़िक कॉन्टेंट जोड़ा जा सकता है. Places डेटाबेस में सेव की गई लाखों फ़ोटो ऐक्सेस करें. साथ ही, Find Place, आस-पास की जगहों की जानकारी, टेक्स्ट से खोजें, अपने-आप पूरा होने की सुविधा, और जगह की जानकारी का इस्तेमाल करके, इमेज का साइज़ बदलें.

पूरे उदाहरण का सोर्स कोड देखें

इस सामान्य फ़ोटो कैरसेल में, चुनी गई जगह की फ़ोटो दिखाई जाती हैं. साथ ही, इसमें फ़ोटो के लिए ज़रूरी एट्रिब्यूशन भी शामिल होते हैं. ये एट्रिब्यूशन, चुनी गई फ़ोटो के सबसे ऊपर बाएं कोने में दिखते हैं.

TypeScript

async function init() {
    const { Place } = (await google.maps.importLibrary(
        'places'
    )) as google.maps.PlacesLibrary;

    // Use a place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: ['displayName', 'photos', 'editorialSummary'],
    });

    // Get the various HTML elements.
    const heading = document.getElementById('heading') as HTMLElement;
    const summary = document.getElementById('summary') as HTMLElement;
    const gallery = document.getElementById('gallery') as HTMLElement;
    const expandedImageDiv = document.getElementById(
        'expanded-image'
    ) as HTMLElement;

    // Show the display name and summary for the place.
    heading.textContent = place.displayName as string;
    summary.textContent = place.editorialSummary as string;

    // Add photos to the gallery.
    place.photos?.forEach((photo) => {
        const altText = 'Photo of ' + place.displayName;
        const img = document.createElement('img');
        const imgButton = document.createElement('button');
        const expandedImage = document.createElement('img');
        img.src = photo?.getURI({ maxHeight: 380 });
        img.alt = altText;
        imgButton.addEventListener('click', (event) => {
            centerSelectedThumbnail(imgButton);
            event.preventDefault();
            expandedImage.src = img.src;
            expandedImage.alt = altText;
            expandedImageDiv.innerHTML = '';
            expandedImageDiv.appendChild(expandedImage);
            const attributionLabel = createAttribution(
                photo.authorAttributions[0]
            )!;
            expandedImageDiv.appendChild(attributionLabel);
        });

        imgButton.addEventListener('focus', () => {
            centerSelectedThumbnail(imgButton);
        });

        imgButton.appendChild(img);
        gallery.appendChild(imgButton);
    });

    // Display the first photo.
    if (place.photos && place.photos.length > 0) {
        const photo = place.photos[0];
        const img = document.createElement('img');
        img.alt = 'Photo of ' + place.displayName;
        img.src = photo.getURI();
        expandedImageDiv.appendChild(img);

        if (photo.authorAttributions && photo.authorAttributions.length > 0) {
            expandedImageDiv.appendChild(
                createAttribution(photo.authorAttributions[0])
            );
        }
    }

    // Helper function to create attribution DIV.
    function createAttribution(
        attribution: google.maps.places.AuthorAttribution
    ) {
        const attributionLabel = document.createElement('a');
        attributionLabel.classList.add('attribution-label');
        attributionLabel.textContent = attribution.displayName;
        attributionLabel.href = attribution.uri!;
        attributionLabel.target = '_blank';
        attributionLabel.rel = 'noopener noreferrer';
        return attributionLabel;
    }

    // Helper function to center the selected thumbnail in the gallery.
    function centerSelectedThumbnail(element: HTMLElement) {
        element.scrollIntoView({
            behavior: 'smooth',
            block: 'center',
            inline: 'center',
        });
    }
}

init();
index.ts

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

async function init() {
    const { Place } = (await google.maps.importLibrary('places'));
    // Use a place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
    });
    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: ['displayName', 'photos', 'editorialSummary'],
    });
    // Get the various HTML elements.
    const heading = document.getElementById('heading');
    const summary = document.getElementById('summary');
    const gallery = document.getElementById('gallery');
    const expandedImageDiv = document.getElementById('expanded-image');
    // Show the display name and summary for the place.
    heading.textContent = place.displayName;
    summary.textContent = place.editorialSummary;
    // Add photos to the gallery.
    place.photos?.forEach((photo) => {
        const altText = 'Photo of ' + place.displayName;
        const img = document.createElement('img');
        const imgButton = document.createElement('button');
        const expandedImage = document.createElement('img');
        img.src = photo?.getURI({ maxHeight: 380 });
        img.alt = altText;
        imgButton.addEventListener('click', (event) => {
            centerSelectedThumbnail(imgButton);
            event.preventDefault();
            expandedImage.src = img.src;
            expandedImage.alt = altText;
            expandedImageDiv.innerHTML = '';
            expandedImageDiv.appendChild(expandedImage);
            const attributionLabel = createAttribution(photo.authorAttributions[0]);
            expandedImageDiv.appendChild(attributionLabel);
        });
        imgButton.addEventListener('focus', () => {
            centerSelectedThumbnail(imgButton);
        });
        imgButton.appendChild(img);
        gallery.appendChild(imgButton);
    });
    // Display the first photo.
    if (place.photos && place.photos.length > 0) {
        const photo = place.photos[0];
        const img = document.createElement('img');
        img.alt = 'Photo of ' + place.displayName;
        img.src = photo.getURI();
        expandedImageDiv.appendChild(img);
        if (photo.authorAttributions && photo.authorAttributions.length > 0) {
            expandedImageDiv.appendChild(createAttribution(photo.authorAttributions[0]));
        }
    }
    // Helper function to create attribution DIV.
    function createAttribution(attribution) {
        const attributionLabel = document.createElement('a');
        attributionLabel.classList.add('attribution-label');
        attributionLabel.textContent = attribution.displayName;
        attributionLabel.href = attribution.uri;
        attributionLabel.target = '_blank';
        attributionLabel.rel = 'noopener noreferrer';
        return attributionLabel;
    }
    // Helper function to center the selected thumbnail in the gallery.
    function centerSelectedThumbnail(element) {
        element.scrollIntoView({
            behavior: 'smooth',
            block: 'center',
            inline: 'center',
        });
    }
}
init();
index.js

सीएसएस

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    display: flex;
    border: 2px solid black;
    border-radius: 10px;
    padding: 10px;
    max-width: 950px;
    height: 100%;
    max-height: 400px;
    box-sizing: border-box;
}

.place-overview {
    width: 400px;
    height: 380px;
    overflow-x: auto;
    position: relative;
    margin-right: 20px;
}

#info {
    font-family: sans-serif;
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    padding-bottom: 10px;
}

#heading {
    width: 500px;
    font-size: x-large;
    margin-bottom: 20px;
}

#summary {
    width: 100%;
}

#gallery {
    display: flex;
    padding-top: 10px;
}

#gallery img {
    width: 200px;
    height: 200px;
    margin: 10px;
    border-radius: 10px;
    cursor: pointer;
    object-fit: cover; /* fill the area without distorting the image */
}

#expanded-image {
    display: flex;
    height: 370px;
    overflow: hidden;
    background-color: #000;
    border-radius: 10px;
    margin: 0 auto;
}

.attribution-label {
    background-color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-family: sans-serif;
    margin: 2px;
    position: absolute;
}

button {
    display: flex;
    outline: none;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
}

button:focus {
    border: 2px solid blue;
    border-radius: 10px;
}
style.css

एचटीएमएल

<html lang="en">
    <head>
        <title>Place Photos</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
        ({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </head>
    <body>
        <div id="container">
            <div class="place-overview">
                <div id="info">
                    <h1 id="heading"></h1>
                    <div id="summary"></div>
                </div>
                <div id="gallery"></div>
            </div>
            <div id="expanded-image"></div>
        </div>
    </body>
</html>
index.html

सैंपल आज़माएं

JSFiddle.net

फ़ोटो पाना

किसी जगह की फ़ोटो पाने के लिए, fetchFields() अनुरोध के पैरामीटर में photos फ़ील्ड शामिल करें. जगह की जानकारी वाले नतीजे में, ज़्यादा से ज़्यादा 10 Photo ऑब्जेक्ट का कलेक्शन होता है. इससे इमेज और उनके लिए ज़रूरी एट्रिब्यूशन की जानकारी ऐक्सेस की जा सकती है. getURI() को कॉल करें ताकि सोर्स फ़ोटो का यूआरआई वापस मिल सके. इसके लिए, PhotoOptions का इस्तेमाल करें ताकि वापस मिली इमेज की ज़्यादा से ज़्यादा ऊंचाई और/या चौड़ाई सेट की जा सके. अगर आपने maxHeight और maxWidth, दोनों के लिए कोई वैल्यू दी है, तो फ़ोटो सेवा इमेज का साइज़ बदलकर, दोनों में से छोटे साइज़ में कर देगी. हालांकि, इससे इमेज के आसपेक्ट रेशियो पर कोई असर नहीं पड़ेगा. अगर कोई डाइमेंशन नहीं दिया गया है, तो पूरी इमेज दिखाई जाएगी.

चेतावनी: फ़ोटो के यूआरआई या फ़ोटो को कैश मेमोरी में सेव न करें. पक्का करें कि आपको हमेशा नए Place ऑब्जेक्ट से फ़ोटो का डेटा मिले. ज़्यादा जानकारी के लिए, Maps Platform की सेवा की शर्तों के सेक्शन 3.2.3(b)(कैश मेमोरी में सेव न करना) में बताई गई, कैश मेमोरी में सेव करने से जुड़ी पाबंदियां देखें.

Photo क्लास, ये प्रॉपर्टी दिखाता है:

• authorAttributions: यह AuthorAttribution ऑब्जेक्ट का कलेक्शन है. इसमें एट्रिब्यूशन के लिए ज़रूरी टेक्स्ट और यूआरएल शामिल होते हैं.
• flagContentURI: एक लिंक, जहां उपयोगकर्ता फ़ोटो से जुड़ी समस्या की शिकायत कर सकता है.
• googleMapsURI: Google Maps पर फ़ोटो दिखाने का लिंक.
• heightPx: पिक्सल में फ़ोटो की ऊंचाई.
• widthPx: पिक्सल में फ़ोटो की चौड़ाई.

यहां फ़ोटो के लिए, जगह के बारे में ज़्यादा जानकारी के अनुरोध का उदाहरण दिया गया है. इसमें इमेज का सोर्स यूआरआई पाने के लिए, फ़ोटो इंस्टेंस पर getURI() को कॉल किया गया है. इसके बाद, पहले फ़ोटो नतीजे को img एलिमेंट में जोड़ा गया है. इसमें एट्रिब्यूशन को छोटा करने के लिए शामिल नहीं किया गया है:

const { Place } = await google.maps.importLibrary('places');

// Use a place ID to create a new Place instance.
const place = new Place({
    id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['photos'] });

// Add the first photo to an img element.
const photoImg = document.getElementById('image-container');
photoImg.src = place.photos[0].getURI({maxHeight: 400});

लेखक के एट्रिब्यूशन

फ़ोटो दिखाने पर, आपको फ़ोटो के लेखक का एट्रिब्यूशन भी दिखाना होगा. एट्रिब्यूशन वापस पाने के लिए, AuthorAttribution क्लास का इस्तेमाल करें. एट्रिब्यूशन में लेखक का नाम (displayName), उसकी Google Maps प्रोफ़ाइल का यूआरआई (uri), और लेखक की फ़ोटो का यूआरआई (photoURI) शामिल होता है. यहां दिए गए स्निपेट में, किसी जगह की फ़ोटो के लिए displayName, uri, और photoURI को वापस लाने का तरीका दिखाया गया है.

  let name = place.photos[0].authorAttributions[0].displayName;
  let url = place.photos[0].authorAttributions[0].uri;
  let authorPhoto = place.photos[0].authorAttributions[0].photoURI;