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

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

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

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

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

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

Places service (लेगसी)

यहां दिए गए स्निपेट में, 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 इंटरफ़ेस रेफ़रंस

जगह की क्लास (नई)

यहां दिए गए स्निपेट में, 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 क्लास रेफ़रंस