Today, I'm share example simple Add a Marker to Google Map in Laravel 5.8
Setup Laravel 5.8 version
composer create-project --prefer-dist laravel/laravel blog "5.8.*"
Create Migration
php artisan make:migration create_boxmaps_table --create=boxmaps
After creating, go to database / migrations to find newly created file and reconfigure as follows:
Schema::create('boxmaps', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->string('description');
$table->string('lng');
$table->string('lat');
$table->timestamps();
});
Once the configuration is finished, run php artisan migrate to initialize the table boxmaps table in our database
Create Model in Laravel
php artisan make:Boxmap
Create Authentication
php artisan make:Auth
The purpose I ran the above command was to take advantage of the auth's layouts for ease of use
Create Mapbox Register
People go to the following link: https://docs.mapbox.com/mapbox-gl-js/api/ register, we just need to copy the link script and css of mapbox provided for us to attach to the file only, quite well is simple
Create View Blade
Create main.blade.php file in resources / views / layouts / main.blade.php
Continue to copy 2 links provided by mapbox, attach file main.blade.php
<!DOCTYPE html>
<html>
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<script src="{{asset('js/app.js')}}" defer></script>
<link href="{{asset('css/app.css')}}" rel="stylesheet">
<script src="{{asset('js/jquery.min.js')}}"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div >
@yield('content')
</div>
</body>
<style>
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
@yield('script')
</html>
Create a pages directory in the resources / views directory
Create the file google-map.blade.php in the path just created resources / views / pages
edit the file google-map.blade.php as follows:
@extends('layouts.main')
@section('script')
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2tpcHBlcmhvYSIsImEiOiJjazE2MjNqMjkxMTljM2luejl0aGRyOTAxIn0.Wyvywisw6bsheh7wJZcq3Q';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [106.660172, 10.762622], //lng,lat 10.818746, 106.629179
zoom: 7
});
var test ='<?php echo $dataArray;?>'; //ta nhận dữ liệu từ Controller
var dataMap = JSON.parse(test); //chuyển đổi nó về dạng mà Mapbox yêu cầu
// ta tạo dòng lặp để for ra các đối tượng
dataMap.features.forEach(function(marker) {
//tạo thẻ div có class là market, để hồi chỉnh css cho market
var el = document.createElement('div');
el.className = 'marker';
//gắn marker đó tại vị trí tọa độ
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});
</script>
<style>
#map {
width: 100%;
height: 500px;
}
.marker {
background-image: url('/images/point.png');
background-repeat:no-repeat;
background-size:100%;
width: 50px;
height: 100px;
cursor: pointer;
}
</style>
@endsection
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4">
<h2>Google Map</h2>
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{route('google.map.store')}}" method="post" id="boxmap">
@csrf
<div class="form-group">
<label for="title">Title</label>
<input type="text" name="title" placeholder="Title" class="form-control"/>
</div>
<div class="form-group">
<label for="title">Description</label>
<input type="text" name="description" placeholder="Description" class="form-control"/>
</div>
<div class="form-group">
<label for="lat">lat</label>
<input type="text" name="lat" placeholder="lat" class="form-control"/>
</div>
<div class="form-group">
<label for="lng">lng</label>
<input type="text" name="lng" placeholder="lng" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Add Map" class="btn btn-success"/>
</div>
</form>
</div>
<div class="col-md-8">
<h2>Show google Map</h2>
<div id="map"></div>
</div>
</div>
</div>
@endsection
The code above I create a form to add the coordinates information and at the same time I receive data except controller-> view, so we can handle them.
Create Controller in Laravel
php artisan make:controller GoogleMapController --resources
Open the newly created GoogleMapController.php file and edit it as the code below, I have used the validation you created and imported into the file.
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests\FormMapRequest;
use App\Boxmap;
class GoogleMapController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$boxmap = Boxmap::all();
$dataMap = Array();
$dataMap['type']='FeatureCollection';
$dataMap['features']=array();
foreach($boxmap as $value){
$feaures = array();
$feaures['type']='Feature';
$geometry = array("type"=>"Point","coordinates"=>[$value->lng, $value->lat]);
$feaures['geometry']=$geometry;
$properties=array('title'=>$value->title,"description"=>$value->description);
$feaures['properties']= $properties;
array_push($dataMap['features'],$feaures);
}
return View('pages.google-map')->with('dataArray',json_encode($dataMap));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(FormMapRequest $request)
{
$validated = $request->validated();
Boxmap::create($request->all());
return redirect('/google-map')->with('success',"Add map success!");
}
}
Configuation Route
//web.php
Route::prefix('google-map')->group(function () {
Route::get('/','GoogleMapController@index')->name('google.map.index');
Route::post('/post','GoogleMapController@store')->name('google.map.store');
});
Test Add Market Google Map in Laravel 5.8
php artisan serve
We try to google search for a location and get the coordinates at that location try to see, his example is "Vung Tau" offline
Post:Add a Marker to Google Map in Laravel 5.8 or more post
Oldest comments (1)
Can you share this source code?