title: Google Maps Directions APIv3 with custom Markers
body: <p>I have a google map which calculates a route from point A to point B using the standard <a href="https://developers.google.com/maps/documentation/javascript/examples/directions-simple" rel="nofollow">Directions API</a> with google maps. On this Map I have custom markers which I obtain from a <a href="http://secure.transcommercial.co.za/API/Toll" rel="nofollow">database</a>. I want to know which of these markers intersect with the selected route.</p>
  
  <p>I have created a fiddle with all the necessary code segments, but the map does not seem to generate in JSFiddle :( </p>
  
  <p><a href="http://jsfiddle.net/Fumunchu/94kLnrr7/2/" rel="nofollow">http://jsfiddle.net/Fumunchu/94kLnrr7/2/</a>
  Here is my JavaScript to generate the map and add the markers</p>
  
  <pre><code>var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var lati = -33.9149861;
  var longi = 18.6560594;
  var markers;
  
  function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var chicago = new google.maps.LatLng(lati, longi);
      var mapOptions = {
          zoom: 9,
          center: chicago
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      directionsDisplay.setMap(map);
      markers = $.getJSON("http://secure.transcommercial.co.za/API/Toll", function (data) {
          for (var i = 0; i &lt; ko.toJS(data).length; i++) {
              new google.maps.Marker({
                  animation: google.maps.Animation.DROP,
                  position: new google.maps.LatLng(ko.toJS(data)[i].TollLatitude, ko.toJS(data)[i].TollLongitude),
                  map: map,
                  icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
              });
          }
      });
  
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
              initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
              map.setCenter(initialLocation);
          });
      }
  }
  
  function calcRoute() {
      var start = document.getElementById('start').value;
      var end = document.getElementById('end').value;
      var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function (response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
          }
      });
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>Any advice would be greatly appreciated!</p>