Skip to content

Commit 9a47995

Browse files
alexpechkarevalexpechkarev
committed
Add Blade component for Places Autocomplete integration
- Created a new Blade component `places-autocomplete.blade.php` to encapsulate the functionality of the Places Autocomplete library. - The component allows customization through props such as `containerId`, `googleMapsApiKey`, `options`, `requestParams`, and `fetchFields`. - Includes error handling and event dispatching for successful responses and errors. - Ensures the PlacesAutocomplete library is loaded before initialization.
1 parent 939b5ae commit 9a47995

10 files changed

+903
-1
lines changed

‎README.md‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,18 @@
11
# laravel-places-autocomplete
2-
Easily integrate the PlacesAutocompleteJs library into Laravel Blade views.
2+
3+
Easily integrate the Places (New) Autocomplete - JavaScript library into Laravel Blade views. Provides a user-friendly way to search for and retrieve detailed address information in any web application.
4+
5+
## Installation
6+
Install the package via Composer:
7+
8+
```bash
9+
composer require alexpechkarev/laravel-places-autocomplete
10+
```
11+
12+
## Usage
13+
In your Blade view, you can use the `<x-places-autocomplete>` component to render the autocomplete input field. You can pass options as an array to customize the behavior of the component.
14+
```php
15+
<x-places-autocomplete
16+
:options="['placeholder' => 'Start typing your address...', 'clear_input' => false, 'debounce' => 100]" />
17+
18+
```

‎composer.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "alexpechkarev/laravel-places-autocomplete",
3+
"description": "Easily integrate the Places (New) Autocomplete - JavaScript library into Laravel Blade views. Provides a user-friendly way to search for and retrieve detailed address information in any web application.",
4+
"keywords": [
5+
"laravel",
6+
"google autocomplete",
7+
"google places api",
8+
"address autocomplete",
9+
"places autocomplete",
10+
"address search",
11+
"blade component"
12+
],
13+
"license": "MIT",
14+
"authors": [
15+
{
16+
"name": "Alexander Pechkarev",
17+
"email": "alexpechkarev@gmail.com"
18+
}
19+
],
20+
"minimum-stability": "stable",
21+
"require": {
22+
"php": "^7.4|^8.0",
23+
"illuminate/support": "^8.0|^9.0|^10.0|^11.0|^12.0",
24+
"illuminate/view": "^8.0|^9.0|^10.0|^11.0|^12.0"
25+
},
26+
"autoload": {
27+
"psr-4": {
28+
"PlacesAutocomplete\\": "src/"
29+
}
30+
},
31+
"extra": {
32+
"laravel": {
33+
"providers": [
34+
"PlacesAutocomplete\\PlacesAutocompleteServiceProvider"
35+
]
36+
}
37+
}
38+
}

‎src/PlacesAutocompleteServiceProvider.php‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?php
2+
3+
namespace PlacesAutocomplete;
4+
5+
use Illuminate\Support\Facades\Blade;
6+
use Illuminate\Support\ServiceProvider;
7+
use PlacesAutocomplete\View\Components\PlacesAutocompleteComponent;
8+
9+
/**
10+
* Service provider for the Places Autocomplete package.
11+
*/
12+
class PlacesAutocompleteServiceProvider extends ServiceProvider
13+
{
14+
/**
15+
* Register any application services.
16+
*/
17+
public function register(): void {}
18+
19+
/**
20+
* Bootstrap any application services.
21+
*/
22+
public function boot(): void
23+
{
24+
// Publishing the configuration file
25+
$this->publishes([
26+
__DIR__ . '/config/places_autocomplete.php' => config_path('places_autocomplete.php'),
27+
], 'places-autocomplete');
28+
29+
// Publishing the JavaScript assets
30+
$this->publishes([
31+
__DIR__ . '/js' => public_path('vendor/places-autocomplete'),
32+
], 'places-autocomplete');
33+
34+
// Publishing the view files
35+
$this->publishes([
36+
__DIR__ . '/views' => resource_path('views/vendor/places-autocomplete'),
37+
]);
38+
39+
// Registering the Blade component
40+
// This allows the component to be used in Blade templates
41+
// The component can be used with the syntax: <x-places-autocomplete />
42+
// The component will be rendered using the PlacesAutocompleteComponent class
43+
Blade::component('places-autocomplete', PlacesAutocompleteComponent::class);
44+
}
45+
}

