How to Add Google Map in Laravel?

By Hardik Savani April 16, 2024 Category : Laravel

Hi Dev,

This article will give you example of laravel google maps example. if you want to see example of laravel google maps location then you are a right place. I would like to share with you how to add google map in laravel. We will use how to use google map in laravel. Follow bellow tutorial step of laravel google map marker example.

In this example, we will create one simple route and display google map with marker. We will use the google maps js library for adding google map. you can easily add a google map in laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 versions.

you can see bellow preview, how it looks:

Preview:

Step 1: Install Laravel

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Route

In this is step we need to create some routes for google maps example view.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\GoogleController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('google-autocomplete', [GoogleController::class, 'index']);

Read Also: Laravel Multiple Markers in Google Map using Gmaps.js

Step 3: Create Controller

in this step, we need to create GoogleController and add following code on that file:

app/Http/Controllers/GoogleController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class GoogleController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        return view('googleAutocomplete');
    }
}

Step 4: Google Map API Key in Env

here, we will add new variable in .env file fo set google map api key. so let's add as bellow:

.env

GOOGLE_MAP_KEY=YOUR_GOOGLE_API_KEY

Step 5: Create Blade Files

here, we need to create blade files for google autocomplete example. so let's create one by one files:

resources/views/googleAutocomplete.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Add Google Map in Laravel? - ItSolutionStuff.com</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <style type="text/css">
        #map {
          height: 400px;
        }
    </style>
</head>
    
<body>
    <div class="container mt-5">
        <h2>How to Add Google Map in Laravel? - ItSolutionStuff.com</h2>
        <div id="map"></div>
    </div>
  
    <script type="text/javascript">
        function initMap() {
          const myLatLng = { lat: 22.2734719, lng: 70.7512559 };
          const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 5,
            center: myLatLng,
          });
  
          new google.maps.Marker({
            position: myLatLng,
            map,
            title: "Hello Rajkot!",
          });
        }
  
        window.initMap = initMap;
    </script>
  
    <script type="text/javascript"
        src="https://maps.google.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&callback=initMap" ></script>
  
</body>
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

Read Also: Laravel 9 Auth with Livewire Jetstream Example
http://localhost:8000/google-autocomplete

I hope it can help you...

Tags :
Previous

NEWEST DATA BREACHES AND PREVENTIONS
Next

Github - How to Create New Branch using Git Command?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares