Laravel – Multiple markers in google map using gmaps.js
In this post we will give you information about Laravel – Multiple markers in google map using gmaps.js. Hear we will give you detail about Laravel – Multiple markers in google map using gmaps.jsAnd how to use it also give you demo for it if it is necessary.
Today, we learn how to implement google map with multiple marker using gmaps.js library in Laravel 5. 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.
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:
Preview:
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 AppHttpControllers;
use IlluminateHttpRequest;
use AppHttpRequests;
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>
Ok, now you can check..
You can get more information about gmaps.js from here : Click Here.
Maybe It can help you…
Hope this code and post will helped you for implement Laravel – Multiple markers in google map using gmaps.js. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs