ऑब्जेक्ट प्लेसमेंट करें
The Place ऑब्जेक्ट, जिसमें किसी जगह के बारे में जानकारी होती है, को टेक्स्ट से खोजने, आस-पास खोजने, और जगह के नाम का अपने-आप पूरा होने की सुविधा की मदद से डाइनैमिक तरीके से वापस किया जाता है. आपके पास, जगह के आईडी या संसाधन के नाम से भी Place
ऑब्जेक्ट बनाने का विकल्प होता है. संसाधन का नाम, जगह का आईडी होता है, जिसके पहले
places/ जोड़ा जाता है. यहां दिया गया स्निपेट, Place ऑब्जेक्ट बनाने का तरीका दिखाता है, जिसमें
जगह के आईडी का इस्तेमाल किया गया है:
// Use a place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo });
आपके पास, जगह के संसाधन के नाम से भी Place ऑब्जेक्ट बनाने का विकल्प होता है:
// Use a place resource name to create a new Place instance. const place = new Place({ resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo });
ज़्यादा जानकारी के लिए, PlaceOptions देखें.
फ़ील्ड फ़ेच करें
अगर आपके पास कोई मौजूदा Place ऑब्जेक्ट है या जगह का आईडी या संसाधन का नाम है, तो उस जगह के बारे में जानकारी पाने के लिए, Place.fetchFields() तरीके का इस्तेमाल करें. वापस पाने के लिए, जगह के डेटा फ़ील्ड की कॉमा-सेपरेटेड
लिस्ट दें. साथ ही, फ़ील्ड के नाम कैमल केस में तय करें. अनुरोध किए गए फ़ील्ड का डेटा पाने के लिए, वापस किए गए Place ऑब्जेक्ट का इस्तेमाल करें.
यहां दिए गए उदाहरण में, जगह के आईडी का इस्तेमाल करके नया Place बनाया गया है. इसके बाद, Place.fetchFields()
का अनुरोध करने के लिए, displayName और formattedAddress फ़ील्ड को कॉल किया गया है. साथ ही, मैप में
मार्कर जोड़ा गया है.
TypeScript
async function getPlaceDetails() { const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary('places'), google.maps.importLibrary('marker'), ]); // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'googleMapsURI', ], }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map: innerMap, position: place.location, title: place.displayName, }); // Assemble the info window content. const content = document.createElement('div'); const address = document.createElement('div'); const placeId = document.createElement('div'); address.textContent = place.formattedAddress || ''; placeId.textContent = place.id; content.append(placeId, address); if (place.googleMapsURI) { const link = document.createElement('a'); link.href = place.googleMapsURI; link.target = '_blank'; link.textContent = 'View Details on Google Maps'; content.appendChild(link); } // Display an info window. infoWindow.setHeaderContent(place.displayName); infoWindow.setContent(content); infoWindow.open({ anchor: marker, }); }
JavaScript
async function getPlaceDetails() { const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary('places'), google.maps.importLibrary('marker'), ]); // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: [ 'displayName', 'formattedAddress', 'location', 'googleMapsURI', ], }); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map: innerMap, position: place.location, title: place.displayName, }); // Assemble the info window content. const content = document.createElement('div'); const address = document.createElement('div'); const placeId = document.createElement('div'); address.textContent = place.formattedAddress || ''; placeId.textContent = place.id; content.append(placeId, address); if (place.googleMapsURI) { const link = document.createElement('a'); link.href = place.googleMapsURI; link.target = '_blank'; link.textContent = 'View Details on Google Maps'; content.appendChild(link); } // Display an info window. infoWindow.setHeaderContent(place.displayName); infoWindow.setContent(content); infoWindow.open({ anchor: marker, }); }
Map और Place के बारे में बताया गया है:
const { Map } = await google.maps.importLibrary("maps"); const { Place } = await google.maps.importLibrary("places");