जगह के बारे में ऑटोकंप्लीट करने की सुविधा वाला विजेट एक टेक्स्ट इनपुट फ़ील्ड बनाता है, यूज़र इंटरफ़ेस (यूआई) की सूची में सुझाव देता है, और आइटम दिखाता है उपयोगकर्ता के चुने हुए विकल्प के जवाब में जानकारी. पूरी जानकारी को एम्बेड करने के लिए, प्लेस ऑटोकंप्लीट विजेट का इस्तेमाल करें अपने-आप पूरी जानकारी देने वाला ऑटोकंप्लीट यूज़र इंटरफ़ेस.
ज़रूरी शर्तें
स्थान ऑटोकंप्लीट (झलक) का उपयोग करने के लिए, आपको "Locations API" सक्षम करना होगा अपने Google Cloud पर
प्रोजेक्ट करें और अपने बूटस्ट्रैप लोडर में बीटा चैनल (v: "beta"
) बताएं. यहां जाएं:
ज़्यादा जानकारी के लिए, शुरू करें.
नया क्या है
स्थान ऑटोकंप्लीट (झलक) को नीचे दिए गए तरीकों से बेहतर बनाया गया है:
- ऑटोकंप्लीट विजेट का यूज़र इंटरफ़ेस, टेक्स्ट इनपुट प्लेसहोल्डर, अनुमानों की सूची का लोगो, और जगह के लिए सुझाव.
- बेहतर सुलभता, जिसमें स्क्रीन रीडर और कीबोर्ड इंटरैक्शन के लिए सहायता शामिल है.
- ऑटोकंप्लीट विजेट, नई जगह की क्लास दिखाता है ताकि लौटाए गए ऑब्जेक्ट को आसानी से हैंडल किया जा सके.
- मोबाइल डिवाइसों और छोटी स्क्रीन पर बेहतर तरीके से काम करता है.
- इसकी परफ़ॉर्मेंस बेहतर होती है और यह ग्राफ़िक के तौर पर बेहतर दिखता है.
अपने-आप पूरा होने वाला विजेट जोड़ें
किसी वेब पेज या Google Maps पर, ऑटोकंप्लीट की सुविधा वाला विजेट जोड़ा जा सकता है. ऑटोकंप्लीट विजेट की मदद से,
टेक्स्ट इनपुट फ़ील्ड, यूज़र इंटरफ़ेस (यूआई) की पिक लिस्ट में सुझाव देता है, और नतीजे में दिखाई गई जगह की जानकारी दिखाता है
gmp-placeselect
लिसनर के ज़रिए क्लिक करने पर, उपयोगकर्ता का जवाब. इस सेक्शन में, आपको
किसी वेब पेज या Google मैप में ऑटोकंप्लीट विजेट कैसे जोड़ें.
किसी वेब पेज में ऑटोकंप्लीट विजेट जोड़ना
किसी वेब पेज में ऑटोकंप्लीट की सुविधा वाला विजेट जोड़ने के लिए, नया google.maps.places.PlaceAutocompleteElement
बनाएं और उसे
जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:
TypeScript
// Request needed libraries. //@ts-ignore await google.maps.importLibrary("places") as google.maps.PlacesLibrary; // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete);अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
// Request needed libraries. //@ts-ignore await google.maps.importLibrary("places"); // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete);
उदाहरण के तौर पर दिया गया पूरा कोड देखें
मैप में ऑटोकंप्लीट की सुविधा देने वाला विजेट जोड़ना
मैप में ऑटोकंप्लीट की सुविधा वाला विजेट जोड़ने के लिए, नया google.maps.places.PlaceAutocompleteElement
इंस्टेंस बनाएं. इसके बाद,
PlaceAutocompleteElement
को div
के लिए सेट करें और कस्टम के रूप में उसे मैप पर पुश करें
जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:
TypeScript
//@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = 'place-autocomplete-input'; const card = document.getElementById('place-autocomplete-card') as HTMLElement; //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
//@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = "place-autocomplete-input"; const card = document.getElementById("place-autocomplete-card"); //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
उदाहरण के तौर पर दिया गया पूरा कोड देखें
ऑटोकंप्लीट सुविधा की मदद से मिलने वाले सुझावों को रोकें
डिफ़ॉल्ट रूप से, ऑटोकंप्लीट की सुविधा सभी तरह की जगहों को दिखाती है. साथ ही, इसमें उपयोगकर्ता की जगहों के अनुमान के लिए पूर्वाग्रह होता है जगह की जानकारी शामिल करता है और उपयोगकर्ता की चुनी गई जगह के लिए उपलब्ध सभी डेटा फ़ील्ड फ़ेच करता है. जगह सेट करें नतीजों को सीमित या एक मापदंड से बाहर करके, ज़्यादा काम के अनुमान दिखाने के लिए ऑटोकंप्लीट की सुविधा.
परिणामों को प्रतिबंधित करने से ऑटोकंप्लीट विजेट ऐसे किसी भी परिणाम को अनदेखा कर देता है जो पाबंदी वाला हिस्सा शामिल करें. एक सामान्य तरीका, नतीजों को मैप की सीमाओं तक सीमित करना है. भेदभाव के नतीजे अपने-आप पूरा होने वाला विजेट, तय किए गए इलाके में नतीजे दिखाता है. हालांकि, कुछ मिलान बाहर रखा जाता है.
देश के अनुसार स्थान खोज प्रतिबंधित करें
स्थान खोज को एक या ज़्यादा विशिष्ट देशों तक सीमित करने के लिए, componentRestrictions
का उपयोग करें
प्रॉपर्टी का इस्तेमाल करें, जैसा कि नीचे दिए गए स्निपेट में दिखाया गया है:
const pac = new google.maps.places.PlaceAutocompleteElement({ componentRestrictions: {country: ['us', 'au']}, });
स्थान खोज को मैप की सीमाओं तक सीमित करें
किसी जगह की खोज को मैप की सीमाओं तक सीमित करने के लिए, locationRestrictions
का इस्तेमाल करें
प्रॉपर्टी में सीमाएं जोड़ें, जैसा कि नीचे दिए गए स्निपेट में दिखाया गया है:
const pac = new google.maps.places.PlaceAutocompleteElement({ locationRestriction: map.getBounds(), });
सीमाओं को सीमित करते समय, सीमाओं को बदलने पर उन्हें अपडेट करने के लिए, एक लिसनर जोड़ना न भूलें:
map.addListener('bounds_changed', () => { autocomplete.locationRestriction = map.getBounds(); });
locationRestriction
को हटाने के लिए, इसे null
पर सेट करें.
पूर्वाग्रह स्थान खोज परिणाम
पूर्वाग्रह खोज नतीजों को किसी मंडली क्षेत्र में रखने के लिए locationBias
प्रॉपर्टी का इस्तेमाल करता है और
दायरा पार करना, जैसा कि यहां दिखाया गया है:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}}, });
locationBias
को हटाने के लिए, इसे null
पर सेट करें.
स्थान खोज परिणामों को निश्चित प्रकारों तक सीमित करें
types
का उपयोग करके स्थान खोज परिणामों को कुछ खास प्रकार के स्थानों तक सीमित करें
प्रॉपर्टी में टाइप कर सकते हैं और एक या उससे ज़्यादा टाइप तय कर सकते हैं, जैसा कि यहां दिखाया गया है:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({ types: ['establishment'], });
काम करने वाले टाइप की पूरी सूची देखने के लिए, टेबल 3: अपने-आप पूरे होने वाले अनुरोधों के साथ काम करने वाले टाइप देखें.
स्थान विवरण पाएं
चुनी गई जगह की जानकारी पाने के लिए, gmp-place-select
को लिसनर जोड़ें
PlaceAutocompleteElement
, जैसा कि इस उदाहरण में दिखाया गया है:
TypeScript
// Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2); });अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
// Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); selectedPlaceTitle.textContent = "Selected Place:"; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2, ); });
उदाहरण के तौर पर दिया गया पूरा कोड देखें
पिछले उदाहरण में, इवेंट लिसनर जगह की क्लास का ऑब्जेक्ट दिखाता है.
जगह की जानकारी के डेटा फ़ील्ड पाने के लिए, place.fetchFields()
पर कॉल करें
आपके आवेदन के लिए ज़रूरी है.
अगले उदाहरण में, लिसनर किसी जगह की जानकारी का अनुरोध करता है और उसे मैप पर दिखाता है.
TypeScript
// Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' + '<span id="place-address">' + place.formattedAddress + '</span>' + '</div>'; updateInfoWindow(content, place.location); marker.position = place.location; });अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
// Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + "</span><br />" + '<span id="place-address">' + place.formattedAddress + "</span>" + "</div>"; updateInfoWindow(content, place.location); marker.position = place.location; });
उदाहरण के तौर पर दिया गया पूरा कोड देखें
चुनी गई जगह के लिए जियोकोडिंग परिणाम पाएं
चुनी गई जगह के जियोकोडिंग परिणाम पाने के लिए google.maps.Geocoder
का इस्तेमाल करें.
स्थान, जैसा कि निम्न स्निपेट में दिखाया गया है:
const map = new google.maps.Map(document.getElementById('map'), { center: {lat: 50.064192, lng: -130.605469}, zoom: 3, }); const marker = new google.maps.Marker({map}); const autocomplete = new google.maps.places.PlaceAutocompleteElement(); const geocoder = new google.maps.Geocoder(); autocomplete.addListener('gmp-placeselect', async ({prediction: place}) => { const results = await geocoder.geocode({place.id}); marker.setPlace({ placeId: place.id, location: results[0].geometry.location, }); });
उदाहरण मैप
इस अनुभाग में इस पृष्ठ पर फ़ीचर किए गए मानचित्रों का पूरा कोड शामिल है.
ऑटोकंप्लीट एलिमेंट
यह उदाहरण एक वेब पेज में एक ऑटोकंप्लीट विजेट जोड़ता है और हर एक पेज के लिए नतीजे दिखाता है चयनित स्थान.
TypeScript
async function initMap(): Promise<void> { // Request needed libraries. //@ts-ignore await google.maps.importLibrary("places") as google.maps.PlacesLibrary; // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete); // Inject HTML UI. const selectedPlaceTitle = document.createElement('p'); selectedPlaceTitle.textContent = ''; document.body.appendChild(selectedPlaceTitle); const selectedPlaceInfo = document.createElement('pre'); selectedPlaceInfo.textContent = ''; document.body.appendChild(selectedPlaceInfo); // Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); selectedPlaceTitle.textContent = 'Selected Place:'; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2); }); } initMap();अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
async function initMap() { // Request needed libraries. //@ts-ignore await google.maps.importLibrary("places"); // Create the input HTML element, and append it. //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore document.body.appendChild(placeAutocomplete); // Inject HTML UI. const selectedPlaceTitle = document.createElement("p"); selectedPlaceTitle.textContent = ""; document.body.appendChild(selectedPlaceTitle); const selectedPlaceInfo = document.createElement("pre"); selectedPlaceInfo.textContent = ""; document.body.appendChild(selectedPlaceInfo); // Add the gmp-placeselect listener, and display the results. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); selectedPlaceTitle.textContent = "Selected Place:"; selectedPlaceInfo.textContent = JSON.stringify( place.toJSON(), /* replacer */ null, /* space */ 2, ); }); } initMap();अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सीएसएस
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } p { font-family: Roboto, sans-serif; font-weight: bold; }
एचटीएमएल
<html> <head> <title>Place Autocomplete element</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <p style="font-family: roboto, sans-serif">Search for a place here:</p> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </html>
सैंपल आज़माएं
ऑटोकंप्लीट मैप
इस उदाहरण में, Google Maps में ऑटोकंप्लीट की सुविधा वाला विजेट जोड़ने का तरीका बताया गया है.
TypeScript
let map: google.maps.Map; let marker: google.maps.marker.AdvancedMarkerElement; let infoWindow: google.maps.InfoWindow; async function initMap(): Promise<void> { // Request needed libraries. //@ts-ignore const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary("marker"), google.maps.importLibrary("places") ]); // Initialize the map. map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: { lat: 40.749933, lng: -73.98633 }, zoom: 13, mapId: '4504f8b37365c3d0', mapTypeControl: false, }); //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = 'place-autocomplete-input'; const card = document.getElementById('place-autocomplete-card') as HTMLElement; //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card); // Create the marker and infowindow marker = new google.maps.marker.AdvancedMarkerElement({ map, }); infoWindow = new google.maps.InfoWindow({}); // Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => { await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' + '<span id="place-address">' + place.formattedAddress + '</span>' + '</div>'; updateInfoWindow(content, place.location); marker.position = place.location; }); } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, anchor: marker, shouldFocus: false, }); } initMap();अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
let map; let marker; let infoWindow; async function initMap() { // Request needed libraries. //@ts-ignore const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ google.maps.importLibrary("marker"), google.maps.importLibrary("places"), ]); // Initialize the map. map = new google.maps.Map(document.getElementById("map"), { center: { lat: 40.749933, lng: -73.98633 }, zoom: 13, mapId: "4504f8b37365c3d0", mapTypeControl: false, }); //@ts-ignore const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(); //@ts-ignore placeAutocomplete.id = "place-autocomplete-input"; const card = document.getElementById("place-autocomplete-card"); //@ts-ignore card.appendChild(placeAutocomplete); map.controls[google.maps.ControlPosition.TOP_LEFT].push(card); // Create the marker and infowindow marker = new google.maps.marker.AdvancedMarkerElement({ map, }); infoWindow = new google.maps.InfoWindow({}); // Add the gmp-placeselect listener, and display the results on the map. //@ts-ignore placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); // If the place has a geometry, then present it on a map. if (place.viewport) { map.fitBounds(place.viewport); } else { map.setCenter(place.location); map.setZoom(17); } let content = '<div id="infowindow-content">' + '<span id="place-displayname" class="title">' + place.displayName + "</span><br />" + '<span id="place-address">' + place.formattedAddress + "</span>" + "</div>"; updateInfoWindow(content, place.location); marker.position = place.location; }); } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, anchor: marker, shouldFocus: false, }); } initMap();अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सीएसएस
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #place-autocomplete-card { background-color: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 10px; padding: 5px; font-family: Roboto, sans-serif; font-size: large; font-weight: bold; } gmp-place-autocomplete { width: 300px; } #infowindow-content .title { font-weight: bold; } #map #infowindow-content { display: inline; }
एचटीएमएल
<html> <head> <title>Place Autocomplete map</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div class="place-autocomplete-card" id="place-autocomplete-card"> <p>Search for a place here:</p> </div> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script> </body> </html>
सैंपल आज़माएं
प्लेस पिकर कॉम्पोनेंट का इस्तेमाल करना
ध्यान दें: यह सैंपल ओपन सोर्स लाइब्रेरी का इस्तेमाल करता है. ज़्यादा जानकारी के लिए, मदद के लिए README के सुझाव भी देते हैं.
प्लेस पिकर कॉम्पोनेंट एक टेक्स्ट इनपुट होता है. इसकी मदद से असली उपयोगकर्ता, पता या स्थान. यह एक्सटेंडेड कॉम्पोनेंट लाइब्रेरी का हिस्सा है. यह वेब कॉम्पोनेंट का एक सेट है. इससे डेवलपर को बेहतर मैप और जगह की जानकारी की सुविधाएं तेज़ी से बनाने में मदद मिलती है.
स्थान पिकर कॉन्फ़िगरेशनकर्ता
कॉन्फ़िगरेशन टूल का इस्तेमाल करके, कस्टम प्लेस पिकर कॉम्पोनेंट के लिए, एम्बेड किया जा सकने वाला कोड बनाएं. इसके बाद, इसे एक्सपोर्ट करें इसे React और Angular जैसे लोकप्रिय फ़्रेमवर्क के साथ या बिना किसी फ़्रेमवर्क के इस्तेमाल किया जाना चाहिए.
शुरू करें
शुरू करने के लिए, एक्सटेंडेट कॉम्पोनेंट लाइब्रेरी को एनपीएम से लोड करें.
सबसे अच्छी परफ़ॉर्मेंस के लिए, पैकेज मैनेजर का इस्तेमाल करें और सिर्फ़ उन कॉम्पोनेंट को इंपोर्ट करें जिनकी आपको ज़रूरत है. यह पैकेज npm पर के रूप में सूचीबद्ध है @googlemaps/extended-component-library. इसे इससे इंस्टॉल करें:
npm i @googlemaps/extended-component-library;
इसके बाद, अपने ऐप्लिकेशन में इस्तेमाल किए जाने वाले कॉम्पोनेंट इंपोर्ट करें.
import '@googlemaps/extended-component-library/place_picker.js';
एनपीएम लाइब्रेरी लोड करने के बाद, Cloud Console से एपीआई पासकोड पाएं.
<gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placepicker_v1"></gmpx-api-loader>
प्लेस पिकर कॉम्पोनेंट टैग का इस्तेमाल करें.
<gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%"> </gmpx-place-picker>
ज़्यादा जानकारी के लिए, GitHub या npm. सैंपल कोड में इस्तेमाल किए गए कॉम्पोनेंट देखने के लिए, ज़्यादा जानकारी के लिए GitHub पर उदाहरण पेज है.