Google Autocomplete Address In Laravel 9
Websolutionstuff | Apr-12-2022 | Categories : Laravel PHP
In this article, we will see the google autocomplete address in laravel 9. In laravel 8 google autocomplete address tutorial, you will find out how to create and implement a google autocomplete address in laravel with the use of google address API.
Autocomplete is a feature of the place library in the Maps javascript API. You can use autocomplete to give your applications the type-ahead-search behavior of the google maps search field. Laravel google autocomplete address helps you display the complete address such as longitude, latitude, country, state, city, and zip code.
So, let's see laravel 9 google autocomplete address, laravel 9 google place API, laravel 9 place autocomplete, laravel 9 google maps autocomplete, google autocomplete city, google autocomplete country.
Step 1: Create Laravel Application for Google Autocomplete Address In Laravel 9
Step 2: Google Place API Key
Step 3: Create a Route
Step 4: Create Controller
Step 5: Create Blade View File
In this step, we will create laravel application if you don't have laravel application. So, copy the below command and run it on your terminal.
composer create-project --prefer-dist laravel/laravel laravel-9-google-autocomplete-address
Now, we need Google Place API Key. So, visit cloud.google.com and get the place google API key. The Places API is a service that returns information about places using HTTP requests. Places are defined within this API as establishments, geographic locations, or prominent points of interest.
In this step, we will create route for the google autocomplete address example. Add the below code in the routes/web.php file.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\GoogleAddressController;
Route::get('google-autocomplete-address', [GoogleAddressController::class, 'index']);
After adding routes, create controller Http/Controllers/GoogleAddressController.php.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class GoogleAddressController extends Controller
{
public function index()
{
return view('google_autocomplete_address');
}
}
Now, we need to create blade files for view. So, create blade file resources/views/google_autocomplete_address.blade.php and add the below code in the file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Autocomplete Address In Laravel 9 - Websolutionstuff</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="container mt-5">
<h2>Google Autocomplete Address In Laravel 9 - Websolutionstuff</h2><br>
<div class="form-group">
<input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Enter Location">
</div>
<div class="form-group" id="latitudeArea">
<label>Latitude</label>
<input type="text" id="latitude" name="latitude" class="form-control">
</div>
<div class="form-group" id="longtitudeArea">
<label>Longitude</label>
<input type="text" name="longitude" id="longitude" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_GOOGLE_PALCE_API_KEY&libraries=places" ></script>
<script>
$(document).ready(function () {
$("#latitudeArea").addClass("d-none");
$("#longtitudeArea").addClass("d-none");
});
</script>
<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('autocomplete');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
$('#latitude').val(place.geometry['location'].lat());
$('#longitude').val(place.geometry['location'].lng());
$("#latitudeArea").removeClass("d-none");
$("#longtitudeArea").removeClass("d-none");
});
}
</script>
</body>
</html>
For testing purposes, you can use the below script.
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places"></script>
Copy the below URL and run it on the browser.
http://localhost:8000/google-autocomplete-address
You might also like :
- Read Also : Google Line Chart Example in Laravel 8
- Read Also : Google Map With Draggable Marker Example
- Read Also : Laravel 9 Autocomplete Search from Database
- Read Also : Vue Js Get Array Of Length Or Object Length
Recommended Post
Featured Post
How To Send E-mail Using Queue...
In this tutorial, I will show you how to send e-mail using queue in laravel 9, Some time we can see many...
Feb-21-2022
Paypal Payment Gateway Integra...
In this tutorial, we will see paypal payment gateway integration in laravel 8. Paypal is an international payment p...
Jan-10-2022
Laravel 9 Livewire CRUD Operat...
In this article, we will see the laravel 9 livewire crud operation. we will learn about livewire crud operation in larav...
Nov-24-2022
How To Merge Two PDF Files In...
In this article, we will see how to merge two pdf files in laravel 9. Here, we will learn laravel 8/9 to merge two...
Dec-20-2022