How to Multiple markers in google map using gmaps.js in Laravel?


Multiple markers in google map using gmaps.js in Laravel

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

Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.