जगह की फ़ोटो

उदाहरण के तौर पर दिया गया पूरा सोर्स कोड देखना

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

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.
    let heading = document.getElementById('heading') as HTMLElement;
    let summary = document.getElementById('summary') as HTMLElement;
    let gallery = document.getElementById('gallery') as HTMLElement;
    let expandedImageDiv = document.getElementById('expanded-image') as HTMLElement;
    let attributionLabel;

    // 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.
    if (place.photos) {
        place.photos?.forEach((photo) => {
            const img = document.createElement('img');
            const expandedImage = document.createElement('img');
            img.src = photo.getURI({maxHeight: 380});
            img.addEventListener('click', (event) => {
                event.preventDefault();
                expandedImage.src = img.src;
                expandedImageDiv.innerHTML = '';
                expandedImageDiv.appendChild(expandedImage);
                attributionLabel = createAttribution(photo.authorAttributions);
                expandedImageDiv.appendChild(attributionLabel);
            });

            gallery.appendChild(img);
        });
    }

    // Display the first photo.
    const img = document.createElement('img');
    img.src = place.photos![0].getURI();
    expandedImageDiv.appendChild(img);
    attributionLabel = createAttribution(place.photos![0].authorAttributions);
    expandedImageDiv.appendChild(attributionLabel);

    // Helper function to create attribution DIV.
    function createAttribution(attribution) {
        attributionLabel = document.createElement("a");
        attributionLabel.classList.add('attribution-label');
        attributionLabel.textContent = attribution[0].displayName;
        attributionLabel.href = attribution[0].uri;
        attributionLabel.target = '_blank;'
        return attributionLabel;
    }
}

init();
index.ts

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.
  let heading = document.getElementById("heading");
  let summary = document.getElementById("summary");
  let gallery = document.getElementById("gallery");
  let expandedImageDiv = document.getElementById("expanded-image");
  let attributionLabel;

  // Show the display name and summary for the place.
  heading.textContent = place.displayName;
  summary.textContent = place.editorialSummary;
  // Add photos to the gallery.
  if (place.photos) {
    place.photos?.forEach((photo) => {
      const img = document.createElement("img");
      const expandedImage = document.createElement("img");

      img.src = photo.getURI({ maxHeight: 380 });
      img.addEventListener("click", (event) => {
        event.preventDefault();
        expandedImage.src = img.src;
        expandedImageDiv.innerHTML = "";
        expandedImageDiv.appendChild(expandedImage);
        attributionLabel = createAttribution(photo.authorAttributions);
        expandedImageDiv.appendChild(attributionLabel);
      });
      gallery.appendChild(img);
    });
  }

  // Display the first photo.
  const img = document.createElement("img");

  img.src = place.photos[0].getURI();
  expandedImageDiv.appendChild(img);
  attributionLabel = createAttribution(place.photos[0].authorAttributions);
  expandedImageDiv.appendChild(attributionLabel);

  // Helper function to create attribution DIV.
  function createAttribution(attribution) {
    attributionLabel = document.createElement("a");
    attributionLabel.classList.add("attribution-label");
    attributionLabel.textContent = attribution[0].displayName;
    attributionLabel.href = attribution[0].uri;
    attributionLabel.target = "_blank;";
    return attributionLabel;
  }
}

init();
index.js

सीएसएस

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

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

#container {
  display: flex;
  padding: 10px;
  width: 100%;
  height: 100%;
  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: 500px;
}

#gallery {
  display: flex;
}

#gallery img {
  width: 200px;
  height: 200px;
  margin-right: 10px;
  margin-top: 40px;
  border-radius: 10px;
  cursor: pointer;
}

#expanded-image {
  display: flex;
  height: 380px;
  overflow: hidden;
  background-color: #000;
}

#expanded-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.attribution-label {
  background-color: #fff;
  opacity: 0.7;
  font-size: 10px;
  font-family: sans-serif;
  margin: 2px;
  position: absolute;
}

style.css

एचटीएमएल

<html>
  <head>
    <title>Place Photos</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="place-overview">
        <div id="info">
          <div id="heading"></div>
          <div id="summary"></div>
        </div>
        <div id="gallery"></div>
      </div>
      <div id="expanded-image"></div>
    </div>

    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

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

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

फ़ोटो पाना

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

यहां दिए गए उदाहरण में, फ़ोटो के लिए जगह की जानकारी का अनुरोध करने का तरीका बताया गया है. इसमें इमेज के सोर्स यूआरएल को दिखाने के लिए, फ़ोटो के किसी इंस्टेंस पर 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;