Google maps API

U

Uzi

Mitglied
Moin Leute, ich wollte etwas "einfaches" programmieren und zwar wollte ich anhand der Google Maps API auf eine Homepage eine MAP erstellen die feste punkte hat und mir dann die schnellste route gibt von meinem Ort aus der immer individuell ist.

Als beispiel: ich bin in Berlin und da sind feste punkte markiert. Ich gebe dann ein das ich am Ort XY bin und mein Code berechnet mir die schnellste route zum nächsten punkt der zu mir ist. Egal ob das jetzt Markierung A oder B ist, Hauptsache das ist die schnellste route dahin.

Ich brauche einfach anreize wie wo was, bin da bisschen am verzweifeln was ich genau benützen soll und wie.. kann mir irgendwie kein bild machen :/

Bin für jeden tipp dankbar.
 
So ich hab jetzt mal die Distance Matrix Service von Google genutzt https://developers.google.com/maps/documentation/javascript/distancematrix?hl=de

mein Problem ist jetzt nur das wenn ich ein Standort angebe und 5 ziele, dann zeigt es mir einfach ne liste runter mit den zielen und die Abstände dazu. Ich würde aber gerne das so haben das es mir nur nähersten ziel anzeigt von meinem Standort aus und die Restlichen weg lässt. Ich hab schon mit nem Suchverfahren rum probiert und so das es mir den kleinsten wert gibt, aber es gibt mir immer nur den ersten platz zurück... also mache ich da irgendwas falsch ^^
Jemand ne Idee?

hier mal den Code:
Code: 
<!DOCTYPE html>
<html>
  <head>
    <title>Distance Matrix service</title>
    <style>
      html, body {
              top: 200px;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
              top: 60px;
        height: 400px;
        width: 50%;
      }
#right-panel {

  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {

  font-size: 15px;
}

#right-panel select {

  width: 100%;
}

#right-panel i {

  font-size: 12px;
}

    </style>
    <style>
      #right-panel {
        float: right;
        width: 48%;
        padding-left: 2%;
      }
      #output {
        font-size: 11px;
      }
    </style>
  </head>
  <body>
 

   
    <div id="right-panel">
      <div id="inputs">
      </div>
<!-- Eingabe bereicht -->
    <form action="" method="post">
    <input type='text' name="address" id='address' placeholder='Adresse eingeben' />
    <button type="button" onclick="initMap()"> Los</button>
    </form>
      </div>
      <div id="output"></div>
    </div>
    <div id="map"></div>


   
    <script>
function initMap() {
  var bounds = new google.maps.LatLngBounds;
  var markersArray = [];
    <!--  STARTZIEL -->
  <!-- var origin1 =  document.getElementById('address').value;  -->
    var origin1 = '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 destinationIcon = 'https://chart.googleapis.com/chart?' +
      'chst=d_map_pin_letter&chld=D|FF0000|000000';
  var originIcon = 'https://chart.googleapis.com/chart?' +
      'chst=d_map_pin_letter&chld=O|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: [origin1],
    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>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück