se anexa token de api de google maps para rastreo de ubicaciones

2026-02-28 10:23:56 -06:00
parent 4c87f86c89
commit 68d32dbd88
14 changed files with 259 additions and 45 deletions
@@ -0,0 +1,197 @@
+@extends('layouts.landing')
+
+@section('title',"show")
+
+@section('content')
+
+<div class="container-fluid">
+
+    <div class="card shadow mb-4">
+
+        <div class="card-header py-3 d-flex justify-content-between">
+            <h6 class="m-0 font-weight-bold text-primary">
+                Datos de los registros
+            </h6>
+
+            <a href="{{ route('code.index') }}" class="btn btn-sm btn-primary">
+                Regresar
+            </a>
+        </div>
+
+        <div class="card-body">
+
+        @foreach ($codes as $fecha => $registros)
+
+            <div class="card shadow mb-4">
+
+                <div class="card-header bg-primary text-white d-flex justify-content-between">
+
+                    <h5 class="m-0">
+                        📅 {{ \Carbon\Carbon::parse($fecha)->format('d/m/Y') }}
+                    </h5>
+
+                    <button class="btn btn-light btn-sm ver-ruta" data-registros='@json($registros)'>
+                    <i class="fa-solid fa-circle-location-arrow fa-fade"></i>
+                        Rastrear
+                    </button>
+
+                </div>
+
+                <div class="card-body">
+
+                    @foreach ($registros as $registro)
+
+                        <div class="{{ !$loop->last ? 'border-bottom' : '' }} mb-2 pb-2">
+                            <strong>Hora:</strong>
+                            {{ $registro->registro->format('h:i A') }}
+                            <br>
+                            <strong>Código:</strong>
+                            {{ $registro->codigo }}
+                        </div>
+
+                    @endforeach
+
+                </div>
+
+            </div>
+
+        @endforeach
+
+        </div>
+    </div>
+
+</div>
+
+
+<div id="mapOverlay"
+style="
+position:fixed;
+top:0;
+left:0;
+width:100%;
+height:100%;
+background:rgba(0,0,0,.6);
+z-index:9999;
+display:none;
+">
+
+    <div
+    style="
+        position:absolute;
+        top:50%;
+        left:50%;
+        transform:translate(-50%,-50%);
+        width:80%;
+        height:80%;
+        background:white;
+        border-radius:10px;
+        overflow:hidden;
+    ">
+
+        <button id="cerrarMapa"
+        class="btn btn-danger btn-sm"
+        style="
+            position:absolute;
+            top:10px;
+            right:10px;
+            z-index:10;
+        ">
+            ✖
+        </button>
+
+        <div id="map"
+        style="width:100%;height:100%;"></div>
+
+    </div>
+
+</div>
+
+@endsection
+
+
+
+@push('scripts')
+
+{{-- GOOGLE MAPS --}}
+<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key') }}"></script>
+
+<script>
+
+let map;
+
+document.addEventListener('DOMContentLoaded', () => {
+
+    const overlay =
+        document.getElementById('mapOverlay');
+
+    const cerrar =
+        document.getElementById('cerrarMapa');
+
+    cerrar.onclick = () => {
+        overlay.style.display = 'none';
+    };
+
+    document.querySelectorAll('.ver-ruta')
+    .forEach(btn => {
+
+        btn.addEventListener('click', function () {
+
+            console.log("CLICK OK");
+
+            const registros =
+                JSON.parse(this.dataset.registros);
+
+            const puntos = registros.map(r => ({
+                lat: Number(r.latitud),
+                lng: Number(r.longitud)
+            }));
+
+
+                overlay.style.display = 'block';
+
+                setTimeout(() => {
+
+                    const mapDiv = document.getElementById('map');
+
+                    map = new google.maps.Map(mapDiv,{
+                        zoom:15,
+                        center:puntos[0]
+                    });
+
+                    const bounds = new google.maps.LatLngBounds();
+
+                    puntos.forEach((p,i)=>{
+
+                        new google.maps.Marker({
+                            position:p,
+                            map:map,
+                            label:String(i+1)
+                        });
+
+                        bounds.extend(p);
+                    });
+
+                    new google.maps.Polyline({
+                        path:puntos,
+                        strokeWeight:4,
+                        map:map
+                    });
+
+                    map.fitBounds(bounds);
+
+                    // 🔥 recalculo REAL
+                    google.maps.event.trigger(map,'resize');
+                    map.fitBounds(bounds);
+
+                },400);
+
+
+        });
+
+    });
+
+});
+
+</script>
+
+@endpush