जगह की जानकारी अपने-आप पूरा होने वाला विजेट एक टेक्स्ट इनपुट फ़ील्ड बनाता है और यूज़र इंटरफ़ेस (यूआई) चुनने की सूची में जगह के अनुमान दिखाता है. साथ ही, उपयोगकर्ता के चुने गए विकल्प के हिसाब से जगह की जानकारी देता है. अपने वेब पेज पर, अपने-आप पूरा होने वाला पूरा यूज़र इंटरफ़ेस एम्बेड करने के लिए, 'जगह की जानकारी अपने-आप पूरा होने की सुविधा' विजेट का इस्तेमाल करें.
ज़रूरी शर्तें
'जगह की जानकारी अपने-आप पूरी होने की सुविधा' (झलक देखें) का इस्तेमाल करने के लिए, आपको अपने Google Cloud प्रोजेक्ट में "Locations API" चालू करना होगा. साथ ही, अपने बूटस्ट्रैप लोडर में बीटा चैनल (v: "beta"
) की जानकारी देनी होगी. ज़्यादा जानकारी के लिए,
शुरू करें देखें.
नया क्या है
स्थान ऑटोकंप्लीट (झलक) में नीचे दिए गए तरीकों से सुधार किए गए हैं:
- टेक्स्ट इनपुट प्लेसहोल्डर, सुझावों की सूची के लोगो, और जगह के सुझावों के लिए, ऑटोकंप्लीट विजेट के यूज़र इंटरफ़ेस (यूआई) में, रीजनल लोकलाइज़ेशन (इसमें आरटीएल भाषाओं के साथ-साथ अन्य भाषाएं भी शामिल हैं) की सुविधा काम करती है.
- बेहतर सुलभता. इसमें स्क्रीन रीडर और कीबोर्ड इंटरैक्शन से जुड़ी सहायता भी शामिल है.
- अपने-आप पूरा होने वाला विजेट, वापस किए गए ऑब्जेक्ट को आसानी से मैनेज करने के लिए, नई प्लेस क्लास दिखाता है.
- मोबाइल डिवाइसों और छोटी स्क्रीन के लिए बेहतर सहायता.
- बेहतर प्रदर्शन और बेहतर ग्राफ़िकल लुक.
ऑटोकंप्लीट विजेट जोड़ना
किसी वेब पेज या Google मैप पर, ऑटोकंप्लीट विजेट जोड़ा जा सकता है. ऑटोकंप्लीट विजेट एक टेक्स्ट इनपुट फ़ील्ड बनाता है और यूज़र इंटरफ़ेस (यूआई) चुनने की सूची में अनुमानों को शामिल करता है. साथ ही, gmp-placeselect
लिसनर के ज़रिए उपयोगकर्ता के क्लिक करने पर जगह की जानकारी दिखाता है. इस सेक्शन में, किसी वेब पेज या Google Maps में अपने-आप पूरा होने वाला विजेट जोड़ने का तरीका बताया गया है.
किसी वेब पेज में ऑटोकंप्लीट विजेट जोड़ना
किसी वेब पेज में अपने-आप पूरा होने वाला विजेट जोड़ने के लिए, एक नया google.maps.places.PlaceAutocompleteElement
बनाएं और उसे पेज में जोड़ें, जैसा कि यहां दिए गए उदाहरण में दिखाया गया है:
TypeScript
// Request needed libraries. //@ts-ignore const [{ Map }] = await Promise.all([ 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);
JavaScript
// Request needed libraries. //@ts-ignore const [{ Map }] = await Promise.all([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: जगह पर अपने-आप पूरा होने वाले अनुरोध के लिए इस्तेमाल किए जा सकने वाले टाइप देखें.
स्थान विवरण पाएं
चुनी गई जगह की जगह की जानकारी पाने के लिए, PlaceAutocompleteElement
में gmp-place-select
लिसनर जोड़ें, जैसा कि इस उदाहरण में दिखाया गया है:
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 const [{ Map }] = await Promise.all([ 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();
JavaScript
async function initMap() { // Request needed libraries. //@ts-ignore const [{ Map }] = await Promise.all([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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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-comp-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 पर उदाहरण पेज पर जाएं.