gpstrack.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>GPS Track Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position:absolute;
        top:0;
        bottom:0;
        width:100%;
      }
    </style>
    <script type="text/javascript" src="https://pubnub.github.io/eon/v/eon/1.1.0/eon.js"></script>
    <link type="text/css" rel="stylesheet" href="https://pubnub.github.io/eon/v/eon/1.1.0/eon.css"/>
  </head>
  <body>
    <div id='map'></div>
    <script>
    var pn = new PubNub({
        subscribeKey: 'sub-c-69614994-585c-11e7-9c9f-02ee2ddab7fe',  // replace with your own sub-key
        ssl : true   
        });
    var channel = 'gps-location';
    var map = eon.map({
        pubnub: pn,
        id: 'map',
        mbId: 'mapbox.streets',
        mbToken: 'pk.eyJ1IjoiZW1iZXh1cyIsImEiOiJjajRiOXZ5NmIwOWNnMzNxcGZ5aTFvMmV6In0.9Cx5PSyhO_TDngSZPalxGA',
        channels: [channel],
        history: true,
        options: {
            zoomAnimation: true,
            zoom:16
            },
        message: function (data) {
            map.setView(data[0].latlng);
            },
        marker: function (latlng) {
            return (new L.Marker(latlng));
            }
        });
    </script>
  </body>
</html>