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(-23.879282, 29.441698); var latlng1 = new google.maps.LatLng(-23.879282, 29.441698); // 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 customMarker1 = new google.maps.Marker({ position: latlng1, map: map, title:"Abundance Moringa", icon: { path: fontawesome.markers.MAP_MARKER, scale: 1.3, strokeWeight: 0.6, strokeColor: '#000', strokeOpacity: 1, fillColor: '#778911', 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);