Untitled


<!DOCTYPE html>
<html>
  <head>
    <?php
    include 'Header.php'
    ?>

  </head>
  <body>
        <div class="banner">
                 <table>
                    <tr>
                        <td>
                        <!-- Eingabe bereicht -->
                        <form action="" method="post">
                            <input type='text' name="address" id='address' placeholder='Adresse eingeben' />
                            <button type="button" onclick="initMap()"> Los</button>
                            </form>

                        </td>

                        <td>
                        <div id="map"></div>
                        <div id="output"></div>
                        <div id="inputs"></div>
                        </td>
                    </tr>
                 </table>

        </div>


    <script>
function initMap() {
  var bounds = new google.maps.LatLngBounds;
  var markersArray = [];
    <!--  STARTZIEL -->
 <!-- var standortKunde =  document.getElementById('address').value;   -->
     var standortKunde = 'frauenstrasse ulm';


    <!-- DAS SIND DIE ENDTZIELE -->
    var destinationA = 'olgastrasse 52, ulm, Deutschland';
    var destinationB = 'neutorstrasse, ulm, Deutschland';
    var destinationC = 'Nagelstrasse, ulm, Deutschland';
    var destinationD = 'Frauengraben, ulm, Deutschland';
    var destinationE = 'Brucknerweg, ulm, Deutschland';


  var originIcon = 'https://chart.googleapis.com/chart?' +
      'chst=d_map_pin_letter&chld=Sie|FF0000|000000';
  var destinationIcon = 'https://chart.googleapis.com/chart?' +
      'chst=d_map_pin_letter&chld=Taxi|FFFF00|000000';
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 55.53, lng: 9.4},
    zoom: 10
  });
  var geocoder = new google.maps.Geocoder;

  var service = new google.maps.DistanceMatrixService;
  service.getDistanceMatrix({
    origins: [standortKunde],
    destinations: [destinationA, destinationB,destinationC,destinationD,destinationE],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  },
  function(response, status) {
    if (status !== google.maps.DistanceMatrixStatus.OK) {
      alert('Error was: ' + status);
    } else {
      var originList = response.originAddresses;
      var destinationList = response.destinationAddresses;


      var outputDiv = document.getElementById('output');
      outputDiv.innerHTML = '';
      deleteMarkers(markersArray);

      var showGeocodedAddressOnMap = function(asDestination) {
        var icon = asDestination ? destinationIcon : originIcon;
        return function(results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
            map.fitBounds(bounds.extend(results[0].geometry.location));
            markersArray.push(new google.maps.Marker({
              map: map,
              position: results[0].geometry.location,
              icon: icon
            }));
          } else {

          }
        };
      };

              for (var i = 0; i < originList.length; i++) {
        var results = response.rows[i].elements;
        geocoder.geocode({'address': originList[i]},
            showGeocodedAddressOnMap(false));
        for (var j = 0; j < results.length; j++) {
          geocoder.geocode({'address': destinationList[j]},
              showGeocodedAddressOnMap(true));

          <!-- Ausgabe in HTML -->
          outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
              ': ' + results[j].distance.text + ' in ' +
              results[j].duration.text + '<br>';
              }

            }
        }
  }); <!-- ENDE FUNTION RESPONSE -->
}


function deleteMarkers(markersArray) {
  for (var i = 0; i < markersArray.length; i++) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}


    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzrEIy5xEol7jbzFrI4NQwyaotx7u9pFQ&signed_in=true&callback=initMap"
        async defer></script>

  </body>
</html>
<!-- Ende Sprint 3, Task 130.015 Alramahy -->