Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tript - Plan route</title>
    <?php include "Head.html" ?>
  <link href="./css/googlemap.css" rel="stylesheet">
  <link href="./css/directions.css" rel="stylesheet">
  </head>

  <body>
    <?php include "Navbar.html" ?>

    <div id="floating-panel">
    <form>
    <b>Start: </b>
        <input type="text" name="Start" id="start"/>
    <b>Destination: </b>
        <input type="text" name="End" id="end"/>
        <input id="geocodebut" type="button" value="Geocode"/>
        <input id="parkingbut" type="button" value="Find parking spot"/>
        <input id="submit" type="button" value="Plan route"/>
    </form>
    </div>
    <div id="map"></div>

    <script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: 52.35, lng: 5.65}
        });
        directionsDisplay.setMap(map);

        var geocoder = new google.maps.Geocoder();
        var parkingspot = function () {
            retrieveParking(geocoder, map);
        };
        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };

        document.getElementById('geocodebut').addEventListener('click', function() {
          geocodeAddress(geocoder, map);
        });
        document.getElementById('parkingbut').addEventListener('click', parkingspot)
        document.getElementById('submit').addEventListener('click', onChangeHandler);
      }

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('end').value;
        geocoder.geocode({'address': address}, function(results, status) {
        alert(results[0].geometry.location);
          if (status === google.maps.GeocoderStatus.OK) {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

      function retrieveParking(geocoder, map){
        var address = document.getElementById('end').value;
      //$(function() {
            $("form").submit(function(event) {
                $.get('search.php', { 'q': $('#query').val(), 'lat': 123.21, 'lon': 231.2 }, function(data) {
                    $('#test').text(data[0]['name']);
                });
            event.preventDefault();
        });
      });


      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
          var endLocation = document.getElementById('end').value;
          /* Naar Laurens */
          /* Van Laurens naar onderstaande code*/

           /*var longitude = '52.521370' ;
           var latitude = '5.452175' ;
           var endLocationLatLng = longitude.concat(',', latitude);*/

        directionsService.route({
          origin: document.getElementById('start').value,
          destination: endLocation/*LatLng*/,
          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);
          }*/
        });
      }


    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD-eWViiv4gvodckLKp5VS3Elr8RgBUP4&callback=initMap">
    </script>


    <!-- FOOTER -->
    <?php include "Footer.html" ?>

    </div><!-- /.container -->
  </body>
</html>