‎src/View/Components/PlacesAutocompleteComponent.php‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<?php
2+
3+
namespace PlacesAutocomplete\View\Components;
4+
5+
use Illuminate\View\Component;
6+
use \Illuminate\Support\Str;
7+
8+
9+
/**
10+
* Class PlacesAutocompleteComponent
11+
*
12+
* A Blade component for integrating Google Places Autocomplete.
13+
*
14+
* @package PlacesAutocomplete\View\Components
15+
*/
16+
17+
class PlacesAutocompleteComponent extends Component
18+
{
19+
public string $containerId; // Unique ID for the container element
20+
public string $googleMapsApiKey; // Google Maps API key for Places Autocomplete
21+
public array $options; // Options for the Places Autocomplete component
22+
public array $requestParams; // Request parameters for the Places Autocomplete component
23+
public array $fetchFields; // Fetch fields for the Places Autocomplete component
24+
public bool $loadScriptTag; // New option to control script loading
25+
26+
27+
/**
28+
* Class constructor.
29+
*
30+
* @param string $containerId
31+
* @param string $googleMapsApiKey
32+
* @param array $options
33+
* @param array $requestParams
34+
* @param array $fetchFields
35+
* @param bool $loadScriptTag
36+
*/
37+
public function __construct(
38+
string $containerId = 'pac_container',
39+
string $googleMapsApiKey = '',
40+
array $options = [],
41+
array $requestParams = [],
42+
array $fetchFields = [],
43+
bool $loadScriptTag = true // Default to true
44+
) {
45+
46+
// Ensure unique ID
47+
$this->containerId = $containerId . '-' . Str::random(5);
48+
// Set Google Maps API key, options, request parameters, fetch fields, and script loading option
49+
$this->googleMapsApiKey = !empty($googleMapsApiKey) ? $googleMapsApiKey : config('places_autocomplete.google_maps_api_key');
50+
// Merge with default options, request parameters, and fetch fields from config
51+
$this->options = array_merge(config('places_autocomplete.options', []), $options);
52+
53+
// Request parameters and fetch fields are merged with defaults from config
54+
// This allows users to override them when using the component in their Blade templates
55+
$this->requestParams = array_merge(config('places_autocomplete.request_params', []), $requestParams);
56+
57+
// Fetch fields are merged with defaults from config
58+
// This allows users to override them when using the component in their Blade templates
59+
// Default fetch fields include 'formattedAddress' and 'addressComponents'
60+
$this->fetchFields = array_merge(config('places_autocomplete.fetch_fields', ['formattedAddress', 'addressComponents']), $fetchFields);
61+
62+
// Set the loadScriptTag property to control whether the script tag is loaded
63+
// This allows users to choose whether to load the Google Maps script tag automatically
64+
$this->loadScriptTag = $loadScriptTag;
65+
66+
// Validate that the Google Maps API key is set
67+
// If not set, throw an exception to inform the user
68+
if (empty($this->googleMapsApiKey)) {
69+
throw new \InvalidArgumentException('Google Maps API key is not configured. Please set it in your .env file or config/places_autocomplete.php');
70+
}
71+
}
72+
73+
/**
74+
* Render the component view.
75+
*
76+
* @return void
77+
*/
78+
public function render()
79+
{
80+
return view('vendor.places-autocomplete.places-autocomplete', [
81+
'containerId' => $this->containerId,
82+
'googleMapsApiKey' => $this->googleMapsApiKey,
83+
'options' => $this->options,
84+
'requestParams' => $this->requestParams,
85+
'fetchFields' => $this->fetchFields,
86+
'loadScriptTag' => $this->loadScriptTag,
87+
]);
88+
}
89+
}

‎src/config/places_autocomplete.php‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<?php
2+
3+
4+
return [
5+
6+
/*
7+
|--------------------------------------------------------------------------
8+
| Google Maps API Key
9+
|--------------------------------------------------------------------------
10+
|
11+
| Here you may specify your Google Maps API key for the Places Autocomplete
12+
| feature. This key will be used to authenticate requests to the Google Maps
13+
| API and should be kept secret.
14+
|
15+
*/
16+
17+
'google_maps_api_key' => env('GOOGLE_MAPS_API_KEY', ''),
18+
19+
/*|--------------------------------------------------------------------------
20+
| Default Options
21+
|----------------------------------------------------------------------------
22+
| These options will be used as default settings for the Places Autocomplete
23+
| component. You can override these options when using the component in your
24+
| Blade templates.
25+
|*/
26+
27+
'options' => [
28+
'debounce' => 100, // Debounce time in milliseconds
29+
'distance' => true, // Display distance in results
30+
'distance_units' => 'km', // Units for distance (km or miles)
31+
'placeholder' => 'Search for a place', // Placeholder text for the input field
32+
],
33+
34+
/*
35+
|--------------------------------------------------------------------------
36+
| Default Request Parameters
37+
|--------------------------------------------------------------------------
38+
| These parameters will be included in every request made to the Google Maps
39+
| API for Places Autocomplete. You can override these parameters when using
40+
| the component in your Blade templates.
41+
|*/
42+
'request_params' => [
43+
'language' => 'en',
44+
'region' => 'GB',
45+
],
46+
47+
48+
/*|--------------------------------------------------------------------------
49+
| Default Fetch Fields
50+
|--------------------------------------------------------------------------
51+
| These fields will be fetched by default when using the Places Autocomplete
52+
| component. You can override these fields when using the component in your
53+
| Blade templates.
54+
|*/
55+
'fetch_fields' => [
56+
'formattedAddress',
57+
'addressComponents',
58+
],
59+
];

0 commit comments

Comments
 (0)