1

I am new to Stack Exchange so I hope I can prepare my question in an adequate way.

I try to make a small route planning application. A start address should be entered and the destinations are fixed. From the given start point the shortest route should be calculated and the result should be presented. Additionally i present an example OSM map with Openlayers, but I calculate it with the Google Maps API v3 and show it in a default map of 1px x 1px. My implementation works so far, but one problem occurred:

If you click once on "Search" nothing happens. If you click twice it does what i want. Any solutions? So here is the code:

<?php

//some php code.....

?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Home</title>
        <meta name="keywords" content="Kletterhallen, Boulderhallen">
        <link rel="stylesheet" href="../styles/basic/stylesheet.css" />
        <link rel="shortcut icon" href="../styles/basic/favicon.ico" />
        <script type="text/JavaScript" src="../js/sha512.js"></script> 
        <script type="text/JavaScript" src="../js/form.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>

<script>


/**************************************************** 
*
*                 DEFINE DIRECTIONS 
*
*****************************************************/

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var place=[];
var dist=[];
var gooco=[];
var neuwaldegg = new google.maps.LatLng(48.237509, 16.285983);
var khWien = new google.maps.LatLng(48.229765, 16.451519);
var oegvKz = new google.maps.LatLng(48.206431, 16.350771);
var ktz = new google.maps.LatLng(48.208769, 16.376707);
var bcedelw = new google.maps.LatLng(48.202942, 16.372778);
var kzsaus = new google.maps.LatLng(48.210542, 16.374989);
var szmarswiese = new google.maps.LatLng(48.239806, 16.276138);
var kzkloster = new google.maps.LatLng(48.310744, 16.327837);
var nwkl = new google.maps.LatLng(48.380266, 16.509789);
var ribpark = new google.maps.LatLng(47.930880, 16.200566);
var boulderbar = new google.maps.LatLng(48.231408, 16.368489);
var dest=[neuwaldegg,khWien,oegvKz,ktz,bcedelw,kzsaus,szmarswiese,kzkloster,nwkl,ribpark,boulderbar];

/**************************************************** 
*
*                 INITIALIZE MAP 
*
*****************************************************/

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var vienna = new google.maps.LatLng(48.231408, 16.368489);
  var mapOptions = {
    zoom: 6,
    center: vienna
  }
  map = new google.maps.Map(document.getElementById('routecalc'), mapOptions);
  directionsDisplay.setMap(map);
}

/**************************************************** 
*
*         GET POLYLINE OF SHORTEST ROUTES
*
*****************************************************/
function calcRoute(start) {
var start=start.value;
for (var k = 0; k < dest.length; k++) {
  var end = dest[k];
  var request = {
      origin: start,
      destination: end,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.WALKING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      for (var i = 0; i < route.legs.length; i++) {
        startaddress=route.legs[i].start_address;
        place.push(route.legs[i].end_address)
        var zws=route.legs[i].distance.text;
        zws=zws.split(" ");
        zws=parseFloat(zws[0]);
        dist.push(zws);
        gooco.push(route.overview_polyline);
        }
      }
  });
 }
var index=[];
var min=[];
for (var j = 0; j < dist.length; j++) {
if(j==0){
min.push(dist[0]);
index.push(0);
}
else if(dist[j]<min[0]){
min=[];
index=[];
min.push(dist[j]);
index.push(j);
}
else if(dist[j]==min[0]){
min.push(dist[j]);
index.push(j);
}
else{
  continue;
}
}
var summaryPanel = document.getElementById('directions_panel');
      summaryPanel.innerHTML = '';
      summaryPanel.innerHTML += '<b>Your search results:</b><br>';
      for (var t = 0; t < index.length; t++) {
        summaryPanel.innerHTML += 'Your entered adress: '+startaddress+ '<br>';
        summaryPanel.innerHTML += 'Your entered destination: '+place[index[t]]+ '<br>';
        summaryPanel.innerHTML += 'Distance: '+dist[index[t]]+' km'+ '<br><br>';
        }
}


google.maps.event.addDomListener(window, 'load', initialize);
</script>
 </head>
<body>

 <div id="routecalc">
 </div>
 <!-- HEADER --> 
 <div id="Header">
   <img id="Logo" src="../styles/basic/Logo.gif" alt="Logo">
   <img id="Headline" src="../styles/basic/Headline.gif" alt="Headline">
   <a href="normalview.php"><img id="German" src="../styles/basic/german.png"></a>
   <a href="normalview.php"><img id="English" src="../styles/basic/english.gif"></a>
  </div> 


 <!-- MAP-->
 <iframe id="Map" src="map/map.html"> 
  <a href="map/map.html">OSM Maps</a> 
 </iframe>
 <!-- SEARCH -->
 <form id="Search" action="" method="post" name="form"> 
  <p>N&auml;chstgelegene Halle von 
    <input name="start" type="text" size="20" maxlength="30"/> 
    <input type="button" 
                   value="Search" 
                  onclick="calcRoute(this.form.start);" /> 
  </p>
 </form>
 <!--SEARCH RESULTS-->
 <div id="directions_panel"></div>
 <!-- FOOTER -->


 </body>
