var directionDisplay, map;
var directionsService = new google.maps.DirectionsService();
var geocoder = new google.maps.Geocoder();
function initialize() {
  // set the default center of the map
  			var latlng = new google.maps.LatLng(-24.964989, 29.278534);


   var latlng1 = new google.maps.LatLng(-24.964989, 29.278534);


  // set route options (draggable means you can alter/drag the route in the map)
  var rendererOptions = { draggable: true };
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  // set the display options for the map
  var myOptions = {
    zoom: 14
,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    styles: [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}]
,
scrollwheel: false
  };

  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

    var contentString1 = '<div id="content1">'+
            '<div id="siteNotice1">'+
            '</div>'+
            '<h3 id="Heading1" class="firstHeading">Valleys Best</h3>'+
            '<div id="bodyContent">'+
            '<p>'+
                        '<i class="fa fa-map-marker"></i>&nbsp;&nbsp;Plot G16, Rooibokkop, Marble Hall, 0450<br />'+                        '<i class="fa fa-mobile"></i>&nbsp;&nbsp;079 694 4925<br />'+            '<i class="fa fa-at"></i>&nbsp;&nbsp;info@valleysbest.co.za<br />'+                        '<i class="fa fa-envelope"></i>&nbsp;&nbsp;PO Box 1308, Marble Hall, 0450<br />'+            '<i class="fa fa-external-link-square"></i>&nbsp;&nbsp;<a href="https://www.google.co.za/maps/?q=-24.964989, 29.278534" target=_blank">View in Google Maps<a/><br />'+            '</p></div>'+
            '</div>';
    var infowindow1 = new google.maps.InfoWindow({
          content: contentString1
    });

    var customMarker1 = new google.maps.Marker({
        position: latlng1,
        map: map,
        title:"Valleys Best",
        icon: {
        path: fontawesome.markers.MAP_MARKER,
        scale: 1.3,
        strokeWeight: 0.6,
        strokeColor: '#000',
        strokeOpacity: 1,
        fillColor: '#00a651',
        fillOpacity: 1,
        anchor: new google.maps.Point(20,0),
          }
    }); 
customMarker1.addListener('click', function() {
          infowindow1.open(map, customMarker1);
        });

	


  // bind the map to the directions
  directionsDisplay.setMap(map);
  // point the directions to the container for the direction details
  directionsDisplay.setPanel(document.getElementById("directionsPanel"));
 
}
function calcRoute() {
  // get the travelmode, startpoint and via point from the form   
  var travelMode = $('input[name="travelMode"]:checked').val();
  var start = $("#routeStart").val();
  var end = $("#routeEnd").val();
  // compose a array with options for the directions/route request
  var request = {
    origin: start,
    destination: end,
    unitSystem: google.maps.UnitSystem.METRIC,
    travelMode: google.maps.DirectionsTravelMode[travelMode]
  };
  // call the directions API
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      // directions returned by the API, clear the directions panel before adding new directions
      $('#directionsPanel').empty();
      // display the direction details in the container
      directionsDisplay.setDirections(response);
    } else {
      // alert an error message when the route could nog be calculated.
      if (status == 'ZERO_RESULTS') {
        alertify.alert('No route could be found between the origin and destination.');
      } else if (status == 'UNKNOWN_ERROR') {
        alertify.alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
      } else if (status == 'REQUEST_DENIED') {
        alertify.alert('This webpage is not allowed to use the directions service.');
      } else if (status == 'OVER_QUERY_LIMIT') {
        alertify.alert('The webpage has gone over the requests limit in too short a period of time.');
      } else if (status == 'NOT_FOUND') {
        alertify.alert('At least one of the origin, destination, or waypoints could not be geocoded.');
      } else if (status == 'INVALID_REQUEST') {
        alertify.alert('The DirectionsRequest provided was invalid.');         
      } else {
        alertify.alert("There was an unknown error in your request. Requeststatus: nn"+status);
      }
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);