travelMap

See the finished project at: https://everettsprojects.com/maps/

For the last three months I have been on a backpacking trip, which is part of the reason why this blog has been so neglected for the past few months. A travel blog hosted at meandmypack.wordpress.com had taken precedence, and I habitually kept that one updated throughout my trip. With all of that over though, I’ve had to find things to do in my time to keep my self from becoming bored and lethargic with life back home in Canada. One such activity is the tying up of loose ends as far as documentation of my trip is concerned, and from early on I had it in my mind to make a nice map of all the places I went. Over time this idea evolved into a whole project in it’s own right, using Google maps and becoming more interactive and feature rich every time my mind drifted back to the idea of it. I couldn’t really spare the time to design it while in Europe, and that probably would have been a waste of the limited time I had there any way. So I stored the idea away and made a promise to my self to figure it out back home. Now some two weeks later, I’ve pulled it off.

To start, I began with the Google Maps API v3 Simple Polylines example code and then added in code for adding in markers to the map. The poly line consists of a large number of latitude and longitude coordinates that I fetched from Google maps using the LatLng Marker plugin available through Google Maps Labs. With a stubbornness that could be mistaken for OCD, I made sure the PolyLine at least vaguely resembled my true route between major destinations by routing them through all of the intermediate stations that the train called at along the way. This was accomplished with the travel report from my Eurail Pass ( I knew I diligently filled it out for a reason), and the Eurail timetables. With these two tools, I could easily go back and find the true route of most of the train travel I did during my trip. Elsewhere when I didn’t travel by train I figured the route out through some combination of memory and Google. The markers for all of the main cities and attractions that I visited were simply made by selectively harvesting those coordinates from the Polyline list and then adding them to their own modified list with extra fields for the associated tag on my blog, and the blurb for the popup info box. I modified the marker code to put a link to the associated content on meandmypack.wordpress.com inside that popup box.  Finally I felt that it would be nice to calculate the distance travelled from the Polyline, which I did with the help of this code.

With all of the main features of the map coded, and a few hours spent finding the geospatial coordinates of my route, I had a decent looking finished product. I spent just a little more time on the layout and design of the page so that some information about the map was presented in a permanent box in the top left hand corner. I’ve also decided to post the final draft of the code below for easy viewing by all interested parties:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Me and My Pack Interactive Route Map</title>
    <link href="/maps/default.css" rel="stylesheet">
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIxpXOSPJWNG7TnhMYq-Q2hPcM7zEQs8g&sensor=false">
    </script>
    <script>
    //Standard Google Maps API code with project specific values
    function initialize() {
      var middleEarth = new google.maps.LatLng(52.01254, 8.2133);
      var mapOptions = {
        zoom: 5,
        center: middleEarth,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      //The Polyline coordinates. Lots and Lots of them.
      var routeCoordinates = [
          new google.maps.LatLng(51.51120, -0.11978),   //London
          new google.maps.LatLng(53.95795, -1.0934),
          new google.maps.LatLng(54.9681, -1.6173),
          new google.maps.LatLng(55.7743, -2.0110),
          new google.maps.LatLng(55.95324, -3.18827),   //Edinburgh
          new google.maps.LatLng(55.982, -3.616),
          new google.maps.LatLng(56.077, -3.923),
          new google.maps.LatLng(56.1387, -3.9179),     //Wallace monument
          new google.maps.LatLng(56.17843, -4.3821),    //Aberfoyle
          new google.maps.LatLng(56.23381, -4.4290),    //loch katrine
          new google.maps.LatLng(56.2440, -4.2158),
          new google.maps.LatLng(56.18932, -4.0510),    //doune
          new google.maps.LatLng(56.077, -3.923),
          new google.maps.LatLng(55.982, -3.616),
          new google.maps.LatLng(55.95324, -3.18827),   //Edinburgh
          new google.maps.LatLng(55.85931, -4.25836),
          new google.maps.LatLng(54.9617, -5.0142),
          new google.maps.LatLng(55.0317, -5.1047),
          new google.maps.LatLng(55.0271, -5.3356),
          new google.maps.LatLng(54.7595, -5.6473),
          new google.maps.LatLng(54.5971, -5.930),      //Belfast
          new google.maps.LatLng(54.852, -5.811),
          new google.maps.LatLng(54.982, -5.996),
          new google.maps.LatLng(55.058, -6.062),
          new google.maps.LatLng(55.200, -6.239),
          new google.maps.LatLng(55.24881, -6.48898),   //Giants causeway
          new google.maps.LatLng(54.745, -6.23),
          new google.maps.LatLng(54.5971, -5.930),      //Belfast
          new google.maps.LatLng(54.0011, -6.4129),
          new google.maps.LatLng(53.34980, -6.26028),   //Dublin
          new google.maps.LatLng(53.435, -7.941),
          new google.maps.LatLng(53.27055, -9.0566),    //Galway
          new google.maps.LatLng(53.271, -8.918),
          new google.maps.LatLng(53.207, -8.868),
          new google.maps.LatLng(53.139, -8.931),
          new google.maps.LatLng(53.114, -9.148),
          new google.maps.LatLng(53.016, -9.375),
          new google.maps.LatLng(52.97184, -9.42649),   //Cliffs of Moher
          new google.maps.LatLng(53.016, -9.375),
          new google.maps.LatLng(53.114, -9.148),
          new google.maps.LatLng(53.139, -8.931),
          new google.maps.LatLng(53.207, -8.868),
          new google.maps.LatLng(53.271, -8.918),
          new google.maps.LatLng(53.27055, -9.0566),    //Galway
          new google.maps.LatLng(53.435, -7.941),
          new google.maps.LatLng(53.34980, -6.26028),   //Dublin
          new google.maps.LatLng(53.3076, -4.6310),
          new google.maps.LatLng(53.204, -4.141),
          new google.maps.LatLng(53.287, -3.716),   
          new google.maps.LatLng(53.1968, -2.8798),
          new google.maps.LatLng(51.5901, -2.9984),
          new google.maps.LatLng(51.572, -2.649),
          new google.maps.LatLng(51.44877, -2.5800),
          new google.maps.LatLng(51.37737, -2.35709),       //Bath
          new google.maps.LatLng(51.0705, -1.8066),         //Salisbury
          new google.maps.LatLng(51.17885, -1.82618),       //Stonehenge
          new google.maps.LatLng(51.0705, -1.8066),         //Salisbury
          new google.maps.LatLng(51.53216, -0.12680),   //London
          new google.maps.LatLng(51.1086, 1.2870),
          new google.maps.LatLng(50.9143, 1.805),
          new google.maps.LatLng(50.62706, 3.0853),
          new google.maps.LatLng(50.8354, 4.3355),          //Brussels
          new google.maps.LatLng(51.2094, 3.2246),          //Bruges
          new google.maps.LatLng(50.8453, 4.3567),          //Brussels
          new google.maps.LatLng(51.2191, 4.421),       //Antwerp
          new google.maps.LatLng(51.809, 4.658),
          new google.maps.LatLng(52.0598, 4.3099),      //Den Haag
          new google.maps.LatLng(52.3879, 4.6386),      //Haarlem
          new google.maps.LatLng(52.3786, 4.9004),      //Amsterdam
          new google.maps.LatLng(52.3144, 5.113),
          new google.maps.LatLng(52.549, 5.639),
          new google.maps.LatLng(52.514, 6.079),        //Zwolle
          new google.maps.LatLng(53.2173, 6.564),       //Groningen
          new google.maps.LatLng(53.2316, 7.4657),
          new google.maps.LatLng(53.0827, 8.815),
          new google.maps.LatLng(53.5544, 10.005),      //Hamburg
          new google.maps.LatLng(53.8679, 10.6700),
          new google.maps.LatLng(54.502, 11.228),
          new google.maps.LatLng(54.652, 11.36),
          new google.maps.LatLng(54.7671, 11.8772),
          new google.maps.LatLng(55.6388, 12.0887),
          new google.maps.LatLng(55.6730, 12.564),      //Copenhagen
          new google.maps.LatLng(55.9155, 12.5007),
          new google.maps.LatLng(55.9641, 12.5333),     //Humlebaek
          new google.maps.LatLng(55.9155, 12.5007),
          new google.maps.LatLng(55.6730, 12.564),      //Copenhagen
          new google.maps.LatLng(55.6314, 12.6768),
          new google.maps.LatLng(55.5655, 12.8917),
          new google.maps.LatLng(55.7048, 13.1871),
          new google.maps.LatLng(56.0443, 12.6954),
          new google.maps.LatLng(56.5018, 12.9995),
          new google.maps.LatLng(56.6692, 12.8658),
          new google.maps.LatLng(57.7104, 11.9819),     //Gothenburg
          new google.maps.LatLng(58.2876, 12.2990),
          new google.maps.LatLng(58.9134, 11.9315),
          new google.maps.LatLng(58.9659, 11.552),
          new google.maps.LatLng(59.1206, 11.3859),
          new google.maps.LatLng(59.2857, 11.1183),
          new google.maps.LatLng(59.4319, 10.6565),
          new google.maps.LatLng(59.7195, 10.8347),
          new google.maps.LatLng(59.9095, 10.7598),     //Oslo
          new google.maps.LatLng(59.913, 10.626),
          new google.maps.LatLng(59.7407, 10.2042),
          new google.maps.LatLng(59.7616, 9.919),
          new google.maps.LatLng(60.052, 10.050),
          new google.maps.LatLng(60.1688, 10.2490),
          new google.maps.LatLng(60.4321, 9.4734),
          new google.maps.LatLng(60.6991, 8.9698),
          new google.maps.LatLng(60.6261, 8.5623),
          new google.maps.LatLng(60.5356, 8.2068),
          new google.maps.LatLng(60.4989, 8.0399),
          new google.maps.LatLng(60.5607, 7.5869),
          new google.maps.LatLng(60.6019, 7.5042),
          new google.maps.LatLng(60.7352, 7.1229),
          new google.maps.LatLng(60.6293, 6.4098),
          new google.maps.LatLng(60.5869, 5.8148),
          new google.maps.LatLng(60.455, 5.736),
          new google.maps.LatLng(60.3894, 5.3354),      //Bergen
          new google.maps.LatLng(60.455, 5.736),
          new google.maps.LatLng(60.5869, 5.8148),
          new google.maps.LatLng(60.6293, 6.4098),
          new google.maps.LatLng(60.7352, 7.1229),
          new google.maps.LatLng(60.6019, 7.5042),
          new google.maps.LatLng(60.6019, 7.5042),
          new google.maps.LatLng(60.5607, 7.5869),
          new google.maps.LatLng(60.4989, 8.0399),
          new google.maps.LatLng(60.5356, 8.2068),
          new google.maps.LatLng(60.6261, 8.5623),
          new google.maps.LatLng(60.6991, 8.9698),
          new google.maps.LatLng(60.4321, 9.4734),
          new google.maps.LatLng(60.1688, 10.2490),
          new google.maps.LatLng(60.052, 10.050),
          new google.maps.LatLng(59.7616, 9.919),
          new google.maps.LatLng(59.7407, 10.2042),
          new google.maps.LatLng(59.913, 10.626),
          new google.maps.LatLng(59.9095, 10.7598),     //Oslo
          new google.maps.LatLng(60.189, 12.005),
          new google.maps.LatLng(59.6533, 12.5912),
          new google.maps.LatLng(59.3776, 13.4994),
          new google.maps.LatLng(59.4182, 13.6920),
          new google.maps.LatLng(59.2292, 14.4394),
          new google.maps.LatLng(59.0668, 15.1098),
          new google.maps.LatLng(58.9964, 16.2101),
          new google.maps.LatLng(59.1790, 17.6459),
          new google.maps.LatLng(59.3311, 18.0551),     //Stockholm
          new google.maps.LatLng(59.3363, 18.2067),
          new google.maps.LatLng(59.3794, 18.2948),
          new google.maps.LatLng(59.3594, 18.4460),
          new google.maps.LatLng(59.3970, 18.4426),
          new google.maps.LatLng(59.4377, 18.3880),
          new google.maps.LatLng(59.4482, 18.4287),
          new google.maps.LatLng(59.4769, 18.4407),
          new google.maps.LatLng(59.5045, 18.479),
          new google.maps.LatLng(59.5757, 18.680),
          new google.maps.LatLng(59.7195, 19.115),
          new google.maps.LatLng(59.759, 19.319),
          new google.maps.LatLng(60.068, 19.925),
          new google.maps.LatLng(60.09231, 19.9279),
          new google.maps.LatLng(60.068, 19.925),
          new google.maps.LatLng(60.0130, 19.8542),
          new google.maps.LatLng(59.807, 19.878),
          new google.maps.LatLng(59.353, 22.72),
          new google.maps.LatLng(60.146, 25.001),
          new google.maps.LatLng(60.16780, 24.9528),    //Helsinki
          new google.maps.LatLng(52.51630, 13.37769),   //Berlin
          new google.maps.LatLng(51.0398, 13.7324),
          new google.maps.LatLng(50.901, 14.221),
          new google.maps.LatLng(50.7726, 14.2008),
          new google.maps.LatLng(50.6595, 14.0448),
          new google.maps.LatLng(50.5093, 14.0601),
          new google.maps.LatLng(50.0826, 14.4353),     //Prague
          new google.maps.LatLng(50.0309, 15.7563),
          new google.maps.LatLng(49.8967, 16.4462),
          new google.maps.LatLng(49.1898, 16.6130),
          new google.maps.LatLng(48.7545, 16.8954),
          new google.maps.LatLng(48.17483, 16.33662),   //Vienna
          new google.maps.LatLng(48.2082, 15.6257),
          new google.maps.LatLng(48.2896, 14.2928),
          new google.maps.LatLng(47.8129, 13.0470),
          new google.maps.LatLng(48.1405, 11.5569),     //Munich
          new google.maps.LatLng(47.9854, 10.1867),
          new google.maps.LatLng(47.54470, 9.6803),
          new google.maps.LatLng(47.5509, 9.7194),
          new google.maps.LatLng(47.5155, 9.7557),
          new google.maps.LatLng(47.5035, 9.7419),
          new google.maps.LatLng(47.4234, 9.3690),
          new google.maps.LatLng(47.5002, 8.7228),
          new google.maps.LatLng(47.3784, 8.5382),      //Zurich
          new google.maps.LatLng(47.2958, 8.5636),
          new google.maps.LatLng(47.1736, 8.5156),
          new google.maps.LatLng(47.1801, 8.4634),
          new google.maps.LatLng(47.0503, 8.3093),
          new google.maps.LatLng(46.762, 8.139),
          new google.maps.LatLng(46.7264, 8.1843),
          new google.maps.LatLng(46.7548, 8.0368),
          new google.maps.LatLng(46.6913, 7.8701),      //Interlaken
          new google.maps.LatLng(46.5989, 7.9081),
          new google.maps.LatLng(46.5753, 7.9390),
          new google.maps.LatLng(46.5844, 7.9601),
          new google.maps.LatLng(46.5745, 7.9742),      //Eiger trail
          new google.maps.LatLng(46.62418, 8.0337),
          new google.maps.LatLng(46.6328, 7.9009),
          new google.maps.LatLng(46.6913, 7.8701),      //Interlaken
          new google.maps.LatLng(46.7547, 7.6290),
          new google.maps.LatLng(46.9496, 7.4396),
          new google.maps.LatLng(46.8028, 7.1511),
          new google.maps.LatLng(46.5161, 6.6290),
          new google.maps.LatLng(46.5178, 6.5081),
          new google.maps.LatLng(46.3851, 6.2366),
          new google.maps.LatLng(46.21013, 6.1422),     //Geneva
          new google.maps.LatLng(45.9021, 6.1204),      //Annecy
          new google.maps.LatLng(45.6878, 5.9084),
          new google.maps.LatLng(45.802, 5.853),
          new google.maps.LatLng(45.95342, 5.3423),
          new google.maps.LatLng(45.7605, 4.8613),
          new google.maps.LatLng(43.9412, 4.8049),
          new google.maps.LatLng(43.6849, 4.6327),
          new google.maps.LatLng(43.5801, 4.9996),
          new google.maps.LatLng(43.4879, 5.2307),
          new google.maps.LatLng(43.3042, 5.3838),      //Marseille
          new google.maps.LatLng(43.4879, 5.2307),
          new google.maps.LatLng(43.5801, 4.9996),
          new google.maps.LatLng(43.6849, 4.6327),
          new google.maps.LatLng(43.8329, 4.3658),
          new google.maps.LatLng(43.6050, 3.8816),
          new google.maps.LatLng(43.3370, 3.2190),
          new google.maps.LatLng(43.1899, 3.0065),
          new google.maps.LatLng(42.544, 2.848),
          new google.maps.LatLng(42.2649, 2.9683),
          new google.maps.LatLng(41.9784, 2.8171),
          new google.maps.LatLng(41.7753, 2.7407),
          new google.maps.LatLng(41.548, 2.227),
          new google.maps.LatLng(41.3795, 2.1418),      //Barcelona
          new google.maps.LatLng(41.548, 2.227),
          new google.maps.LatLng(41.7753, 2.7407),
          new google.maps.LatLng(41.9784, 2.8171),
          new google.maps.LatLng(42.2649, 2.9683),
          new google.maps.LatLng(42.544, 2.848),
          new google.maps.LatLng(43.1899, 3.0065),
          new google.maps.LatLng(43.2172, 2.3502),
          new google.maps.LatLng(43.61116, 1.45425),
          new google.maps.LatLng(43.7035, 1.8137),
          new google.maps.LatLng(43.5995, 2.2302),      //Castres
          new google.maps.LatLng(43.7035, 1.8137),
          new google.maps.LatLng(43.61116, 1.45425),
          new google.maps.LatLng(44.0139, 1.3405),
          new google.maps.LatLng(44.2079, 0.6214),
          new google.maps.LatLng(44.8258, -0.5553),     //Bordeaux
          new google.maps.LatLng(44.6222, -1.002),
          new google.maps.LatLng(44.6585, -1.1653),
          new google.maps.LatLng(44.65592, -1.25991),   //Cap ferret
          new google.maps.LatLng(44.6585, -1.1653),
          new google.maps.LatLng(44.6222, -1.002),
          new google.maps.LatLng(44.8258, -0.5553),     //Bordeaux
          new google.maps.LatLng(44.9918, -0.440),
          new google.maps.LatLng(45.7482, -0.6182),
          new google.maps.LatLng(46.1528, -1.1431),
          new google.maps.LatLng(46.409, -0.892),
          new google.maps.LatLng(47.2182, -1.5363),
          new google.maps.LatLng(48.1027, -1.6725),     //Rennes
          new google.maps.LatLng(48.6357, -1.5112),     //Mont Saint Michel
          new google.maps.LatLng(48.1027, -1.6725),
          new google.maps.LatLng(47.99541, 0.1911),
          new google.maps.LatLng(48.8778, 2.3605),      //Paris gare de lest
          new google.maps.LatLng(49.2588, 4.0241),
          new google.maps.LatLng(49.1096, 6.1771),
          new google.maps.LatLng(49.5994, 6.1355),      //Luxembourg
          new google.maps.LatLng(49.1096, 6.1771),
          new google.maps.LatLng(48.5851, 7.7336),      //Strasbourg    
          new google.maps.LatLng(48.47824, 7.9475),
          new google.maps.LatLng(48.9936, 8.4013),
          new google.maps.LatLng(48.7848, 9.1827),      //Stuttgart
          new google.maps.LatLng(48.9936, 8.4013),
          new google.maps.LatLng(50.0507, 8.5709),
          new google.maps.LatLng(50.9433, 6.9587),      //Cologne
          new google.maps.LatLng(51.2196, 6.7936),
          new google.maps.LatLng(51.4291, 6.7765),
          new google.maps.LatLng(51.53123, 7.1659),
          new google.maps.LatLng(51.9564, 7.6352),
          new google.maps.LatLng(52.2759, 7.4342),
          new google.maps.LatLng(52.2092, 5.9692),
          new google.maps.LatLng(52.1541, 5.3728),
          new google.maps.LatLng(52.3786, 4.9004),      //Amsterdam
          new google.maps.LatLng(52.3879, 4.6386),      //Haarlem
          new google.maps.LatLng(52.0598, 4.3099),      //Den Haag
          new google.maps.LatLng(51.809, 4.658),
          new google.maps.LatLng(51.2191, 4.421),       //Antwerp
          new google.maps.LatLng(50.8453, 4.3567),          //Brussels
          new google.maps.LatLng(50.8354, 4.3355),          //Brussels
          new google.maps.LatLng(50.62706, 3.0853),
          new google.maps.LatLng(48.8822, 2.3563)       //Paris gare du nord
      ];

      var routePath = new google.maps.Polyline({
        path: routeCoordinates,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });

      //Use the Polyline to calculate the distance travelled for later
      document.getElementById("distanceTravelled").innerHTML = Math.round(routePath.inKm())+' km';

      //Add the Polyline to the map canvas
      routePath.setMap(map);

      //variables and list for the marker's to link back to the travel blog
      var tagURL = 'http://meandmypack.wordpress.com/tag/';

      var mainCities = [
          [51.51120, -0.11978, 'london', 'London'],
          [55.95324, -3.18827, 'edinburgh', 'Edinburgh'],
          [56.23381, -4.4290, 'highlands', 'Scottish Highlands'],
          [54.5971, -5.930, 'belfast', 'Belfast'],
          [55.24881, -6.48898, 'giants-causeway', 'Giant\'s Causeway'],
          [53.27055, -9.0566, 'galway', 'Galway'],
          [52.97184, -9.42649, 'cliffs-of-moher', 'Cliffs of Moher'],
          [53.34980, -6.26028, 'dublin', 'Dublin'],
          [51.37737, -2.35709, 'bath', 'Bath'],
          [51.0705, -1.8066, 'salisbury', 'Salisbury'],
          [51.17885, -1.82618, 'stonehenge', 'Stonehenge'],
          [51.2094, 3.2246, 'bruges', 'Bruges'],
          [50.8354, 4.3355, 'brussels', 'Brussels'],
          [52.3786, 4.9004, 'amsterdam', 'Amsterdam'],
          [53.2173, 6.564, 'groningen', 'Groningen'],
          [53.5544, 10.005, 'hamburg', 'Hamburg'],
          [55.6730, 12.564, 'copenhagen', 'Copenhagen'],
          [57.7104, 11.9819, 'gothenburg', 'Gothenburg'],
          [59.9095, 10.7598, 'oslo', 'Oslo'],
          [60.3894, 5.3354, 'bergen', 'Bergen'],
          [59.3311, 18.0551, 'stockholm', 'Stockholm'],
          [60.16780, 24.9528, 'helsinki', 'Helsinki'],
          [52.51630, 13.37769, 'berlin', 'Berlin'],
          [50.0826, 14.4353, 'prague', 'Prague'],
          [48.17483, 16.33662, 'vienna', 'Vienna'],
          [48.1405, 11.5569, 'munich', 'Munich'],
          [47.3784, 8.5382, 'zurich', 'Zurich'],
          [46.6913, 7.8701, 'interlaken', 'Interlaken'],
          [46.5745, 7.9742, 'eiger-trail', 'The Eiger Trail'],
          [45.9021, 6.1204, 'annecy', 'Annecy'],
          [43.3042, 5.3838, 'marseille', 'Marseille'],
          [41.3795, 2.1418, 'barcelona', 'Barcelona'],
          [43.5995, 2.2302, 'castres', 'Castres'],
          [44.8258, -0.5553, 'bordeaux', 'Bordeaux'],
          [44.65592, -1.25991, 'cap-ferret', 'Arcachon and Cap Ferret'],
          [48.1027, -1.6725, 'rennes', 'Rennes'],
          [48.6357, -1.5112, 'mont-saint-michel', 'Mont Saint Michel'],
          [49.5994, 6.1355, 'luxembourg', 'Luxembourg'],
          [48.5851, 7.7336, 'strasbourg', 'Strasbourg'],
          [48.7848, 9.1827, 'stuttgart', 'Stuttgart'],
          [50.9433, 6.9587, 'cologne', 'Cologne'],
          [52.3879, 4.6386, 'haarlem', 'Haarlem'],
          [48.8822, 2.3563, 'paris', 'Paris']         
      ];

      var markers = [];

      //Stick those markers into the map canvas
      for (var i = 0; i < mainCities.length; i++) {
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(mainCities[i][0], mainCities[i][1]),
          map: map
        });
        var infowindow = new google.maps.InfoWindow({
          content: '<a href="'+tagURL+mainCities[i][2]+'/" target="blank">'+mainCities[i][3]+'</a>'
        });

        makeInfoWindowEvent(map, infowindow, marker);

        markers.push(marker);
      }
    }

    //The info window function from http://jsfiddle.net/yV6xv/161/
    function makeInfoWindowEvent(map, infowindow, marker) {
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
    }

    //The polyline distance code from https://groups.google.com/forum/#!topic/google-maps-js-api-v3/Op87g7lBotc
    google.maps.LatLng.prototype.kmTo = function(a){
          var e = Math, ra = e.PI/180;
          var b = this.lat() * ra, c = a.lat() * ra, d = b - c;
          var g = this.lng() * ra - a.lng() * ra;
          var f = 2 * e.asin(e.sqrt(e.pow(e.sin(d/2), 2) + e.cos(b) * e.cos(c) * e.pow(e.sin(g/2), 2)));
          return f * 6378.137;
    }

    google.maps.Polyline.prototype.inKm = function(n){
          var a = this.getPath(n), len = a.getLength(), dist = 0;
            for(var i=0; i<len-1; i++){
            dist += a.getAt(i).kmTo(a.getAt(i+1));
          }
          return dist;
    }


    google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
        <div id="map-canvas" style="float:left;width:100%;height:100%;"></div>
        <div id="info-panel" style="float:right;text-align:left;">
        <div style="margin:10px;border-width:2px;float:center;text-align:center;">
          <h3>Me and My Pack Interactive Route Map</h3>
          <b>Distance Travelled: </b>
          <div id="distanceTravelled"></div><br>
          <a href="http://meandmypack.wordpress.com" target="blank">meandmypack.wordpress.com</a><br>
          <a href="/" target="blank">everettsprojects.com</a>
        </div>
  </body>
</html>
```

**default.css**
```css
html, body {
  background-color:#b0c4de;
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas, #map_canvas {
  height: 100%;
}

@media print {
  html, body {
    height: auto;
  }

  #map-canvas, #map_canvas {
    height: 650px;
  }
}

#info-panel {
  width: 25%;
  font-size: 12px;
  position: absolute;
  top: 10px;
  left: 90px;
  background-color: #fff;
  padding: 2px;
  border: 1px solid #999;
  background: rgba(255, 255, 255, 1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: outset 1px #a1b5cf;
}