Displaying Live Location Points & Tracks with JavaScript & Google Maps and PubNub

1.html

<script src="http://cdn.pubnub.com/pubnub-3.7.1.min.js"></script>
<link rel="stylesheet"
      href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

10.js

map = new google.maps.Map(document.getElementById('map-canvas'), {
  zoom: 15,
  center: {lat: lat, lng : lng, alt: 0}
});

map_marker = new google.maps.Marker({position: {lat: lat, lng: lng}, map: map});
map_marker.setMap(map);

11.js

function redraw() {
  map.setCenter({lat: lat, lng : lng, alt: 0})
  map_marker.setPosition({lat: lat, lng : lng, alt: 0});
}

12.js

message: function(message, channel) {
  console.log(message)
  lat = message['lat'];
  lng = message['lng'];
  //custom method
  redraw();
}

13.js

var map;
var map_marker;
var lat = null;
var lng = null;
var lineCoordinatesArray = [];

14.js

pushCoordToArray(lat, lng);
var lineCoordinatesPath = new google.maps.Polyline({
  path: lineCoordinatesArray,
  geodesic: true,
  strokeColor: '#2E10FF',
  strokeOpacity: 1.0,
  strokeWeight: 2
});

lineCoordinatesPath.setMap(map);

2.html

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

3.js

var lat = null;
var lng = null;

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

    lat = position.coords["latitude"];
    lng = position.coords["longitude"];

   console.log(lat, lng);

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

4.css

<style>
  html, body, #map-canvas {
    height: 700px;
    margin: 0px;
    padding: 0px
  }
</style>

5.html

<div id="map-canvas"></div>

6.js

function pubs() {
  ...
}

7.js

pubnub = PUBNUB.init({
  publish_key: 'publish_key',
  subscribe_key: 'subscribe_key'
})

8.js

pubnub.subscribe({
  channel: "mymaps",
  message: function(message, channel) {
    console.log(message)
    lat = message['lat'];
    lng = message['lng'];
    //custom method
    redraw();
  },
  connect: function() {console.log("PubNub Connected")}
})

9.js

pubs();