April 16, 2024
Category : Laravel
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, laravel 9, laravel 10 and laravel 11. 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 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>
Ok, now you can check..
You can get more information about gmaps.js from here : Click Here.
Maybe It can help you...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- How to use Google ReCaptcha V2 in Laravel 10?
- Laravel 10 Google Recaptcha V3 Example Tutorial
- Laravel 10 Google Charts Tutorial Example
- Laravel 10 Socialite Login with Google Account Example
- Laravel Google 2FA Authentication Tutorial Example
- How to Use Google Translator in Laravel?
- Laravel Google Pie Chart Example Tutorial
- Laravel Google Bar Chart Example Tutorial
- Laravel Google Autocomplete Address Example
- How to Generate PDF with Graph in Laravel?
- Laravel Grayscale Image Generate Example
- Laravel Line Chart using Google Charts API Example
- Laravel GEO Chart using Lavacharts Example
- Laravel Chartjs Chart Example Tutorial
- How to Add Charts in Laravel using Highcharts?
;void(0);){kind=link}
;void(0);){kind=link}