Realtime geolocation tracking via realtime service provider - laravel

Question

I want to make a map marker which will move whenever it gets updates from server. Each map marker is described by a latitude and longitude.
var url = '/tracking/records/fetch'+ '&id=' + user_id +'&type='+type;
This endpoint returns a set of latitude,longitude in JSON format.
How to move the marker when browser get updates from server ?

Answer 1

It sounds like your /tracking/records/fetch endpoint is set up for polling: your webpage can repeatedly fetch a whole set of coordinates from the server, then update a map view of those coordinates. To make this realtime, you need to move away from pure polling to pushing.
First, sign up for a Pusher account. Then have your webpage connect to your Pusher app and subscribe to a channel for new coordinates:
<script src="//js.pusher.com/4.0/pusher.min.js"></script>
<script>
var pusher = new Pusher('YOUR_APP_KEY', {
cluster: 'YOUR_APP_CLUSTER'
});
var tracking-records = pusher.subscribe('tracking-records-' + type + '-' + user_id); // Channel specific to this user
tracking-records.bind('new-tracking-record', function(data) {
console.log('A new tracking record with latitude', data.latitude, 'and longitude', data.longitude);
// Update your Google Map view here using data.latitude, data.longitude
});
</script>
Then on your server, identify where the tracking records are created (probably a database insert). At that point, publish the new coordinate to the tracking-records channel. Here's an example in Node.js:
var Pusher = require('pusher');
var pusher = new Pusher({
appId: 'APP_ID',
key: 'APP_KEY',
secret: 'APP_SECRET',
cluster: 'APP_CLUSTER'
});
pusher.trigger(
'tracking-records-' + type + '-' + user_id, // The channel name
'new-tracking-record', // The event type
{latitude: 51, longitude: 3} // The coordinate data
);
For more detailed examples, Pusher have a tutorial on how to track our pizza in realtime with Pusher and Google Maps, and another tutorial on how to build a realtime map using Laravel.