diff --git a/index.html b/index.html
index fc04c61..5a39801 100644
--- a/index.html
+++ b/index.html
@@ -74,6 +74,32 @@
       </div>
       <div class="row" id="trainers">
       </div>
+      <div class="row" id="route-planner">
+        <div class="col s12">
+          <ul class="collapsible" data-collapsible="accordion">
+          <li>
+            <div class="collapsible-header"><i class="material-icons">add_location</i>Route Planner</div>
+            <div class="collapsible-body">
+              <ul id="optionsList">
+                <li>
+                  Start recording
+                  <a class="indigo waves-effect waves-light btn" id="start-recording-button">Start</a>
+                </li>
+                <li>
+                  Start recording
+                  <a class="indigo waves-effect waves-light btn" id="stop-recording-button">Stop</a>
+                </li>
+                <li>
+                  <hr />
+                  Undo
+                  <a class="indigo waves-effect waves-light btn" id="undo-button">Undo</a>
+                </li>
+              </ul>
+            </div>
+          </li>
+        </ul>
+        </div>
+      </div>
     </div>
 
     <div class="container" id="submenu">
diff --git a/js/main.js b/js/main.js
index 10ab923..5f6227c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -2,21 +2,24 @@
 
 var socket_io;
 var pokemonActions;
+var routePlannerPoints = [];
+var routePlannerPaths = [];
+var recordingPoints = false;
 
 $(document).ready(function() {
   mapView.init();
   socket_io = io.connect('http://' + document.domain + ':' + location.port + '/event');
-    socket_io.on('connect', function() {
-      console.log('connected!');
-    });
-    socket_io.on('logging', function(msg) {
-      for(var i = 0; i < msg.length; i++) {
-        mapView.log({
-          message: msg[i].output,
-          color: msg[i].color + "-text"
-        });
-      }
-    });
+  socket_io.on('connect', function() {
+    console.log('connected!');
+  });
+  socket_io.on('logging', function(msg) {
+    for(var i = 0; i < msg.length; i++) {
+      mapView.log({
+        message: msg[i].output,
+        color: msg[i].color + "-text"
+      });
+    }
+  });
 
     pokemonActions = function(socket_io){
         var actions = {
@@ -270,6 +273,23 @@ var mapView = {
       self.sortAndShowPokedex(item.data('sort'), item.parent().parent().data('user-id'));
     });
 
+    $('#start-recording-button').click(function(){
+      recordingPoints = true;
+    });
+
+    $('#stop-recording-button').click(function(){
+      recordingPoints = false;
+      self.buildRoutePlannerMenu();
+    });
+
+    $('#undo-button').click(function(){
+      var lastRoutePoint = routePlannerPoints[routePlannerPoints.length - 1];
+      if(lastRoutePoint.path){
+        lastRoutePoint.path.setMap(null);
+      }
+      routePlannerPoints.pop();
+    });
+
   },
   initMap: function() {
     var self = this;
@@ -280,12 +300,12 @@ var mapView = {
       },
       zoom: 8,
       mapTypeId: 'roadmap',
-      styles: [ 
+      styles: [
         { "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "color": "#4f9f92" }, { "visibility": "on" } ] },
         { "featureType": "water", "elementType": "geometry.stroke", "stylers": [ { "color": "#feff95" }, { "visibility": "on" }, { "weight": 1.2 } ] },
         { "featureType": "landscape", "elementType": "geometry", "stylers": [ { "color": "#adff9d" }, { "visibility": "on" } ] },
         { "featureType": "water", "stylers": [ { "visibility": "on" }, { "color": "#147dd9" } ] },
-        { "featureType": "poi", "elementType": "geometry.fill", "stylers": [ { "color": "#d3ffcc" } ] },{ "elementType": "labels", "stylers": [ { "visibility": "off" } ] } 
+        { "featureType": "poi", "elementType": "geometry.fill", "stylers": [ { "color": "#d3ffcc" } ] },{ "elementType": "labels", "stylers": [ { "visibility": "off" } ] }
       ]
     });
     self.placeTrainer();
@@ -415,6 +435,23 @@ var mapView = {
         break;
     }
   },
+  buildRoutePlannerMenu: function() {
+    var self = this,
+      out = '';
+    $("#submenu").show();
+    $('#subtitle').html('Planned Route');
+    var pointsArray = [];
+    $.each(routePlannerPoints, function(index, value){
+      pointsArray[index] = '{ "location" : "'+value.lat+ ', '+value.lng+'"}';
+      if(routePlannerPoints[index].path){
+        routePlannerPoints[index].path.setMap(null);
+      }
+    });
+    var arrayJSON = pointsArray.toString();
+    var subcontent = "<p>Copy and paste this content into your path config file.</p><br/><textarea  onclick='this.focus();this.select()'>["+arrayJSON+"]</textarea>";
+    $('#subcontent').html(subcontent);
+    routePlannerPoints = [];
+  },
   buildTrainerList: function() {
     var self = this,
       users = self.settings.users;
@@ -881,14 +918,41 @@ var mapView = {
               fortType = 'Gym';
               pokemonGuard = 'Guard Pokemon: ' + (self.pokemonArray[fort.guard_pokemon_id - 1].Name || "None") + '<br>' + 'Level: ' + self.getGymLevel(fort.gym_points || 0) + '<br>';
             }
-            var contentString = 'Id: ' + fort.id + '<br>Type: ' + fortType + '<br>' + pokemonGuard + fortPoints;
+            var contentString = 'Id: ' + fort.id + '<br>Type: ' + fortType + '<br>Latitude: ' + fort.latitude + '<br>Longitude: ' + fort.longitude + '<br>' + pokemonGuard + fortPoints;
             self.info_windows[fort.id] = new google.maps.InfoWindow({
               content: contentString
             });
             google.maps.event.addListener(self.forts[fort.id], 'click', (function(marker, content, infowindow) {
               return function() {
-                infowindow.setContent(content);
-                infowindow.open(map, marker);
+                if(!recordingPoints){
+                  infowindow.setContent(content);
+                  infowindow.open(map, marker);
+                } else {
+                  var markerLatitude = this.position.lat();
+                  var markerLongitude = this.position.lng();
+                  if(routePlannerPoints.length >= 1){
+                    var path = [
+                      {
+                        lat: routePlannerPoints[routePlannerPoints.length - 1].lat,
+                        lng: routePlannerPoints[routePlannerPoints.length - 1].lng
+                      },
+                      {
+                        lat: markerLatitude,
+                        lng: markerLongitude
+                      },
+                    ];
+                    var routePlannerPath = new google.maps.Polyline({
+                      map: self.map,
+                      path: path,
+                      geodisc: true,
+                      strokeColor: self.pathColors[12],
+                      strokeWeight: 2
+                    });
+                    routePlannerPoints.push({lat: markerLatitude, lng: markerLongitude, path: routePlannerPath});
+                  } else {
+                    routePlannerPoints.push({lat: markerLatitude, lng: markerLongitude});
+                  }
+                }
               };
             })(self.forts[fort.id], contentString, self.info_windows[fort.id]));
           }