क्विक और वेरिफ़ाइड साइन अप लागू करने की गाइड

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

खास जानकारी

वेब iOS एपीआई

Google Maps Platform, वेब (JS, TS), Android, और iOS के लिए उपलब्ध है. साथ ही, यह जगह, निर्देश, और दूरी की जानकारी पाने के लिए वेब सेवाओं के एपीआई भी ऑफ़र करता है. इस गाइड में दिए गए नमूने एक प्लैटफ़ॉर्म के लिए लिखे गए हैं, लेकिन दूसरे प्लैटफ़ॉर्म पर लागू करने के लिए दस्तावेज़ के लिंक दिए गए हैं.

इसे अभी बनाएं!

Google Cloud Console में क्विक बिल्डर, आपके लिए JavaScript कोड जनरेट करने वाले इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करके, पता फ़ॉर्म को अपने-आप पूरा करने की सुविधा देता है.

उपयोगकर्ता ऐसी डिजिटल दुनिया में रहते हैं और ऑपरेट करते हैं जो इंटरनेट के इस्तेमाल को लेकर ज़रूरी है. यह इस बात पर निर्भर करता है कि सुविधा, स्पीड, और सुरक्षा बेसलाइन ही क्यों हैं. जब वे क्रेडिट कार्ड, बैंक खाते या क़र्ज़ जैसी किसी चीज़ के लिए आवेदन करते हैं, तो वे उम्मीद करते हैं कि यह प्रक्रिया तेज़ और आसान हो जाएगी.

जितने ज़्यादा उपयोगकर्ताओं को डुप्लीकेट डेटा टाइप करना या डालना होगा, आपके पास उन्हें ग्राहकों के तौर पर बनाए रखने की संभावना उतनी ही कम होगी. तेज़ और आसान साइन अप अनुभव बनाने से, उपयोगकर्ता को बेहतर अनुभव मिलेगा. साथ ही, आपको उपयोगकर्ताओं को अपनी साइट पर बनाए रखने में मदद मिलेगी.

मैन्युअल रूप से डाले गए पतों की वजह से कन्वर्ज़न कम हो सकते हैं, गलत सीआरएम डेटा मिल सकता है, और डिलीवरी में काफ़ी गलतियां हो सकती हैं. फटाफट और पुष्टि किए गए साइन अप से, साइन अप करने की प्रोसेस ज़्यादा तेज़ हो जाती है. साथ ही, बस कुछ टैप करके, आस-पास के पतों का सुझाव दे पाता है और विज़ुअल पुष्टि के लिए इनपुट का पता दिखा देता है. इससे उपयोगकर्ता को यह भरोसा होता है कि उसने सही पता डाला है. उपयोगकर्ता की मौजूदा जगह की जानकारी की पुष्टि करके, उपयोगकर्ता के पते की पुष्टि की जा सकती है. साथ ही, धोखाधड़ी से बचा जा सकता है और आपके प्रॉडक्ट और सेवाओं पर उपयोगकर्ताओं का भरोसा बढ़ता है. पुष्टि करने से, वर्चुअल बैंक और क्रेडिट कार्ड तुरंत उपलब्ध कराने में भी आपका विश्वास बढ़ता है.

इस विषय में, Google Maps Platform के साथ क्विक और वेरिफ़ाइड साइन-अप एक्सपीरियंस बनाने के लिए दिशा-निर्देश दिए गए हैं. उपयोगकर्ता अक्सर मोबाइल डिवाइसों पर साइन अप करते हैं, इसलिए इस विषय को लागू करने से जुड़े ज़्यादातर उदाहरण, Android पर फ़ोकस करते हैं. (यहां सैंपल का पूरा स्रोत देखा जा सकता है). इसी तरह के काम करने के लिए, आप iOS SDK टूल का भी इस्तेमाल कर सकते हैं.

नीचे दिया गया डायग्राम, समाधान बनाने में शामिल मुख्य एपीआई दिखाता है (बड़ा करने के लिए क्लिक करें).

एपीआई चालू किए जा रहे हैं

इन सुझावों को लागू करने के लिए, आपको Google Cloud Console में इन एपीआई को चालू करना होगा:

