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

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript वेब सेवा

फ़ील्ड फ़ेच करें

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

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

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 की एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी का एक हिस्सा है. यह वेब कॉम्पोनेंट का एक सेट है, जो डेवलपर को बेहतर मैप और जगह की जानकारी की सुविधाएं तेज़ी से बनाने में मदद करता है.

जगह की खास जानकारी को कॉन्फ़िगर करने वाला टूल

कॉन्फ़िगरेशन टूल का इस्तेमाल करके, जगह की जानकारी देने वाले कस्टम कॉम्पोनेंट के लिए एम्बेड किया जा सकने वाला कोड बनाएं. इसके बाद, उसे React और Angular जैसे लोकप्रिय फ़्रेमवर्क के साथ या बिना किसी फ़्रेमवर्क के इस्तेमाल करने के लिए एक्सपोर्ट करें.

शुरू करें

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

सबसे अच्छी परफ़ॉर्मेंस के लिए, पैकेज मैनेजर का इस्तेमाल करें और सिर्फ़ उन कॉम्पोनेंट को इंपोर्ट करें जिनकी आपको ज़रूरत है. यह पैकेज एनपीएम पर @googlemaps/extended-component-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 पर उदाहरण पेज देखें.