var map;
var markers;

function initialize() {
  markers = [];

   var mapOptions = { zoom: 5,
     center: new google.maps.LatLng(52, 8),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };

  map = new google.maps.Map(document.getElementById('mapPanel'), mapOptions);
  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function useResult(response, stat) {
  markers[1].setTitle(response.rows[0].elements[0].distance.text);

  document.getElementById('routeStart').innerHTML=response.originAddresses;
  document.getElementById('routeEnd').innerHTML=response.destinationAddresses;
  document.getElementById('routeLength').innerHTML=
     response.rows[0].elements[0].distance.text;
  document.getElementById('routeTime').innerHTML=
     response.rows[0].elements[0].duration.text;
}

function placeMarker(location) {
  if (markers.length >= 2 && markers[0] !== null && markers[1] !== null) {
    for (var i = 0; i < markers.length; ++i) {
      markers[i].setMap(null);
    }
    markers = [];
  }

  var marker = new google.maps.Marker({ position: location, map: map });
  markers.push(marker);

  if (markers.length === 2) {
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix({
      destinations : [ markers[1].getPosition() ],
      origins : [ markers[0].getPosition() ],
      travelMode : google.maps.TravelMode.DRIVING
    }, useResult);
  }
}