Polygonal Google Map In Laravel With Multiple Markers

Hello Artisan,

In this tutorial, I will show you, how to create a polygon google map in the Laravel 9 application. I will create a google map where every latitude and longitude location will be connected to each other & we will do it using polygon features.

If you don't know how to create a google map in Laravel & then how to generate a map using latitude and longitude & make a polygonal map using those data then this example is for you.

For showing the google map we need the google map API key. After getting the API key, we can integrate google Maps into Laravel easily. See the below image of what we are going to make:

Step 1: Create Route

In this step, we need a route to show google Maps in the Laravel application. So update web.php like below:

routes/web.php

use App\Models\Invoice;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('map',function(Request $request, Invoice $invoice){
    if($request->has('start_date')) {
        $data = $invoice->where('SRCode',$request->sr_code)
                        ->whereBetween('OrderDate',[
                            $request->start_date,
                            $request->end_date
                        ])
                        ->select('Latitude as lat','Longitude as lng')
                        ->get();
        return view('map',compact('data','request'));
    }
    return view('map');
})->name('google.map');

Step 2: Create View

Now in this step, we need a blade file for generating our google map by using our fetching data dynamically. Update map.blade.php like below:

resources/views/map.blade.php

Read also: Laravel Google Map Integration Example with Multiple Markers

Hope it can help you.