सेट अप के बारे में ज़्यादा जानने के लिए, Google Maps Platform का इस्तेमाल शुरू करना देखें.

सबसे सही तरीके वाले सेक्शन

हम इस विषय में नीचे दी गई प्रैक्टिस और कस्टमाइज़ेशन के बारे में बताएंगे.

  • चेक मार्क आइकॉन सबसे सही तरीका है.
  • समाधान को बेहतर बनाने के लिए, स्टार का आइकॉन दिया जाना ज़रूरी नहीं है. हालांकि, इसे पसंद के मुताबिक बनाने का सुझाव दिया जाता है.
इनपुट फ़ील्ड में ऑटोकंप्लीट जोड़ना पते का फ़ॉर्म ऑटोमैटिक भरना. सभी प्लैटफ़ॉर्म पर, उपयोगकर्ता अनुभव को बेहतर बनाने और कम से कम कीस्ट्रोक की मदद से, पते को सटीक बनाने के लिए, 'टाइप-टू-यू' सुविधा को जोड़ें.
पते की पुष्टि के लिए पुष्टि करने का तरीका देना उपयोगकर्ताओं को मैप पर उनका पता, इस बात की पुष्टि करने वाले विज़ुअल के तौर पर दिखे कि उन्होंने सही पता डाला है.
डिवाइस के पते के साथ उपयोगकर्ता के डाले गए पते की तुलना करना उपयोगकर्ता के चुने गए या डाले गए पते की तुलना, डिवाइस की मौजूदा जगह से करें और यह पता लगाने में मदद करें कि वे दिए गए पते पर हैं या नहीं. (यह सुविधा काम करे, इसके लिए ज़रूरी है कि साइन अप करते समय उपयोगकर्ता घर पर हों.)
फटाफट और पुष्टि किए गए साइन-अप की सुविधा को और बेहतर बनाने के लिए सलाह अपने-आप पूरा होने वाले विजेट के लुक और स्टाइल को पसंद के मुताबिक बनाने या उपयोगकर्ताओं को पते के तौर पर कारोबार या लैंडमार्क का नाम चुनने की अनुमति देने से, आपके पास कारोबार के पते को बेहतर बनाने का विकल्प होता है.

इनपुट फ़ील्ड में ऑटोकंप्लीट जोड़ना

उदाहरण में इनका इस्तेमाल किया गया है: Android के लिए Places SDK टूल यह भी उपलब्ध है: iOS | JavaScript

प्लेस ऑटोकंप्लीट की सुविधा से, आपके ऐप्लिकेशन में पता डालने की प्रोसेस को आसान बनाया जा सकता है. इससे, आपको ज़्यादा कन्वर्ज़न रेट मिल सकते हैं और आपके ग्राहकों को बेहतर अनुभव मिल सकता है. ऑटोकंप्लीट की सुविधा से, आप सिंगल फ़ील्ड में एक क्विक एंट्री डाल सकते हैं. इसमें "type-ahead" पता अनुमान है. इसका इस्तेमाल करके, साइन अप करने के पते का फ़ॉर्म अपने-आप भरा जा सकता है. अपने साइन-अप फ़्लो में 'जगह अपने-आप पूरा होना' शामिल करके, आप:

  • पता डालने से जुड़ी गड़बड़ियां कम करें.
  • साइन-अप प्रोसेस में शामिल चरणों की संख्या घटाएं.
  • मोबाइल या पहने जाने वाले डिवाइस में पता डालने के अनुभव को आसान बनाएं.
  • ग्राहक के साइन अप करने के लिए, कीस्ट्रोक और कुल समय को काफ़ी कम करें.

जब उपयोगकर्ता ऑटोकंप्लीट की सुविधा वाला बॉक्स चुनता है और टाइप करना शुरू करता है, तो पते के अनुमान की सूची दिखेगी.

जब उपयोगकर्ता, अनुमानों की सूची में से कोई पता चुनता है, तो आप पते की पुष्टि करने और जगह की जानकारी पाने के लिए, दिए गए जवाब का इस्तेमाल कर सकते हैं. इसके बाद, आपका ऐप्लिकेशन पता एंट्री फ़ॉर्म के सही फ़ील्ड में जानकारी भर सकता है, जैसा कि नीचे दिए गए डायग्राम में दिखाया गया है.

