anchor.diff:  <script src="https://maps.googleapis.com/maps/api/js?libraries=places" async defer></script>
  +
   
   <input id="address1" class="searchbox">
   <input id="address2" class="searchbox">
  +<input id="address_submit" type="button" value="Get Route">
  +
   <div id="map"></div>
   <div class="row">
   <div class="small-12 columns button-group">
  
positive.code:     activity = new google.maps.places.PlacesService(map);
      google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch)
  
  //directions
      var directionsService = new google.maps.DirectionsService;
      var directionsDisplay = new google.maps.DirectionsRenderer;
  
  
negative.code: 
      directionsDisplay.setMap(map)
  
      function calculateAndDisplayRoute(directionsService, directionsDisplay){
        directionsService.route({
          origin: document.getElementById("address1").value,
          destination: document.getElementById("address2").value,
          travelMode: google.maps.TravelMode.DRIVING
        }, function(response, status){
          if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status)
          }
        });
      }
      var onChangeHandler = function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
          };
  
      document.getElementById('address_submit').addEventListener('click', onChangeHandler);
  
  
  
    }
  
  