</html>

If you need any further information, please let me know.

1

I was able to fix the problem myself, hopefully I can help someone with my solution. I used Google Maps API DirectionMatrix, which fits much better than DirectionService. Here is the code:

<?php

//some php code.....

?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Home</title>
        <meta name="keywords" content="Kletterhallen, Boulderhallen">
        <link rel="stylesheet" href="../styles/basic/stylesheet.css" />
        <link rel="shortcut icon" href="../styles/basic/favicon.ico" />
        <script type="text/JavaScript" src="../js/sha512.js"></script> 
        <script type="text/JavaScript" src="../js/form.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
 <script>


/**************************************************** 
*
*                 DEFINE DIRECTIONS 
*
*****************************************************/

function initialize() {
  var vienna = new google.maps.LatLng(48.231408, 16.368489);
  var mapOptions = {
    zoom: 6,
    center: vienna
  }
  map = new google.maps.Map(document.getElementById('routecalc'), mapOptions);
   geocoder = new google.maps.Geocoder();
}
function calculateDistances(originstr) {
var map;
var geocoder;
var start=[];
var gooco=[];
var neuwaldegg = new google.maps.LatLng(48.237509, 16.285983);
var khWien = new google.maps.LatLng(48.229765, 16.451519);
var oegvKz = new google.maps.LatLng(48.206431, 16.350771);
var ktz = new google.maps.LatLng(48.208769, 16.376707);
var bcedelw = new google.maps.LatLng(48.202942, 16.372778);
var kzsaus = new google.maps.LatLng(48.210542, 16.374989);
var szmarswiese = new google.maps.LatLng(48.239806, 16.276138);
var kzkloster = new google.maps.LatLng(48.310744, 16.327837);
var nwkl = new google.maps.LatLng(48.380266, 16.509789);
var ribpark = new google.maps.LatLng(47.930880, 16.200566);
var boulderbar = new google.maps.LatLng(48.231408, 16.368489);
var dest=[neuwaldegg,khWien,oegvKz,ktz,bcedelw,kzsaus,szmarswiese,kzkloster,nwkl,ribpark,boulderbar];

  start.push(originstr.value);
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: start,
      destinations: dest,
      travelMode: google.maps.TravelMode.WALKING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, callback);
}

function callback(response, status) {
  var dist=[];
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var outputDiv = document.getElementById('directions_panel');
    outputDiv.innerHTML = '';
var results = response.rows[0].elements;
      for (var k = 0; k < results.length; k++) {
        var zws=results[k].distance.text;
        zws=zws.split(" ");
        zws=parseFloat(zws[0]);
        dist.push(zws);
      }
      var index=[];
var min=[];
for (var j = 0; j < dist.length; j++) {
if(j==0){
min.push(dist[0]);
index.push(0);
}
else if(dist[j]<min[0]){
min=[];
index=[];
min.push(dist[j]);
index.push(j);
}
else if(dist[j]==min[0]){
min.push(dist[j]);
index.push(j);
}
else{
  continue;
}
}

for (var l = 0; l < index.length; l++) {
        outputDiv.innerHTML += 'Your entered adress: '+origins[0]+ '<br>';
        outputDiv.innerHTML += 'Your destination: '+destinations[index[l]]+ '<br>';
        outputDiv.innerHTML += 'Distance: '+results[index[l]].distance.text+'<br>';
        outputDiv.innerHTML += 'Estimated Time: '+results[index[l]].duration.text+'<br><br>';
  }
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="routecalc">
</div>

 <!-- HEADER --> 
 <div id="Header">
   <img id="Logo" src="../styles/basic/Logo.gif" alt="Logo">
   <img id="Headline" src="../styles/basic/Headline.gif" alt="Headline">
   <a href="normalview.php"><img id="German" src="../styles/basic/german.png"></a>
   <a href="normalview.php"><img id="English" src="../styles/basic/english.gif"></a>
  </div> 


 <!-- MAP-->
 <iframe id="Map" src="map/map.html"> 
  <a href="map/map.html">OSM Maps</a> 
 </iframe>
 <!-- SEARCH -->
 <form id="Search" action="" method="post" name="form"> 
  <p>N&auml;chstgelegene Halle von 
    <input name="start" type="text" size="20" maxlength="30"/> 
    <input type="button" 
                   value="Search" 
                  onclick="calculateDistances(this.form.start);" /> 
  </p>
 </form>
 <!--SEARCH RESULTS-->

 <!-- FOOTER -->

 <div id="directions_panel"></div>

 </body>
</html>

Greets clax

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.