স্থানগুলি UI কিট : একটি রেডি-টু-ব্যবহারের লাইব্রেরি যা কাস্টমাইজেশন এবং কম-কোড বিকাশের জন্য জায়গা প্রদান করে। এটি ব্যবহার করে দেখুন, এবং আপনার UI কিট অভিজ্ঞতাতে আপনার ইনপুট শেয়ার করুন।

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

স্থান ফটো

ইউরোপীয় অর্থনৈতিক অঞ্চল (EEA) ডেভেলপাররা

স্থানের ছবি ব্যবহার করে আপনি আপনার ওয়েব পৃষ্ঠাগুলিতে উচ্চমানের ফটোগ্রাফিক সামগ্রী যোগ করতে পারবেন। স্থানের ডাটাবেসে সংরক্ষিত লক্ষ লক্ষ ছবি অ্যাক্সেস করুন এবং স্থান খুঁজুন, কাছাকাছি অনুসন্ধান, পাঠ্য অনুসন্ধান, স্বয়ংসম্পূর্ণ এবং স্থানের বিবরণ ব্যবহার করে আকার পরিবর্তনযোগ্য ছবি পান।

সম্পূর্ণ উদাহরণ সোর্স কোডটি দেখুন

এই প্রাথমিক ছবির ক্যারোজেলটি নির্দিষ্ট স্থানের জন্য ছবি প্রদর্শন করে, যার মধ্যে প্রয়োজনীয় লেখকের গুণাবলীও রয়েছে (নির্বাচিত ছবির উপরের বাম কোণে দেখানো হয়েছে)।

টাইপস্ক্রিপ্ট

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

জাভাস্ক্রিপ্ট

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

নমুনা চেষ্টা করুন

জেএসফিডল.নেট

ছবি তুলুন

কোনও জায়গার ছবি পেতে, আপনার fetchFields() অনুরোধ প্যারামিটারে photos ফিল্ডটি অন্তর্ভুক্ত করুন। ফলস্বরূপ Place ইনস্ট্যান্সে ১০টি পর্যন্ত Photo অবজেক্টের একটি অ্যারে থাকে, যেখান থেকে আপনি ছবি এবং তাদের প্রয়োজনীয় অ্যাট্রিবিউশন তথ্য অ্যাক্সেস করতে পারবেন। getURI() এ কল করে সোর্স ফটো URI ফেরত পাঠান, PhotoOptions ব্যবহার করে ফেরত আসা ছবির সর্বোচ্চ উচ্চতা এবং/অথবা প্রস্থ সেট করুন। যদি আপনি maxHeight এবং maxWidth উভয়ের জন্য একটি মান নির্দিষ্ট করেন, তাহলে ফটো পরিষেবাটি মূল আকৃতির অনুপাত বজায় রেখে দুটি আকারের মধ্যে ছোট আকারে ছবিটির আকার পরিবর্তন করবে। যদি কোনও মাত্রা নির্দিষ্ট না করা থাকে, তাহলে পূর্ণ-আকারের ছবিটি ফেরত পাঠানো হবে।

Photo ক্লাসটি নিম্নলিখিত বৈশিষ্ট্যগুলি প্রকাশ করে:

authorAttributions : প্রয়োজনীয় অ্যাট্রিবিউশন টেক্সট এবং URL ধারণকারী AuthorAttribution অবজেক্টের একটি অ্যারে।
flagContentURI : একটি লিঙ্ক যেখানে ব্যবহারকারী ছবির সমস্যা চিহ্নিত করতে পারেন।
googleMapsURI : গুগল ম্যাপে ছবিটি দেখানোর জন্য একটি লিঙ্ক।
heightPx : ছবির উচ্চতা পিক্সেলে।
widthPx : ছবির প্রস্থ পিক্সেলে।

নিচের উদাহরণে দেখানো হয়েছে যে, ছবির জন্য Place Details অনুরোধ করা, ছবির উৎস URI ফেরত দেওয়ার জন্য একটি ছবির ইনস্ট্যান্সে 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 ( uri ), এবং লেখকের ছবির জন্য একটি 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;