Displaying Live Location Points & Tracks with JavaScript & MapBox and PubNub

1.html

<script src="http://cdn.pubnub.com/pubnub-3.7.1.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link rel="stylesheet"
      href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />

10.js

var marker = L.marker([lat, lng], {
	icon: L.mapbox.marker.icon({
	  'marker-color': '#f86767'
	})
});
marker.addTo(map);

11.js

message: function(message, channel) {
  console.log(message)
  lat = message['lat'];
  lng = message['lng'];
  map.setView([lat, lng]);
  map_line.addLatLng([lat,lng]);
},

12.js

var map_line;

13.js

map_line = L.polyline([], {color: 'blue'}).addTo(map);

14.js

message: function(message, channel) {
  console.log(message)
  lat = message['lat'];
  lng = message['lng'];
  map_line.addLatLng([lat,lng]);
}

2.js

var lat = null;
var lng = null;

3.js

if (navigator.geolocation) {
  ...
}

4.js

navigator.geolocation.getCurrentPosition(function(position) {
	var locationMarker = null;
	if (locationMarker){
	  // return if there is a locationMarker bug
	  return;
	}

	// sets default position to your position
	lat = position.coords["latitude"];
	lng = position.coords["longitude"];

	},
	function(error) {
	console.log("Error: ", error);
	},
	{
	enableHighAccuracy: true
	}
);

5.js

function pubs() {
  ...
}

6.js

pubnub = PUBNUB.init({
	publish_key: 'publish_key',
	subscribe_key: 'subscribe_key'
})
pubnub.subscribe({
	channel: "mymaps",
	message: function(message, channel) {
		console.log(message)
		lat = message['lat'];
		lng = message['lng'];
	},
	connect: function() {console.log("pubnub connected")}
})

7.js

L.mapbox.accessToken = <your token goes here>

8.js

var map = L.mapbox.map('map', '<your map goes here>');

9.js

map.setView([lat, lng], 17);