In this article, we will see the laravel 9 google autocomplete address. Here, we will learn how to google autocomplete addresses in laravel 9.
You can find out how to create and implement a google autocomplete address in laravel 9 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 maps autocomplete, laravel 9 google place API, laravel 9 place autocomplete, google autocomplete city, and google autocomplete country.
Step 1: Install Laravel 9 Application
Step 2: Google Place API Key
Step 3: Create a Route
Step 4: Create Controller
Step 5: Create Blade View File
Step 1: Install Laravel 9 Application for Google Autocomplete Address
In this step, we will install the laravel 9 application using the following command.
composer create-project --prefer-dist laravel/laravel laravel-9-google-autocomplete-address
Read Also: Laravel 9 Razorpay Payment Gateway Integration
Step 2: Google Place API Key
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.
Step 3: Create a Route
In this step, we will create a route to the web.php file.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\GoogleAddressController;
Route::get('google-autocomplete-address', [GoogleAddressController::class, 'index']);
Step 4: Create Controller
In this step, we will create a GoogleAddressController file. So, add the following code to that file.
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');
}
}
Read Also: How To Use Google Bar Chart In Vue JS
Step 5: Create Blade View File
Now, we will create blade files for viewing. So, add the following code to that file.
resources/views/google_autocomplete_address.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 9 Google Autocomplete Address - Techsolutionstuff</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>Laravel 9 Google Autocomplete Address - Techsolutionstuff</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>
Read Also: Laravel 8 Google Bar Chart Example
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
Top comments (0)