'जगह की फ़ोटो' के नए वर्शन पर माइग्रेट करना

Place Photos की मदद से, अपने वेब पेजों पर अच्छी क्वालिटी का फ़ोटोग्राफ़िक कॉन्टेंट जोड़ा जा सकता है. इस पेज पर, Place क्लास (नया) और PlacesService (लेगसी) में मौजूद जगह की फ़ोटो की सुविधाओं के बीच अंतर बताया गया है. साथ ही, तुलना करने के लिए कुछ कोड स्निपेट दिए गए हैं.

• PlacesService (लेगसी) getDetails() अनुरोध के लिए, PlaceResult ऑब्जेक्ट के हिस्से के तौर पर ज़्यादा से ज़्यादा 10 PlacePhoto ऑब्जेक्ट का कलेक्शन दिखाता है. ऐसा तब होता है, जब अनुरोध में photos फ़ील्ड के बारे में बताया गया हो. textSearch() और nearbySearch() के मामले में, अगर पहली जगह की फ़ोटो उपलब्ध है, तो उसे डिफ़ॉल्ट रूप से दिखाया जाता है.
• Place क्लास, fetchFields() अनुरोध के हिस्से के तौर पर ज़्यादा से ज़्यादा 10 Photo ऑब्जेक्ट का कलेक्शन दिखाता है. ऐसा तब होता है, जब अनुरोध में photos फ़ील्ड के बारे में बताया गया हो.

यहां दी गई टेबल में, Place क्लास और PlacesService के बीच, जगह की फ़ोटो इस्तेमाल करने से जुड़े कुछ मुख्य अंतर बताए गए हैं:

कोड की तुलना करना

इस सेक्शन में, जगह की फ़ोटो के कोड की तुलना की गई है. इससे Places Service और Place क्लास के बीच के अंतर को समझने में मदद मिलती है. कोड स्निपेट में, हर एपीआई पर जगह की फ़ोटो का अनुरोध करने के लिए ज़रूरी कोड दिखाया गया है.

जगहों की जानकारी देने वाली सेवा (लेगसी)

इस स्निपेट में, PlacesService का इस्तेमाल करके फ़ोटो वापस लाने और पेज पर फ़ोटो का पहला नतीजा दिखाने का तरीका बताया गया है. इस उदाहरण में, जगह की जानकारी के अनुरोध में name और photos फ़ील्ड के साथ-साथ जगह का आईडी भी दिया गया है. इसके बाद, सेवा का स्टेटस देखने के बाद, पहली फ़ोटो पेज पर दिखती है. PlacesService को इंस्टैंशिएट करते समय, मैप या div एलिमेंट को तय करना ज़रूरी है. इस उदाहरण में मैप नहीं है, इसलिए div एलिमेंट का इस्तेमाल किया गया है.

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

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

PlacesService, लेखक के ज़रूरी एट्रिब्यूशन को html_attributions के तौर पर दिखाता है. यह एक स्ट्रिंग होती है, जिसमें लेखक की Google प्रोफ़ाइल पेज पर ले जाने वाला यूआरएल होता है. नीचे दिए गए स्निपेट में, पहली फ़ोटो के नतीजे के लिए एट्रिब्यूशन डेटा को वापस पाने का तरीका दिखाया गया है.

let attributionUrl = place.photos[0].html_attributions;

ज़्यादा जानें

• दस्तावेज़ देखें
• getDetails रेफ़रंस
• PlacePhoto इंटरफ़ेस रेफ़रंस

Place class (new)

इस स्निपेट में, जगह की जानकारी दिखाने के लिए fetchFields() तरीके का इस्तेमाल किया गया है. इसमें डिसप्ले नेम और जगह की फ़ोटो शामिल हैं. सबसे पहले, प्लेस आईडी का इस्तेमाल करके एक नया Place ऑब्जेक्ट इंस्टैंटिएट किया जाता है. इसके बाद, fetchFields() को कॉल किया जाता है, जहां displayName और photos फ़ील्ड तय किए जाते हैं. इसके बाद, पेज पर पहली जगह की फ़ोटो दिखती है. Place क्लास का इस्तेमाल करते समय, सेवा की स्थिति की जांच करने की ज़रूरत नहीं होती, क्योंकि इसे अपने-आप मैनेज किया जाता है.

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

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

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

Place क्लास में लेखक के एट्रिब्यूशन

Place क्लास, लेखक के बारे में जानकारी को AuthorAttribution इंस्टेंस के तौर पर दिखाता है. इसमें लेखक का नाम, लेखक की Google प्रोफ़ाइल पेज का यूआरआई, और लेखक की प्रोफ़ाइल फ़ोटो का यूआरआई शामिल होता है. इस स्निपेट में, पहले फ़ोटो नतीजे के लिए एट्रिब्यूशन डेटा को वापस पाने का तरीका दिखाया गया है.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

ज़्यादा जानें

• पूरा उदाहरण देखें
• दस्तावेज़ देखें
• fetchFields() रेफ़रंस
• Photo क्लास रेफ़रंस