Google Autocomplete Address API allows you to retrieve address suggestions, along with details such as latitude, longitude, location code, state, city, country, and more. If you want to create autocomplete addresses and places in your Laravel web application using google places apis. then this tutorial is for you.
In this tutorial, you will learn how to create Google Autocomplete addresses in Laravel 10 apps without displaying markers on Google Maps. Additionally, you will explore how to use the latitude and longitude coordinates of the selected address to display dynamically a marker location on Google Maps within your Laravel 10 application.
How to Create Google Autocomplete Address in Laravel 10
Steps to implement google places autocomplete address in laravel 10 apps without showing markers on map:
- Step 1 – Setup New Laravel 10 App
- Step 2 – Setup Google Place API App
- Step 3 – Add Routes
- Step 4 – Create Controller by Command
- Step 5 – Create Blade View
- Step 6 – Run Development Server
- Step 7 – Test This App
Step 1 – Setup New Laravel 10 App
First of all, Open your terminal or command prompt.
Then you need to execute the following command into it to install/download Laravel 10 application in your system(server):
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Setup Google Place API App
Before integrating the Google autocomplete address API into a this application, you need to get an API key. To get an API key, follow these steps:
- Go to the Google Cloud Console.
- If you do not have a project, create one.
- Once you have a project, go to the APIs & Services Dashboard.
- Click on the “+ ENABLE APIS AND SERVICES” button and search for “Google Maps JavaScript API”.
- Click on the “ENABLE” button.
- Go to the Credentials page.
- Click on the “+ CREATE CREDENTIALS” button and select “API key”.
- Copy the API key generated.
Step 3 – Add Routes
In this step, Visit to app/routes/ directory and open web.php file and then add following routes into web.php file:
use App\Http\Controllers\GoogleController;
Route::get('auto-complete', [GoogleController::class, 'index']);
Step 4 – Create Controller by Command
In this step, execute the following command on terminal to create a controller name GoogleController. So you need to use the below command and create Controller :
php artisan make:controller GoogleController
After successfully create controller go to app/controllers/GoogleController.php and update the following code :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class GoogleController extends Controller
{
// ---------------- [ Load View ] ----------------
public function index(Request $request) {
return view("auto-complete");
}
}
Step 5 – Create Blade view
In this step, create a blade view file. Go to app/resources/views and create one file name auto-complete.blade.php :
<!doctype html>
<html lang="en">
<head>
<title>Google Autocomplete Address Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-8 col-sm-12 col-12 m-auto">
<div class="card shadow">
<div class="card-header bg-primary">
<h5 class="card-title text-white"> Google Autocomplete Address</h5>
</div>
<div class="card-body">
<div class="form-group">
<label for="autocomplete"> Location/City/Address </label>
<input type="text" name="autocomplete" id="autocomplete" class="form-control" placeholder="Select Location">
</div>
<div class="form-group" id="lat_area">
<label for="latitude"> Latitude </label>
<input type="text" name="latitude" id="latitude" class="form-control">
</div>
<div class="form-group" id="long_area">
<label for="latitude"> Longitude </label>
<input type="text" name="longitude" id="longitude" class="form-control">
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-success"> Submit </button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Add Autocomplete Script
So, in the footer section before closing the body tag, just add the below script there.
{{-- javascript code --}}
<script src="https://maps.google.com/maps/api/js?key=AIzaSyDxTV3a6oL6vAaRookXxpiJhynuUpSccjY&libraries=places&callback=initAutocomplete" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#lat_area").addClass("d-none");
$("#long_area").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());
// --------- show lat and long ---------------
$("#lat_area").removeClass("d-none");
$("#long_area").removeClass("d-none");
});
}
</script>
Step 6 – Run Development Server
In this step, execute the following command on the terminal to start development server. Use the php artisan serve command and start your server :
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Step 7 – Test This App
Open your browser and hit the following url on it:
http://localhost:8000/auto-complete
Conclusion
By following these steps, you will be able to create a powerful autocomplete address and places feature in your Laravel 10 web application using the Google Autocomplete Address API.
Recommended Laravel Posts
