中條 美冬

1647548340

Laravelを使用してGoogleオートコンプリートアドレスWebアプリを作成する方法

このチュートリアルでは、laravel8アプリでGoogleアドレスAPIを使用してGoogleオートコンプリートアドレスWebアプリを作成する方法を学習します。

1:Laravel8アプリをインストールする

まず、ターミナルで次のコマンドを実行して、システム(サーバー)にlaravel8アプリケーションをインストール/ダウンロードします。

composer create-project --prefer-dist laravel/laravel blog

2:GoogleからAPIキーを取得する

Laravelにオートコンプリートアドレスを実装するには、キーを取得する必要があります。したがって、リンク https://cloud.google.com にアクセスして、GoogleAPIキーを取得してください。

3:ルートを追加

このステップでは、web.phpファイルにルートを追加します。app / routers / web.phpファイルに移動し、web.phpファイルの次のルートに移動します。

use App\Http\Controllers\GoogleController;
Route::get('auto-complete', [GoogleController::class, 'index']);

4:コマンドによるコントローラーの生成

この手順では、ターミナルで次のコマンドを実行して、コントローラー名GoogleControllerを作成します。したがって、以下のコマンドを使用してコントローラーを作成する必要があります。

php artisan make:controller GoogleController

コントローラが正常に作成されたら、 app / controllers / GoogleController.phpに移動し、次のコードを更新します。

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class GoogleController extends Controller
{
    // ---------------- [ Load View ] ----------------
    public function index(Request $request) {
 
        return view("auto-complete");
 
    }
}

5:ブレードビューを作成する

このステップでは、ブレードビューファイルを作成します。app / resources / viewsに移動し、auto-complete.blade.phpというファイル名を1つ作成します。

<!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>

オートコンプリートスクリプトを追加する

したがって、bodyタグを閉じる前のフッターセクションに、以下のスクリプトを追加するだけです。

{{-- 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>

6:開発サーバーを実行する

この手順では、端末で次のコマンドを実行して開発サーバーを起動します。phpartisanserveコマンドを使用してサーバーを起動します。

php artisan serve
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080

7:このアプリをテストする

ブラウザを開き、次のURLを押します。

 http://localhost:8000/auto-complete

laravelチュートリアルでは、laravelでgoogleplaceAPIを使用してgoogleオートコンプリートWebアプリケーションを実装する方法を学びました。

What is GEEK

Buddha Community

中條 美冬

1647548340

Laravelを使用してGoogleオートコンプリートアドレスWebアプリを作成する方法

このチュートリアルでは、laravel8アプリでGoogleアドレスAPIを使用してGoogleオートコンプリートアドレスWebアプリを作成する方法を学習します。

1:Laravel8アプリをインストールする

まず、ターミナルで次のコマンドを実行して、システム(サーバー)にlaravel8アプリケーションをインストール/ダウンロードします。

composer create-project --prefer-dist laravel/laravel blog

2:GoogleからAPIキーを取得する

Laravelにオートコンプリートアドレスを実装するには、キーを取得する必要があります。したがって、リンク https://cloud.google.com にアクセスして、GoogleAPIキーを取得してください。

3:ルートを追加

このステップでは、web.phpファイルにルートを追加します。app / routers / web.phpファイルに移動し、web.phpファイルの次のルートに移動します。

use App\Http\Controllers\GoogleController;
Route::get('auto-complete', [GoogleController::class, 'index']);

4:コマンドによるコントローラーの生成

この手順では、ターミナルで次のコマンドを実行して、コントローラー名GoogleControllerを作成します。したがって、以下のコマンドを使用してコントローラーを作成する必要があります。

php artisan make:controller GoogleController

コントローラが正常に作成されたら、 app / controllers / GoogleController.phpに移動し、次のコードを更新します。

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class GoogleController extends Controller
{
    // ---------------- [ Load View ] ----------------
    public function index(Request $request) {
 
        return view("auto-complete");
 
    }
}

5:ブレードビューを作成する

このステップでは、ブレードビューファイルを作成します。app / resources / viewsに移動し、auto-complete.blade.phpというファイル名を1つ作成します。

<!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>

オートコンプリートスクリプトを追加する

したがって、bodyタグを閉じる前のフッターセクションに、以下のスクリプトを追加するだけです。

{{-- 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>

6:開発サーバーを実行する

この手順では、端末で次のコマンドを実行して開発サーバーを起動します。phpartisanserveコマンドを使用してサーバーを起動します。

php artisan serve
If you want to run the project diffrent port so use this below command 
php artisan serve --port=8080

7:このアプリをテストする

ブラウザを開き、次のURLを押します。

 http://localhost:8000/auto-complete

laravelチュートリアルでは、laravelでgoogleplaceAPIを使用してgoogleオートコンプリートWebアプリケーションを実装する方法を学びました。