map-output.html

﻿<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
   var coordinates = [
[1,43.610001,3.870000],
[2,44.520000,3.480000],
[3,45.799999,3.250000],
[4,47.410000,2.930000],
[5,48.860001,2.340000],
];
   var edges = [
[1, 2],
[2, 3],
[3, 4],
[4, 5],
];

	map_center = [46.468133, 2.351074]
	
  function initialize() {
  
    // Create map and center it
    var latlng = new google.maps.LatLng(map_center[0], map_center[1]);
    var myOptions = {
      zoom: 6,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
	
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  
	// Create markers
	var markers = [];
	
	// Create the effective markers
	for (var x in coordinates){
		markers[coordinates[x][0]] = 
			new google.maps.Marker({
				position: new google.maps.LatLng(coordinates[x][1], coordinates[x][2]),
				title: "" + coordinates[x][0]
			});
	}
  
    for (var m in markers){
		markers[m].setMap(map);
	}
		
	
	// Create paths
	var paths = [];
	
	for (var x in edges)
	{
	  var path = new google.maps.Polyline({
		path: [markers[edges[x][0]].getPosition(), markers[edges[x][1]].getPosition()],
		strokeColor: "#0000FF",
		strokeOpacity: 0.7,
		strokeWeight: 4
	  });
	  
	  paths.push(path);
	}

	for (var p in paths)
	{
		paths[p].setMap(map);
	}
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>