वीडियो: प्लेस ऑटोकंप्लीट की मदद से पते के फ़ॉर्म को बेहतर बनाना

पते के फ़ॉर्म

Android

iOS

वेब

Google Maps Platform, मोबाइल प्लैटफ़ॉर्म और वेब के लिए एक प्लेस ऑटोकंप्लीट विजेट देता है. पिछले आंकड़ों में दिखाया गया विजेट, पहले से मौजूद अपने-आप पूरा होने वाली सुविधा के साथ, खोज के लिए डायलॉग बॉक्स उपलब्ध कराता है. आप जगह के हिसाब से खोजने की सुविधा को ऑप्टिमाइज़ भी कर सकते हैं.

इस सेक्शन में, 'फटाफट और पुष्टि किए गए साइन अप' के लिए, प्लेस ऑटोकंप्लीट की सुविधा को लागू करने का तरीका बताया गया है.

प्लेस ऑटोकंप्लीट विजेट जोड़ना

Android में, आप ऑटोकंप्लीट इंटेंट का इस्तेमाल करके, ऑटोकंप्लीट विजेट जोड़ सकते हैं. यह पता लाइन 1 के इनपुट फ़ील्ड से, प्लेसमार्क अपने-आप पूरा होने की सुविधा लॉन्च करता है, जहां उपयोगकर्ता अपना पता डालना शुरू कर देगा. जब वे टाइप करना शुरू करेंगे, तो वे ऑटोकंप्लीट की सुविधा से मिलने वाले सुझावों की सूची में से अपना पता चुन पाएंगे.

सबसे पहले, ActivityResultLauncher का इस्तेमाल करके, एक गतिविधि लॉन्चर तैयार करें. इसे, लॉन्च की गई गतिविधि के नतीजे के लिए सुनें. नतीजे के कॉलबैक में, एक प्लेस ऑब्जेक्ट होगा. यह ऑब्जेक्ट उस पते से जुड़ा होगा जिसे उपयोगकर्ता अपने-आप पूरा होने वाले सुझावों से चुनता है.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            (ActivityResultCallback<ActivityResult>) result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

इसके बाद, फ़ील्ड के ऑटोकंप्लीट की सुविधा से फ़ील्ड, जगह, और टाइप प्रॉपर्टी तय करें और Autocomplete.IntentBuilder बनाएं. आखिर में, पिछले कोड सैंपल में बताए गए ActivityResultLauncher का इस्तेमाल करके इंटेंट लॉन्च करें.

    private void startAutocompleteIntent() {

        // Set the fields to specify which types of place data to
        // return after the user has made a selection.
        List<Place.Field> fields = Arrays.asList(Place.Field.ADDRESS_COMPONENTS,
                Place.Field.LAT_LNG, Place.Field.VIEWPORT);

        // Build the autocomplete intent with field, country, and type filters applied
        Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.OVERLAY, fields)
                .setCountry("US")
                .setTypeFilter(TypeFilter.ADDRESS)
                .build(this);
        startAutocomplete.launch(intent);
    }

प्लेस ऑटोकंप्लीट की मदद से दिए गए पते को हैंडल करना

ActivityResultLauncher को पहले से परिभाषित करने से, यह भी तय हुआ कि कॉलबैक में गतिविधि का नतीजा दिखाने पर क्या होना चाहिए. अगर उपयोगकर्ता ने कोई सुझाव चुना है, तो वह नतीजे वाले ऑब्जेक्ट में मौजूद इंटेंट में डिलीवर होगा. Autocomplete.IntentBuilder की मदद से इंटेंट बनाया गया था. इसलिए, Autocomplete.getPlaceFromIntent() तरीके से प्लेस ऑब्जेक्ट को निकाला जा सकता है.

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            (ActivityResultCallback<ActivityResult>) result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

वहां से, Place.getAddressComponents() को कॉल करें और हर फ़ॉर्म कॉम्पोनेंट को पता फ़ॉर्म में उससे संबंधित इनपुट फ़ील्ड के साथ मिलान करें, फ़ील्ड को उपयोगकर्ता के चुने गए स्थान से मान के साथ पॉप्युलेट करें.

