Today now in this post i will share with you How to Multiple markers in google map using gmaps.js in Laravel? Today, i learn how to implement google map with the multiple marker by using gmaps.js library in laravel application. We can easily use google map API for maps. But gmaps.js is a very popular and also they are provides a very simple way to generate the google map.
Using gmaps.js we can make the multiple markers, also make routes, Geocoding, Map events etc. Now in this example i will use multiple markers example.
So if you are a beginner then also you can also do it simply by following post, i did this by example from the scratch.
routes/web.php
Route::get('gmaps', 'HomeController@gmaps');
Now you need to make “gmaps” method on the “HomeController”. So, at first if you haven’t this controller . Then need to created HomeController then put the 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('centers')->get();
return view('gmaps',compact('locations'));
}
}
At Last step we need to create the centerLocation.blade.php file on resources folder. So create the view file and put the bellow code:
resources/views/gmaps.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 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>
Read Also: How to implement infinite ajax scroll pagination in Laravel?
Thanks for read. I hope it help you. For more you can follow us on facebook
