Javascript/jquery Google Maps Routes Not Found

I have an application which displays postcodes from a database, when a button is clicked the postcodes are geocoded and displayed as markers on a Google map in a pop up window. I'm

Solution 1:

route1 and route2 are empty. The API doesn't know how to create a route from "" to "".

Once I fix that (to use post1 and post2 which contain the postcodes), I get a javascript error: Uncaught ReferenceError: directionsDisplay is not defined.

Fixing that shows me a route.

proof of concept fiddle

code snippet:

$(document).ready(function() {
  var directionsDisplay;
  $(".openMap").click(function() {

    var directionsService = new google.maps.DirectionsService;
    var mapLocation = $(this).prev().prev().prev().text();
    var secondMarker = $(this).prev().prev().text();
    window.markers = [];
    var geocoder = new google.maps.Geocoder();
    var mapOptions = {
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    geocoder.geocode({
      address: mapLocation
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

        map.setCenter(results[0].geometry.location);

        directionsDisplay = new google.maps.DirectionsRenderer({
          map: map
        });
        directionsDisplay.setMap(map);

        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
          title: "Departure Location"
        });
        markers.push(marker);
        $('#route1').text(results[0].geometry.location);
      }

    });
    var geocoder2 = new google.maps.Geocoder();

    geocoder.geocode({
      address: secondMarker
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

        var marker2 = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
          title: "Destination Location"
        });
        markers.push(marker2);
        $('#route2').text(results[0].geometry.location);

        var bounds = new google.maps.LatLngBounds();
        for (var i = 0; i < markers.length; i++) {
          bounds.extend(markers[i].getPosition());
        }
        map.fitBounds(bounds);
      }
    });
    console.log("post1:" + $('.post1').text());
    console.log("post2:" + $('.post2').text());
    directionsService.route({
      origin: $('.post1').text(),
      destination: $('.post2').text(),
      travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        if (!directionsDisplay || !directionsDisplay.getMap || (directionsDisplay.getMap() == null)) {
          directionsDisplay = new google.maps.DirectionsRenderer({
            map: map
          });
          directionsDisplay.setMap(map);
        }
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
    $("#map").dialog({
      title: "Lift Location ",
      height: 500,
      width: 500,
      modal: true
    });
    $(".selector").dialog({
      resizeStop: function(event, ui) {
        google.maps.event.trigger(map, 'resize');
      }
    });
    $(".selector").dialog({
      open: function(event, ui) {
        google.maps.event.trigger(map, 'resize');
      }
    });

  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"  /><scriptsrc="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script><scriptsrc="https://maps.google.com/maps/api/js"></script><divid="map"style="display: none;"></div><spanclass='post1'>G1 3SL</span><spanclass='post2'>G1 2AF</span><br/><buttonclass='openMap'>View On Map</button><br/><spanid="route1"></span><spanid="route2"></span>