title: 1 origin, multiple destinations, same google map v3 - error message
body: <p>As the title mentions, I'm trying to create one map that presents a single origin with directions rendered for multiple destinations (not waypoints). I managed to achieve this with tons of duplicate code. However, I want to consolidate the code into one reusable javascript object but having challenges, possibly with proper scoping of things?</p>
  
  <p>Here is the error I encounter: </p>
  
  <pre><code>Uncaught TypeError: Cannot call method 'setDirections' of undefined
  </code></pre>
  
  <p>Javascript code:</p>
  
  <pre><code>google.maps.event.addDomListener(window, 'load', initialize); 
  var directionsDisplay;
  var map;
  var route1 = new route();
  var route2 = new route();
  var route3 = new route();
  var route4 = new route();
  
  function initialize() {
    var austin = new google.maps.LatLng(30.2669, -87.7428);
    var mapOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: austin
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  }
  
  function route() {
    this.directionsService = new google.maps.DirectionsService();
    this.directionsDisplay = new google.maps.DirectionsRenderer();
    this.directionsDisplay.setMap(map);
    //alert(JSON.stringify(this.directionsDisplay));
  
    this.calcRoute = calcRoute;
  
    function calcRoute(end) {
        if (end === undefined) {
            end = "New York";
        }
        var start = document.getElementById("start").value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        this.directionsService.route(request, function (result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                alert(JSON.stringify(this.directionsService));
                this.directionsDisplay.setDirections(result);
            }
        });
    }
  }
  </code></pre>
  
  <p>HTML looks something like this:</p>
  
  <pre><code>&lt;select id="loc1" onchange="route1.calcRoute(getElementById('loc1').value);"&gt;
  &lt;option value="123 Anywhere lane NY"&gt;my Address&lt;/option&gt;
  </code></pre>
  
  <p>How do I resolve the error and display one map with one origin and multiple endpoints?</p>