लारवेल में एक स्वत: पूर्ण पता सुविधा स्थापित करने से उपयोगकर्ता अनुभव में काफी सुधार हो सकता है। यह मार्गदर्शिका आपको दिखाएगी कि Google Places API का उपयोग करके स्वत: पूर्ण पता कार्यक्षमता को कैसे एकीकृत किया जाए।

लारवेल में स्वत: पूर्ण पता सेट करने के लिए चरण-दर-चरण मार्गदर्शिका

आवश्यकताएं

1. एक लारवेल परियोजना।
2. Google स्थल एपीआई कुंजी।
3. jQuery और जावास्क्रिप्ट का बुनियादी ज्ञान।

चरण 1: Google स्थल API कुंजी सेट करें

1. Google क्लाउड कंसोल पर जाएं।
2. एक नया प्रोजेक्ट बनाएं (या किसी मौजूदा का उपयोग करें)।
3. एपीआई और सेवाएं > लाइब्रेरी पर जाएं, और स्थान एपीआई खोजें।
4. स्थान एपीआई सक्षम करें।
5. एपीआई और सेवाएं > क्रेडेंशियल्स पर जाएं और एक एपीआई कुंजी बनाएं। अनधिकृत उपयोग से बचने के लिए इस कुंजी को प्रतिबंधित करना सुनिश्चित करें।

चरण 2: लारवेल स्थापित करें और रूट सेट करें

एक लारवेल प्रोजेक्ट बनाएं (यदि आपने पहले से नहीं बनाया है):

composer create-project --prefer-dist laravel/laravel address-autocomplete

एक नियंत्रक बनाएं:

php artisan make:controller AddressController

अब, Routes/web.php में एक मार्ग परिभाषित करें:

Route::get('/autocomplete', [AddressController::class, 'index']);

चरण 3: नियंत्रक तर्क बनाएँ

app/Http/Controllers/AddressController.php खोलें और दृश्य वापस करने के लिए निम्नलिखित तर्क जोड़ें:

  
  
  चरण 4: स्वत: पूर्ण इनपुट फ़ील्ड के साथ दृश्य बनाएं


संसाधन/दृश्य निर्देशिका में autocomplete.blade.php के लिए दृश्य फ़ाइल बनाएं:



touch resources/views/autocomplete.blade.php




autocomplete.blade.php में, HTML फॉर्म और Google Places API स्क्रिप्ट शामिल करें:





    
    
    

    
    




    
Autocomplete Address
    

        Address
        
    














  
  
  स्पष्टीकरण:

• प्रकार: ['जियोकोड'] सुझावों को जियोकोडेड पतों तक सीमित करता है।
• Your_GOOGLE_API_KEY को आपके द्वारा जेनरेट की गई वास्तविक API कुंजी से बदलें।

चरण 5: लारवेल एप्लिकेशन चलाएँ

एप्लिकेशन की सेवा के लिए निम्नलिखित कमांड चलाएँ:

php artisan serve

अपने ब्राउज़र में http://127.0.0.1:8000/ऑटोकम्प्लीट पर जाएं, और आपको एक पता इनपुट फ़ील्ड देखना चाहिए। एक पता टाइप करना प्रारंभ करें, और Google Places API पते के सुझाव प्रदान करेगा।

चरण 6: चयनित पता संभालें (वैकल्पिक)

यदि आप चयनित पते को आगे संभालना चाहते हैं (उदाहरण के लिए, इसे डेटाबेस में संग्रहीत करें), तो आप सबमिशन विकल्प शामिल करने के लिए फॉर्म को संशोधित कर सकते हैं।

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

अक्षांश और देशांतर कैप्चर करने के लिए अपनी जावास्क्रिप्ट को संशोधित करें:

var autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    document.getElementById('latitude').value = place.geometry.location.lat();
    document.getElementById('longitude').value = place.geometry.location.lng();
});

चरण 7: स्टोर विधि बनाएं (वैकल्पिक)

अपने एड्रेसकंट्रोलर में, सबमिट किए गए पते को संग्रहीत करने के लिए एक विधि बनाएं:

public function storeAddress(Request $request)
{
    $latitude = $request->input('latitude');
    $longitude = $request->input('longitude');

    // Store the address in the database or perform other actions.

    return back()->with('success', 'Address stored successfully.');
}

इस फ़ॉर्म सबमिशन के लिए web.php में एक रूट जोड़ें:

Route::post('/store-address', [AddressController::class, 'storeAddress'])->name('storeAddress');

निष्कर्ष

इन चरणों का पालन करके, आपने अपने लारवेल एप्लिकेशन में Google Places Autocomplete को सफलतापूर्वक एकीकृत कर लिया है। अब आप उपयोगकर्ताओं को स्वत: पूर्ण पते की अनुमति देकर उपयोगकर्ता अनुभव को बढ़ा सकते हैं, और आपके पास चुने हुए पते के निर्देशांक को अपने डेटाबेस में संग्रहीत करने का विकल्प है।