मैन्युअल रूप से डाले गए पते के बजाय अनुमानित पते का डेटा कैप्चर करने से, पते की सटीक जानकारी पाने में मदद मिलती है. इससे यह पक्का होता है कि पता पहचाना जा सका है और इसे डिलीवर किया जा सकता है. इससे उपयोगकर्ता कीस्ट्रोक को कम किया जा सकता है.

स्थान ऑटोकंप्लीट लागू करते समय इन बातों का ध्यान रखें

जगह के बारे में अपने-आप पूरा होने की सुविधा में कई विकल्प हैं. इनकी मदद से आप विजेट के अलावा दूसरा तरीका भी अपना सकते हैं. आप उन सेवाओं के कॉम्बिनेशन का इस्तेमाल कर सकते हैं जो आपको किसी जगह से सही तरीके से मैच करने के लिए ज़रूरी हैं.

  • किसी ADDRESS फ़ॉर्म के लिए, पैरामीटर के प्रकार को address पर सेट करें, ताकि पूरी सड़क के पतों पर मिलान किया जा सके. इस बारे में ज़्यादा जानें कि जगह के हिसाब से अपने-आप भरे जाने वाले अनुरोधों के लिए तय किए गए टाइप.

  • अगर आपको दुनिया भर में चीज़ें खोजने की ज़रूरत नहीं है, तो उन पर पाबंदियां और भेदभाव लागू करें. ऐसे कई पैरामीटर हैं, जिनका इस्तेमाल करके किसी खास मैच को सिर्फ़ खास क्षेत्रों में मैच किया जा सकता है या उस पर प्रतिबंध लगाया जा सकता है.

    • किसी क्षेत्र के लिए सीमित सीमाओं को सेट करने के लिए RectangularBounds का इस्तेमाल करें, यह पक्का करने के लिए setLocationRestriction() का इस्तेमाल करें कि सिर्फ़ उन इलाकों के पते ही दिखाए जाएं.

    • setCountries() का इस्तेमाल करके, कुछ देशों के जवाबों पर पाबंदी लगाएं.

  • अगर फ़ील्ड के कुछ हिस्से मेल नहीं खाते हैं, तो फ़ील्ड में बदलाव किया जा सकता है. साथ ही, ज़रूरी होने पर ग्राहकों को पता अपडेट करने की अनुमति दें. 'जगह के अपने-आप पूरा होने' की सुविधा से मिलने वाले ज़्यादातर पतों में अपार्टमेंट, सुइट या यूनिट नंबर जैसे सब-प्रॉपर्टी के नंबर नहीं होते हैं. इसलिए, ज़रूरी होने पर उपयोगकर्ता को इस जानकारी के लिए बढ़ावा देने के लिए, पते की दूसरी लाइन पर फ़ोकस करें.

पते की विज़ुअल पुष्टि करना

इस उदाहरण में इनका इस्तेमाल किया गया है: Android के लिए Maps SDK टूल यह भी उपलब्ध है: iOS | JavaScript

पता डालने के लिए, मैप पर उपयोगकर्ताओं को विज़ुअल की पुष्टि दें. इससे उपयोगकर्ताओं को अतिरिक्त भरोसा मिलता है कि पता सही है.

नीचे दिए गए चित्र में पते के नीचे एक मैप दिखाया गया है, जिसमें डाले गए पते पर पिन है.

नीचे दिए गए उदाहरण में Android में मैप जोड़ने के बुनियादी चरणों के बारे में बताया गया है. ज़्यादा जानकारी के लिए दस्तावेज़ देखें.

SupportMapFragment जोड़े जा रहे हैं

सबसे पहले, लेआउट एक्सएमएल फ़ाइल में SupportMapFragment फ़्रैगमेंट जोड़ें.

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:id="@+id/confirmation_map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

