खास जानकारी
Google Maps Platform वेब (JS, TS), Android, और iOS के लिए उपलब्ध है. और स्थानों, दिशा-निर्देशों, और अन्य जानकारी और दूरियां तय करें. इस गाइड में दिए गए उदाहरण एक प्लैटफ़ॉर्म के लिए लिखे गए हैं, लेकिन दस्तावेज़ों के लिंक दिए जाते हैं, ताकि उन्हें दूसरे प्लैटफ़ॉर्म पर लागू किया जा सके.
क्विक बिल्डर का इस्तेमाल करके Google Cloud Console आपको इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) जो आपके लिए JavaScript कोड जनरेट करता है.
ऑनलाइन शॉपिंग और ऑर्डर करना, हमारी ज़िंदगी का हिस्सा बन गया है. ऑर्डर वाले दिन ही टैक्सी बुक करने या रात का खाना ऑर्डर करने तक, ग्राहक डिलीवरी सेवाओं की बिना किसी रुकावट के चेकआउट की प्रोसेस.
हालांकि, इन सभी आवेदनों में, के लिए पता प्रविष्टि बिलिंग या शिपिंग की जानकारी, चेकआउट प्रोसेस में अड़चन बनी रहती है. काफ़ी मुश्किल होता है. बिना रुकावट चेकआउट का अनुभव और भी ज़रूरी हो जाता है में पढ़ते हैं, जहां छोटी स्क्रीन पर मुश्किल टेक्स्ट डालने पर भी परेशानी हो सकती है. साथ ही, ग्राहक को ग्राहक में बदलने से जुड़ी एक अन्य रुकावट है.
यह विषय, प्रॉडक्ट को लागू करने के दिशा-निर्देश देता है, ताकि आप तेज़ी से काम कर सकें अनुमानित पता डालने की सुविधा के साथ चेकआउट की प्रोसेस.
नीचे दिया गया डायग्राम, चेकआउट की प्रोसेस को लागू करने के लिए शामिल मुख्य एपीआई को दिखाता है (बड़ा करने के लिए क्लिक करें).
![](https://developers.google.cn/static/maps/solutions/images/checkout/checkout_arch_diagram.png?authuser=7&hl=hi)
एपीआई चालू करना
चेकआउट की सुविधा लागू करने के लिए, आपको Google Cloud Console में इन एपीआई को चालू करना होगा:
सेटअप के बारे में ज़्यादा जानकारी के लिए, देखें Google Maps Platform का इस्तेमाल शुरू करना.
तरीके सेक्शन
नीचे कुछ सलाह और कस्टमाइज़ेशन दिए गए हैं, जिन पर हम इस विषय में चर्चा करेंगे.
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है सही के निशान का आइकॉन, आम तौर पर इस्तेमाल किया जाता है.
- अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है स्टार आइकॉन का इस्तेमाल करना ज़रूरी नहीं है. हालांकि, इसे अपनी पसंद के मुताबिक बनाने का सुझाव दिया जाता है समाधान को बेहतर बनाना.
इनपुट फ़ील्ड में ऑटोकंप्लीट की सुविधा जोड़ना | पते का फ़ॉर्म अपने-आप भरने की सुविधा. उपयोगकर्ता को बेहतर बनाने के लिए, 'इस्तेमाल के हिसाब से टाइप करें' सुविधा जोड़ें को इस्तेमाल करने का बेहतरीन अनुभव मिलता है. साथ ही, कम से कम कीस्ट्रोक इस्तेमाल करके पते को ज़्यादा सटीक बनाया जा सकता है. | |
Maps स्टैटिक एपीआई की मदद से विज़ुअल पुष्टि देना | दिए गए पते (जियोकोडिंग) के लिए अक्षांश/देशांतर निर्देशांक ढूंढें, या किसी भौगोलिक स्थान के अक्षांश/देशांतर निर्देशांकों को पता (रिवर्स जियोकोडिंग). | |
चेकआउट की प्रोसेस को और बेहतर बनाने के लिए सलाह | चेकआउट का अनुभव देने के लिए 'ऑटोकंप्लीट' सुविधा की बेहतर सुविधाओं का इस्तेमाल करें और भी बेहतर. |
इनपुट फ़ील्ड में ऑटोकंप्लीट की सुविधा जोड़ी जा रही है
इस उदाहरण में इनका इस्तेमाल किया गया है: Places लाइब्रेरी, Maps JavaScript एपीआई | ये सुविधाएं भी उपलब्ध हैं: Android | iOS |
स्थान ऑटोकंप्लीट आपके आवेदन में पता प्रविष्टि को सरल बना सकता है, जिससे उच्च रूपांतरण दर और बेहतरीन अनुभव दे सकते हैं. ऑटोकंप्लीट की सुविधा से, तुरंत एक फ़ील्ड में एंट्री की सुविधा मिलती है "आगे बढ़ें" के साथ पते का अनुमान लगाने की सुविधा, जिसका इस्तेमाल बिलिंग को अपने-आप भरने के लिए किया जा सकता है या शिपिंग पते का फ़ॉर्म भरें.
अपने ऑनलाइन खरीदारी कार्ट में स्थान ऑटोकंप्लीट शामिल करके, आप ये कर सकते हैं:
- पता डालने से जुड़ी गड़बड़ियां कम करें.
- चेकआउट की प्रोसेस में चरणों की संख्या कम करें.
- मोबाइल या पहने जाने वाले डिवाइसों पर पता डालना आसान बनाएं.
- कीस्ट्रोक और कुल समय में ग्राहक को काफ़ी हद तक कमी ऑर्डर.
जब उपयोगकर्ता ऑटोकंप्लीट एंट्री बॉक्स चुनता है और टाइप करना शुरू करता है, तो पते की एक सूची पूर्वानुमान दिखाई देते हैं:
![](https://developers.google.cn/static/maps/solutions/images/checkout/places_autocomplete_suggest.png?authuser=7&hl=hi)
जब उपयोगकर्ता सुझावों की सूची से कोई पता चुनता है, तो जवाब का इस्तेमाल इन कामों के लिए किया जा सकता है पता सत्यापित करें और स्थान पाएं. इसके बाद, आपका ऐप्लिकेशन सही फ़ील्ड में जानकारी भर सकेगा कृपया अपना ईमेल पता डालें:
![](https://developers.google.cn/static/maps/solutions/images/checkout/autocomplete_form.png?authuser=7&hl=hi)
वीडियो: स्थान के ऑटोकंप्लीट की मदद से, पते के फ़ॉर्म को बेहतर बनाएं:
पते के फ़ॉर्म
वेब
Android
iOS
स्थान ऑटोकंप्लीट के साथ शुरू करना
इसमें शामिल करने के लिए JavaScript कोड की कुछ ही लाइनों की ज़रूरत होती है आपकी साइट.
सबसे आसान तरीका है मैप JavaScript API को शामिल करना. भले ही, नहीं दिखाया जा रहा है) और स्थान लाइब्रेरी (जैसे कि नीचे दिया गया उदाहरण देखें, जो इनीशियलाइज़ेशन फ़ंक्शन को भी एक्ज़ीक्यूट करता है.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>
इसके बाद, उपयोगकर्ता के इनपुट के लिए अपने पेज पर एक टेक्स्ट बॉक्स जोड़ें:
<input id="autocomplete" placeholder="Enter your address"></input>
आखिर में, ऑटोकंप्लीट की सेवा शुरू करें और इसे नाम वाले टेक्स्ट बॉक्स से लिंक करें:
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: { country: ["us", "ca"] },
fields: ["address_components", "geometry"],
types: ["address"],
});
address1Field.focus();
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", fillInAddress);
}
पिछले उदाहरण में, place_changed
इवेंट लिसनर तब ट्रिगर होता है, जब
जब उपयोगकर्ता किसी पते का अनुमान चुनता है और
fillInAddress
फ़ंक्शन चलाया गया.
नीचे दिए गए उदाहरण में दिखाए गए तरीके से, फ़ंक्शन चुना गया जवाब लेता है और
फ़ॉर्म में विज़ुअलाइज़ करने के लिए, पते के कॉम्पोनेंट को एक्सट्रैक्ट करता है.
TypeScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": (document.querySelector("#locality") as HTMLInputElement).value = component.long_name; break; case "administrative_area_level_1": { (document.querySelector("#state") as HTMLInputElement).value = component.short_name; break; } case "country": (document.querySelector("#country") as HTMLInputElement).value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); }
JavaScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": document.querySelector("#locality").value = component.long_name; break; case "administrative_area_level_1": { document.querySelector("#state").value = component.short_name; break; } case "country": document.querySelector("#country").value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); } window.initAutocomplete = initAutocomplete;
जब आपको यह डेटा मिल जाए, तो आप इसका इस्तेमाल अपने उपयोगकर्ता के लिए मेल खाने वाले पते के रूप में कर सकते हैं. कुछ से कोड की लाइनों का इस्तेमाल करके, आप यह पक्का कर सकते हैं कि ग्राहक ने कम समय में सही पता डाला है या नहीं समय.
इसमें पता प्रविष्टि फ़ॉर्म को भरने के लिए एक चालू डेमो और पूरा सोर्स कोड देखें कोड नमूना.
स्थान ऑटोकंप्लीट लागू करते समय ध्यान रखने वाली बातें
ऑटोकंप्लीट की सुविधा में ऐसे कई विकल्प मौजूद हैं जिनकी मदद से, इसे अपने हिसाब से बनाया जा सकता है लागू करें. एक से ज़्यादा विकल्प इस्तेमाल करने के लिए, सेवाओं का इस्तेमाल कर सकें, ताकि आपको जगह के हिसाब से सही जानकारी मिल सके.
-
पता फ़ॉर्म के लिए,
types
पैरामीटर कोaddress
से सेट करें मिलान को पूरे मोहल्ले के पतों तक सीमित करें. इसके बारे में ज़्यादा जानें समर्थित प्रकार अपने-आप पूरा होने वाले अनुरोधों को शामिल करें. -
सही पाबंदियां सेट करना
और पक्षपात भी शामिल हैं. ऐसे कई पैरामीटर होते हैं जो
पूर्वाग्रह या किसी मिलान को सिर्फ़ खास इलाकों तक सीमित करने के लिए इस्तेमाल किए जाते हों.
-
किसी क्षेत्र तक सीमित करने के लिए आयताकार सीमाएं सेट करने के लिए
bounds
का इस्तेमाल करेंstrictBounds
. इससे यह पक्का किया जा सकेगा कि सिर्फ़ इन इलाकों के पते ही लौटाए जा रहे हैं. -
जवाबों के कुछ सेट को सीमित करने के लिए,
componentRestrictions
का इस्तेमाल करें देशों.
-
किसी क्षेत्र तक सीमित करने के लिए आयताकार सीमाएं सेट करने के लिए
- अगर मैच करने से कुछ फ़ील्ड छूट जाते हैं, तो फ़ील्ड में बदलाव किया जा सकता है और ग्राहकों को अनुमति दें अगर ज़रूरी हो, तो पता अपडेट करें. चूंकि ज़्यादातर पते स् थान ऑटोकंप्लीट के ज़रिए लौटाए गए हैं सब-प्रिमाइस नंबर शामिल नहीं हैं, जैसे कि अपार्टमेंट, सुइट, या यूनिट नंबर. उदाहरण के लिए, फ़ोकस को पता पंक्ति 2 पर ले जाया जाता है, ताकि उपयोगकर्ता उसे भरने के लिए प्रोत्साहित कर सके जानकारी दें.
Maps State API की मदद से विज़ुअल की पुष्टि करें
पता डालने के बाद, उपयोगकर्ता को एक सामान्य स्थिर मैप के साथ डिलीवरी या पिकअप का स्थान. इससे ग्राहक को आपको अतिरिक्त आश्वासन देता है कि पता सही है. इससे डिलीवरी/पिकअप की गड़बड़ियां कम हो जाएंगी. स्थिर मैप दिखाया जा सकता है या पुष्टि ईमेल में भेजते हैं, जहां वे पता दर्ज करते हैं या लेन-देन पूरा कर लिया हो.
इन दोनों इस्तेमाल के उदाहरणों को Maps का स्टैटिक एपीआई, जो किसी पेज या ईमेल में किसी भी इमेज टैग में मैप का इमेज वर्शन जोड़ देता है.
![](https://developers.google.cn/static/maps/solutions/images/checkout/track_package.png?authuser=7&hl=hi)
Mapsstatic API का इस्तेमाल शुरू करना
आप वेब सेवा कॉल का उपयोग करके Maps स्थिर API का उपयोग कर सकते हैं, जो आपके तय पैरामीटर के आधार पर मैप का इमेज वर्शन. डाइनैमिक मैप की तरह, आपको , मैप का टाइप तय कर सकता है, क्लाउड-आधारित एक जैसी स्टाइल का इस्तेमाल कर सकता है, और पहचान करने में मदद मिलती है.
नीचे दिया गया कॉल, Googleplex पर 600x300px के साइज़ वाला एक रोडमैप दिखाता है में ज़ूम लेवल 13 पर स्थित है. यह डिलीवरी की नीले रंग की जगह के बारे में भी बताता है मार्कर और एक ऑनलाइन मैप स्टाइल.
https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
&zoom=13
&size=600x300
&maptype=roadmap
&markers=color:blue%7Clabel:S%7C37.422177,-122.084082
&map_id=8f348d1b5a61d4bb
&key=YOUR_API_KEY
&solution_channel=GMP_guides_checkout_v1_a
इसकी जानकारी इन सेक्शन में मिलेगी:
एपीआई का यूआरएल | https://maps.googleapis.com/maps/api/staticmap? |
मैप सेंटर | Center=37.422177,-122.084082 |
ज़ूम लेवल | ज़ूम करें=13 |
इमेज का साइज़ | साइज़=600x300 |
मैप का टाइप | maptype=roadmap |
स्टोर की जगह के मार्कर | markers=color:blue%7Clabel:C%7C37.422177,-122.084082 |
क्लाउड मैप स्टाइल | map_id=8f348d1b5a61d4bb |
एपीआई पासकोड | कुंजी=YOUR_API_KEY |
समाधान चैनल पैरामीटर (देखें पैरामीटर दस्तावेज़) | solution_channel=GMP_guides_checkout_v1_a |
यह नीचे दिखाए गए तरीके से इमेज बन जाता है:
![](https://developers.google.cn/static/maps/solutions/images/checkout/static_map.png?authuser=7&hl=hi)
Maps स्टैटिक एपीआई के विकल्पों के बारे में ज़्यादा जानने के लिए, दस्तावेज़.
चेकआउट की प्रोसेस को और बेहतर बनाने के लिए सलाह
इनमें से कुछ ऐडवांस सेटिंग का इस्तेमाल करके, ग्राहक के अनुभव को और बेहतर बनाया जा सकता है ऐसी सुविधाएं जो स्थान ऑटोकंप्लीट की सुविधा देनी चाहिए. आपकी साइट को बेहतर बनाने के लिए यहां कुछ सलाह दी गई हैं ऑटोकंप्लीट पता एंट्री बॉक्स:
-
जगह की जानकारी.
पते और संस्थान नाम दोनों डालने की अनुमति देने के लिए,
ऑटोकंप्लीट परिभाषा से मिली
types
प्रॉपर्टी.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
उपयोगकर्ताओं को किसी कारोबार या लोकप्रिय जगह के नाम के आधार पर पता डालने की अनुमति दें.
"आगे टाइप करें" सुझाव सेवा न सिर्फ़ पतों के लिए काम करती है, बल्कि
अपने कारोबार या लैंडमार्क के नाम डालने की अनुमति दें. जब कोई उपयोगकर्ता कारोबार का नाम डालता है, तो
इस पर कॉल करके पता आसानी से वापस पाया जा सकता है
- पढ़ें दस्तावेज़ में दिया गया है. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है मेल खाने के लिए स्थान ऑटोकंप्लीट बॉक्स के लुक और स्टाइल को पसंद के मुताबिक बनाएं आपकी वेबसाइट का स्टाइल कैसा है. आप ऑटोकंप्लीट विजेट को स्टाइल भी कर सकते हैं, ताकि वह आपके शॉपिंग कार्ट के लुक और स्टाइल से मैच करे. सीएसएस क्लास का एक सेट, अपनी पसंद के मुताबिक बनाया जा सकता है. ज़्यादा जानकारी पाने के लिए, अपने ऑटोकंप्लीट बॉक्स को स्टाइल दें,
- JavaScript, Android, और iOS साथ ही, वेब सर्विस एपीआई को Places API. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है अगर आपको पसंद के मुताबिक यूज़र इंटरफ़ेस (यूआई) बनाना है. Google के डिज़ाइन किए गए यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करने के बजाय एक कस्टम यूज़र इंटरफ़ेस (यूआई) बनाना, किसी दिए गए इनपुट के लिए अनुमान पाने के लिए, अपने-आप पूरा होने वाली सेवा को प्रोग्राम के हिसाब से सेट करें. आप यहां प्रोग्राम के हिसाब से, जगह की जानकारी के अपने-आप पूरे होने वाले सुझावों को प्रोग्राम की मदद से वापस पा सकते हैं