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(-25.109447,29.437706);


   var latlng1 = new google.maps.LatLng(-25.109447,29.437706);


  // 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: 12
,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    styles: [{"featureType": "administrative.country","elementType": "geometry.stroke","stylers": [{"color": "#cccccc"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"hue":"#2c2e33"},{"saturation":7},{"lightness":19},{"visibility":"on"}]},{"featureType":"administrative.locality","elementType":"labels.text","stylers":[{"visibility":"on"},{"saturation":"-3"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#f39247"}]},{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"poi.school","elementType":"geometry.fill","stylers":[{"color":"#f39247"},{"saturation":"0"},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#ff6f00"},{"saturation":"100"},{"lightness":31},{"visibility":"simplified"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#f39247"},{"saturation":"0"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#008eff"},{"saturation":-93},{"lightness":31},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#f3dbc8"},{"saturation":"0"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":-2},{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"hue":"#e9ebed"},{"saturation":-90},{"lightness":-8},{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":10},{"lightness":69},{"visibility":"on"}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":-78},{"lightness":67},{"visibility":"simplified"}]}]
,
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">Welverdiend Safaris</h3>'+
            '<div id="bodyContent">'+
            '<p>'+
                        '<i class="fa fa-map-marker"></i>&nbsp;&nbsp;Welverdiend 24 Gedeelte 36<br />'+                        '<i class="fa fa-mobile"></i>&nbsp;&nbsp;079 494 2882<br />'+            '<i class="fa fa-at"></i>&nbsp;&nbsp;welverdiend@loskop.co.za<br />'+                                    '<i class="fa fa-external-link-square"></i>&nbsp;&nbsp;<a href="https://www.google.co.za/maps/?q=-25.109447,29.437706" 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:"Welverdiend Safaris",
        icon: {
        path: fontawesome.markers.MAP_MARKER,
        scale: 1.3,
        strokeWeight: 0.6,
        strokeColor: '#000',
        strokeOpacity: 1,
        fillColor: '#a5872f',
        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);