फिर, अगर फ़्रैगमेंट अभी तक मौजूद नहीं है, तो प्रोग्राम को उसे जोड़ें.

    private void showMap(Place place) {
        coordinates = place.getLatLng();

        // It isn't possible to set a fragment's id programmatically so we set a tag instead and
        // search for it using that.
        mapFragment = (SupportMapFragment)
                getSupportFragmentManager().findFragmentByTag(MAP_FRAGMENT_TAG);

        // We only create a fragment if it doesn't already exist.
        if (mapFragment == null) {
            mapPanel = ((ViewStub) findViewById(R.id.stub_map)).inflate();
            GoogleMapOptions mapOptions = new GoogleMapOptions();
            mapOptions.mapToolbarEnabled(false);

            // To programmatically add the map, we first create a SupportMapFragment.
            mapFragment = SupportMapFragment.newInstance(mapOptions);

            // Then we add it using a FragmentTransaction.
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.confirmation_map, mapFragment, MAP_FRAGMENT_TAG)
                    .commit();
            mapFragment.getMapAsync(this);
        } else {
            updateMap(coordinates);
        }
    }

फ़्रैगमेंट पर हैंडल पाना और कॉलबैक रजिस्टर करना

  1. फ़्रैगमेंट के लिए हैंडल पाने के लिए, FragmentManager.findFragmentById तरीका कॉल करें और उसे अपनी लेआउट फ़ाइल में फ़्रैगमेंट का रिसॉर्स आईडी पास करें. अगर आपने फ़्रैगमेंट को डाइनैमिक तरीके से जोड़ा है, तो यह चरण छोड़ें, क्योंकि आपने पहले ही हैंडल वापस पा लिया है.

  2. फ़्रैगमेंट पर कॉलबैक सेट करने के लिए, getMapAsync मैथड को कॉल करें.

उदाहरण के लिए, अगर आपने फ़्रैगमेंट को स्टैटिक तौर पर जोड़ा है, तो:

Java


SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

      

Kotlin


val mapFragment = supportFragmentManager
    .findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)

      

मैप में मार्कर को जोड़ना और जोड़ना

जब मैप तैयार हो जाए, तो स्टाइल सेट करें, कैमरे को बीच में रखें, और डाले गए पते के निर्देशांक पर मार्कर जोड़ें. नीचे दिया गया कोड, JSON ऑब्जेक्ट में बताया गया स्टाइलिंग का इस्तेमाल करता है या आपके पास मैप का कोई ऐसा आईडी लोड करने का विकल्प है जिसे क्लाउड पर आधारित Maps स्टाइलिंग के साथ तय किया गया है.

    @Override
    public void onMapReady(GoogleMap googleMap) {
        map = googleMap;
        try {
            // Customise the styling of the base map using a JSON object defined
            // in a string resource.
            boolean success = map.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(coordinates, 15f));
        marker = map.addMarker(new MarkerOptions().position(coordinates));
    }

(कोड का पूरा नमूना देखें)

मैप कंट्रोल बंद किए जा रहे हैं

मैप के अतिरिक्त कंट्रोल (जैसे कि कंपास, टूलबार या पहले से मौजूद सुविधाएं) के बिना, मैप को आसान बनाए रखने के लिए, ज़रूरी कंट्रोल को बंद करें. Android पर, दूसरा विकल्प यह है कि आप सीमित मोड के ज़रिए लाइट मोड चालू करें.

उपयोगकर्ता के डाले गए पते की तुलना, डिवाइस की जगह से करना

पते का सबूत पाने से पहले — यह पक्का करना कि उपयोगकर्ता ने जो पता डाला है उसको कई वजहों से मुश्किल हो सकती है. जैसे, दूर से उपयोगकर्ता की जगह, नए पते पर पहुंचने वाले उपयोगकर्ता या डिजिटल कारोबार (जैसे कि डिजिटल बैंक) जिनके पास ऐसी जगह नहीं है जहां वे काम के बिल या दूसरे दस्तावेज़ डालकर पते का सबूत दे सकें. उपयोगकर्ता के पतों की पुष्टि करने के लिए डिजिटल तरीकों का इस्तेमाल करने से, आपको साइन अप करने का तेज़ और आसान अनुभव मिलता है.

पते की जांच करने के लिए, सुरक्षा सबसे अहम है, खास तौर पर डिजिटल साइन-अप प्रोसेस के साथ. इस सेक्शन में दिशा-निर्देश और नमूने दिए गए हैं, ताकि यह पता लगाया जा सके कि साइन अप के दौरान उपयोगकर्ता की जगह की जानकारी, उनके डाले गए पते से मेल खाती है या नहीं.