var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

 
 function load() {
    directionsDisplay  = new google.maps.DirectionsRenderer();
	
	
	
   var latlng = new google.maps.LatLng(45.125605,14.527201);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
	  directionsDisplay.setMap(map);
	 // directionsDisplay.setPanel(document.getElementById("upute"))
	 
	
	var contentString = '<div style="font-size:12px"><p>Villa Antonia<br>Mihovila Radića 8<br>51511 Malinska,Otok Krk, Croatia</p></div>';
	var infowindow = new google.maps.InfoWindow({
		content: contentString
	});
	
	// marker
	// --------------
	//var image = 'pin.png';
  	var myLatLng = new google.maps.LatLng(45.12565,14.527601);
  	
	var Marker = new google.maps.Marker({
      position: myLatLng,
      map: map
     
 	 });
	
		//- on click event markera
		google.maps.event.addListener(Marker, 'click', function() {
			infowindow.open(map,Marker);
		});
	
	// --------------
	// kraj markera
	
	/*google.maps.event.addListener(map, 'click', function(event) {
   		placeMarker(event.latLng);
  	});*/

	
var marker='';
	
	function placeMarker(location) {
	  
	   if (marker) {
        marker.setMap(null);
		} 
	  var clickedLocation = new google.maps.LatLng(location);
	  
	  
	 marker = new google.maps.Marker({
		  position: location, 
		  map: map
	  });
	  
	calcRoute(location,"45.975810, 15.997691");
		//alert(location);
	    //map.setCenter(location);
	}
	

  }







function calcRoute(start,end) {
  
  // First, clear out any existing markerArray
  // from previous calculations.
  /*for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }*/

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
 
 /* var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;*/
  
  var request = {
      origin: start,
      destination: end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
   
   if (status == google.maps.DirectionsStatus.OK) {
  
  		var route = response.routes[0];
		var udaljenost = route.legs[0].distance.value;
			udaljenost = (udaljenost/1000);  
	        udaljenost = udaljenost.toFixed(2)
	 	
		var trajanje = route.legs[0].duration.value;
     		trajanje = trajanje/60;
	  	 	trajanje = trajanje.toFixed(0);
	 
	 
	
	  document.getElementById('upute').innerHTML = "Vaša udaljenost: <strong>"+udaljenost+" km</strong><br>Potrebno vrijeme: oko <strong>"+trajanje +" minuta</strong>";
	  
	  directionsDisplay.setDirections(response);
      
    }
  });
  
  
  
  
  
}