Add a Marker to Google Map in Laravel 5.8

Add a Marker to Google Map in Laravel 5.8

Ngồi suy nghĩ những chuyện bala bala trên bãi biển cảm thấy phiêu phiêu, viết một ví dụ gắn mấy cái marker đến các vị trí trên bản đồ chơi. Mò hồi, cái google map,nó giới hạn rồi, đành sài thằng mapbox thử nhé ae ::)

# 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 

Sau khi tạo xong, vào database/migrations kiếm file vừa mới tạo và cấu hình lại như sau:

Schema::create('boxmaps', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->string('title');
    $table->string('description');
    $table->string('lng');
    $table->string('lat');
    $table->timestamps();
});

Cấu hình xong ta chạy, php artisan migrate để khởi tạo cái bảng table boxmaps trong database của ta 

# Create Model in Laravel

php artisan make:Boxmap 

# Create Authentication

php artisan make:Auth

Mục đích mình chạy câu lệnh bên trên là lợi dụng layouts của auth cho dễ sử dụng ấy mà 

# Create Mapbox Register

Mọi người vào đường dẫn sau:https://docs.mapbox.com/mapbox-gl-js/api/ đăng ký, ta chỉ việc copy mấy link script và css của mapbox cung cấp cho ta gắn vào file thôi, cũng khá là đơn giản 

# Create View Blade

Tạo file main.blade.php trong đường dẫn resources/views/layouts/main.blade.php 
Tiếp tục copy 2 đường link mà mapbox cung cấp cho ta, gắn 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>

Tạo một thư mục pages trong đường dẫn resources/views
Tạo file google-map.blade.php trong đường dẫn vừa tạo resources/views/pages 
chỉnh sửa file google-map.blade.php lại như sau:

@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

Đoạn code bên trên mình tạo form thêm thông tin tọa độ và đồng thời mình nhận dữ liệu trừ controller->view, để ta xử lý chúng.

# Create Controller in Laravel 

php artisan make:controller GoogleMapController  --resources

Mở file GoogleMapController.php vừa tạo và chỉnh sửa lại như code bên dưới, mình có dùng validation các bạn tạo thêm và import vô file nhé

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

Ta thử lên google search một địa điểm và lấy tọa độ tại vị trí đó thử xem, mình ví dụ là "Vũng Tàu" nhé

add marker to google map in laravel 5.8

add marker to google map in laravel 5.8add marker to google map in laravel 5.8