Viewing file:  map.blade.php (5.39 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.admin')
@section('page-title')
{{__('Taxi Map')}}
@endsection
@push('script-page')
@endpush
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{route('dashboard')}}">{{__('Dashboard')}}</a></li>
<li class="breadcrumb-item">{{__('Map')}}</li>
@endsection
@section('content')
<div class="row">
<div class="col-xl-12">
<div class="card">
<div class="card-body table-border-style">
<div id="taxi-map-cover">
<div id="taxi-map"></div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('extra-scripts')
<style>
#taxi-map-cover{
height: 600px;
position: relative;
}
#taxi-map{
height: 100%;
}
</style>
<script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script>
const pusher = new Pusher("{{config('chatify.pusher.key')}}", {
cluster: "{{config('chatify.pusher.options.cluster')}}",
authEndpoint: '{{route('api.auth')}}',
auth:{
headers:{"Authorization": "Bearer "+"{{$token}}"}
}
});
pusher.connection.bind( 'error', function( err ) {
if( err.data.code === 4004 ) {
log('Over limit!');
}
});
const presenceChannel = pusher.subscribe('presence-my-channel');
presenceChannel.bind('pusher:subscription_succeeded', function () {
console.log('subscription successed');
});
presenceChannel.bind('pusher:subscription_error', function (error) {
console.log('subscription error:',error);
});
presenceChannel.bind('pusher:member_added', function(member) {
console.log(member);
});
presenceChannel.bind('client-location_update', function (data,metadata) {
markers[metadata.user_id].position=data.position;
});
</script>
<script>
const GOOGLE_API_KEY='{{config('app.GOOGLE_API_KEY')}}';
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: GOOGLE_API_KEY,
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let markers=[];
const drivers=@json($drivers);
let lat=37.4239163,lng=-122.0947209;
if(drivers.length>0){
let pos=[lat,lng];
if(drivers[0].current_location){
pos= drivers[0].current_location.split(',');
}
lat=parseFloat(pos[0]);
lng=parseFloat(pos[1]);
}
const sleep = ms => new Promise(r => setTimeout(r, ms));
async function createMarker(map,cordinates,title="Car"){
const { InfoWindow } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement,PinElement } = await google.maps.importLibrary("marker");
const infoWindow = new InfoWindow();
const icon = document.createElement("div");
icon.innerHTML = '<i style="font-size:2.5em" class="fa-solid fa-car"></i>';
const faPin = new PinElement({
scale: 1.5,
glyph: icon,
glyphColor: "#6FD943",
background: "#000000",
borderColor: "#000000",
});
const marker = new AdvancedMarkerElement({
map,
position: cordinates,
content: faPin.element,
title: title,
});
marker.addListener("click", ({ domEvent, latLng }) => {
const { target } = domEvent;
infoWindow.close();
infoWindow.setContent(marker.title);
infoWindow.open(marker.map, marker);
});
return marker;
}
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const map = new Map(document.getElementById("taxi-map"), {
center: { lat: lat, lng: lng },
zoom: 14,
mapId: "DEMO_MAP_ID",
});
for(let i=0;i<drivers.length;i++){
const driver=drivers[i];
let position=[lat,lng];
console.log(driver.current_location);
if(driver.current_location){
position=driver.current_location.split(',');
}
const m1= await createMarker(map,{ lat: parseFloat(position[0]), lng: parseFloat(position[1]) },driver.name);
markers[""+driver.id]=m1;
}
// await sleep(5000);
}
initMap();
</script>
@endsection
|