जगह की जानकारी

फे़च फ़ील्ड

अगर आपके पास पहले से कोई Place ऑब्जेक्ट या जगह का आईडी है, तो उस जगह की जानकारी पाने के लिए Place.fetchFields तरीके का इस्तेमाल करें. जवाब देने के लिए, जगह के डेटा के फ़ील्ड की कॉमा-सेपरेटेड लिस्ट दें. ऊंट के केस में, फ़ील्ड के नाम बताएं. अनुरोध किए गए फ़ील्ड का डेटा पाने के लिए, दिखाए गए Place ऑब्जेक्ट का इस्तेमाल करें.

इस उदाहरण में, नया Place बनाने के लिए जगह के आईडी का इस्तेमाल किया गया है, displayName और formattedAddress फ़ील्ड का अनुरोध करने के लिए Place.fetchFields को कॉल किया जाता है, मैप में एक मार्कर जोड़ा जाता है, और कुछ डेटा को कंसोल में लॉग किया जाता है.

TypeScript

async function getPlaceDetails(Place) {
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
        requestedLanguage: 'en', // optional
    });

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

    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);

    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}
index.ts

JavaScript

async function getPlaceDetails(Place) {
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  // Use place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // Log the result
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker
  const marker = new AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

index.js

जगह की खास जानकारी देने वाले कॉम्पोनेंट का इस्तेमाल करना

ध्यान दें: यह सैंपल, ओपन सोर्स लाइब्रेरी का इस्तेमाल करता है. लाइब्रेरी से जुड़ी मदद और सुझाव या राय पाने के लिए, README देखें.

वेब कॉम्पोनेंट का इस्तेमाल करके, कोड की कुछ लाइनों की मदद से जगह की जानकारी दिखाएं.

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

वेब कॉम्पोनेंट क्या हैं?

वेब कॉम्पोनेंट की मदद से, अपनी पसंद के मुताबिक, फिर से इस्तेमाल किए जा सकने वाले, एन्क्रिप्ट किए गए एचटीएमएल टैग बनाए जा सकते हैं. इन टैग का इस्तेमाल वेब ऐप्लिकेशन के एचटीएमएल में कहीं भी किया जा सकता है. ये सभी मॉडर्न ब्राउज़र पर काम करते हैं और यूज़र इंटरफ़ेस (यूआई) और फ़ंक्शन को एनकैप्सुलेट करने के लिए, फ़्रेमवर्क-एग्नोस्टिक तरीके का इस्तेमाल करते हैं.

जगह की खास जानकारी वाला कॉम्पोनेंट क्या है?

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

एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी क्या होती है?

Google Maps Platform की एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी, वेब कॉम्पोनेंट का एक सेट है. इसकी मदद से, डेवलपर कम मेहनत और ज़्यादा तेज़ी से मैप और जगह की जानकारी वाली सुविधाएं बना सकते हैं. यह बॉयलरप्लेट कोड, सबसे सही तरीकों, और रिस्पॉन्सिव डिज़ाइन को शामिल करता है. इससे जटिल मैप इंटरफ़ेस को एक ही एचटीएमएल एलिमेंट में बदल दिया जाता है. कुल मिलाकर, ये कॉम्पोनेंट मैप और जगह की जानकारी से जुड़े कोड को पढ़ना, सीखना, पसंद के मुताबिक बनाना, और मैनेज करना आसान बनाते हैं.

शुरू करें

शुरू करने के लिए, npm के साथ एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी लोड करें.

सबसे अच्छी परफ़ॉर्मेंस के लिए, पैकेज मैनेजर का इस्तेमाल करें और सिर्फ़ अपनी ज़रूरत के कॉम्पोनेंट इंपोर्ट करें. इस पैकेज को एनपीएम पर @googlemaps/extended-comp-library के तौर पर लिस्ट किया गया है. इसे इसके साथ इंस्टॉल करें:

  npm i @googlemaps/extended-component-library;

इसके बाद, अपने ऐप्लिकेशन में इस्तेमाल किए जाने वाले कॉम्पोनेंट इंपोर्ट करें.

  import '@googlemaps/extended-component-library/place_overview.js';

एनपीएम लाइब्रेरी लोड करने के बाद, Cloud Console से एपीआई पासकोड पाएं.

  <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placeoverview_v1"></gmpx-api-loader>

जगह की खास जानकारी वाले कॉम्पोनेंट के टैग का इस्तेमाल, अपनी पसंद के जगह के आईडी के साथ करें. यह ऑकलैंड में Google के ऑफ़िस का प्लेसहोल्डर है.

  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>

जगह की खास जानकारी के कॉम्पोनेंट के पांच अलग-अलग साइज़ होते हैं. डिफ़ॉल्ट कॉम्पोनेंट, x-large साइज़ वाला वैरिएशन इस्तेमाल करता है. साइज़ के अन्य वैरिएशन पाने के लिए, size एट्रिब्यूट जोड़ें और उसमें बदलाव करें.

  <!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" -->
  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw" size="small"></gmpx-place-overview>

ज़्यादा जानकारी के लिए, GitHub या npm देखें. सैंपल कोड में इस्तेमाल किए गए कॉम्पोनेंट देखने के लिए, GitHub पर उदाहरण पेज पर जाएं.