Search code examples
javascriptgoogle-maps-api-3directions

Route planning needs double click

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 of the main file: 

<?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>

I think this is not relevant for the problem, but here is also the code of map.html:

<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat(16.367639,48.1986347)
    .transform(
            new OpenLayers.Projection("EPSG:4326"), 
            map.getProjectionObject() 
            );

    var zoom=12;


    map.setCenter (lonLat, zoom);


  </script>
</body></html>

If you need any further information, please let me know. Thanks a lot in advance.

Greets clax

Solution

  • 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