Configurar um recurso de preenchimento automático de endereço no Laravel pode melhorar significativamente a experiência do usuário. Este guia mostrará como integrar uma funcionalidade de preenchimento automático de endereço usando a API do Google Places.

Guia passo a passo para configurar o endereço de preenchimento automático no Laravel

Requisitos

1. Um projeto Laravel.
2. Chave de API do Google Places.
3. Conhecimento básico de jQuery e JavaScript.

Etapa 1: configurar uma chave de API do Google Places

1. Acesse o Console do Google Cloud.
2. Crie um novo projeto (ou use um existente).
3. Navegue até APIs e serviços > Biblioteca e pesquise API do Google Places.
4. Ative a API do Google Places.
5. Vá para APIs e serviços > Credenciais e crie uma chave de API. Certifique-se de restringir esta chave para evitar uso não autorizado.

Passo 2: Instale o Laravel e configure rotas

Crie um projeto Laravel (se ainda não o fez):

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

Criar um controlador:

php artisan make:controller AddressController

Agora, defina uma rota em rotas/web.php:

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

Etapa 3: Crie a lógica do controlador

Abra app/Http/Controllers/AddressController.php e adicione a seguinte lógica para retornar a visualização:

  
  
  Etapa 4: crie a visualização com campo de entrada de preenchimento automático


Crie o arquivo de visualização para autocomplete.blade.php no diretório resources/views:



touch resources/views/autocomplete.blade.php




No autocomplete.blade.php, inclua o formulário HTML e o script da API do Google Places:





    
    
    

    
    




    
Autocomplete Address
    

        Address
        
    














  
  
  Explicação:

• types: ['geocode'] limita as sugestões a endereços geocodificados.
• Substitua YOUR_GOOGLE_API_KEY pela chave de API real que você gerou.

Etapa 5: execute o aplicativo Laravel

Execute o seguinte comando para servir o aplicativo:

php artisan serve

Visite http://127.0.0.1:8000/autocomplete em seu navegador e você verá um campo de entrada de endereço. Comece a digitar um endereço e a API do Google Places fornecerá sugestões de endereço.

Etapa 6: lidar com o endereço selecionado (opcional)

Se desejar manipular ainda mais o endereço selecionado (por exemplo, armazená-lo em um banco de dados), você pode modificar o formulário para incluir uma opção de envio.

Por exemplo, você pode adicionar um campo de formulário adicional:

Modifique seu JavaScript para capturar a latitude e longitude:

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();
});

Etapa 7: Crie o método Store (opcional)

No seu AddressController, crie um método para armazenar o endereço enviado:

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.');
}

Adicione uma rota para o envio deste formulário em web.php:

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

Conclusão

Seguindo essas etapas, você integrou com sucesso o preenchimento automático do Google Places em seu aplicativo Laravel. Agora você pode aprimorar a experiência do usuário permitindo que os usuários preencham automaticamente os endereços e tem a opção de armazenar as coordenadas do endereço escolhido em seu banco de dados.