Auto Complete City Google Map API In Laravel
source link: https://www.laravelcode.com/post/auto-complete-city-google-map-api-in-laravel
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Auto Complete City Google Map API In Laravel
Hello, everyone in this tutorials we are share with you how to use google map's autocompleted fill city API in youe laravel application in your form. this is very easy and many time require in any application in register form and any other form.
In this tutorials we are show you country base autocomplete city in text box.
We are create one simple example for autocomplete city API usign google map's API. simple follow this step for integrate in your laravel application
Step : 1 Create Route
First we are create one route in your routes/web.php file
Route::get('auto-complete-city', 'AutoCompleteController@index')->name('auto-complete-city');
Step : 2 Create controller
Now we are create AutoCompleteController in app/Http/Controllers folder
namespace App\Http\Controllers;
use App\Http\Requests;
use Illuminate\Http\Request;
use DB;
use PDF;
class AutoCompleteController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
return view('auto-complete-city');
}
}
Step : 3 Create Blade File
[ADDCODE]
Into the last we are create one blade file and simple put into it following code.
<!DOCTYPE html>
<html>
<head>
<title>User list - PDF</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API_KEY&libraries=places®ion=in"></script>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label>City<star>*</star></label>
<input type="text" name="city" placeholder="City" class="form-control" value="{{ old('city') }}" id="city">
</div>
</form>
<script type="text/javascript">
function initialize() {
var options = {
types: ['(cities)'],
componentRestrictions: {country: "in"}
};
var input = document.getElementById('city');
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</div>
</body>
</html>
Now we are ready to run our example so run bellow command ro quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/auto-complete-city
If you face any problem then please write a comment or give some suggestions for improvement. Thanks...
Author : Harsukh Makwana
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK