Travel

An Interactive Route Map for my Travel Blog

An Interactive Route Map for my Travel Blog

travelMap

See the finished project at: http://everett.x10.mx/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 this 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="http://everettsprojects.com" target="blank">everettsprojects.com</a>
    	</div>
  </body>
</html>

default.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;
}
Posted by Everett in Programming, Web Applications, 0 comments