Laravel - Multiple Markers In Google Map Using Gmaps.js

Today, we learn how to implement google map with multiple marker using gmaps.js library in laravel 5, laravel 6, laravel 7, laravel 8 and laravel 9. We can also simply use google map API for maps, But gmaps.js is very popular and they provides very simple way to generate google map.

4.5/5.0
Last updated 08 September, 2022
By Admin

gmaps.js through we can make multiple markers, make routes, Geocoding, Map events etc. In this example i use multiple markers example.

If you are beginner then also you can do it simply following post, i did this example from scratch.

So, After finish all tutorial you will find layout as bellow.

Ok, so first we have a one table "location" with bellow structure and data.

location table:

After this we have to add one route for our example, so if you have laravel 5 then open route file and add bellow route.

routes/web.php

Route::get('gmaps', 'HomeController@gmaps');

Ok, now we have to make "gmaps" method on "HomeController". So, first if you haven't created HomeController then first create HomeController and put bellow code

app/Http/Controllers/HomeController.php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use DB;
class HomeController extends Controller
{
    public function gmaps()
    {
    	$locations = DB::table('locations')->get();
    	return view('gmaps',compact('locations'));
    }
}

At Last we have to create gmaps.blade.php file on resources folder, so create view file and put bellow code:

resources/views/gmaps.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>Laravel 5 - Multiple markers in google map using gmaps.js</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="http://maps.google.com/maps/api/js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>
  	<style type="text/css">
    	#mymap {
      		border:1px solid red;
      		width: 800px;
      		height: 500px;
    	}
  	</style>
</head>
<body>
	<h1>Laravel 5 - Multiple markers in google map using gmaps.js</h1>
	<div id="mymap"></div>
	<script type="text/javascript">
    var locations = <?php print_r(json_encode($locations)) ?>;
    var mymap = new GMaps({
		el: '#mymap',
		lat: 21.170240,
		lng: 72.831061,
		zoom:6
    });
    $.each( locations, function( index, value ){
	    mymap.addMarker({
			lat: value.lat,
			lng: value.lng,
			title: value.city,
			click: function(e) {
				alert('This is '+value.city+', gujarat from India.');
			}
	    });
   });
  </script>
</body>
</html>

I hope it can help you...

Google

Google Map

Laravel - Multiple Markers In Google Map Using Gmaps.js

location table:

Categories

Popular Tags