Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help.. Trying to use the Google Maps API to make a route optimizer

    Hello,

    So to make life easier at work, I'm trying to make a route optimizer. Thing is, it sends multiple waypoints in the form of an array to Google, and then returns an optimized list of the waypoints. I'd like to be able to paste from excel, so I used a <textarea> input, and tried to use javascript to convert that into an array based on line breaks. My code is as follows:

    Code:
    <!DOCTYPE html> 
    <html> 
      <head> 
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
        <meta charset="utf-8"> 
        <title>Waypoints in directions</title> 
        <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjLrR88brn1enUdWHThChOTF5v8C26sU0&sensor=true"></script> 
        <script> 
    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 
    
    function initialize() { 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var home = new google.maps.LatLng(42.285453,-82.956337); 
      var mapOptions = { 
        zoom: 6, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        center: home 
      } 
      map = new google.maps.Map(document.getElementById('mapcan'), mapOptions); 
      directionsDisplay.setMap(map); 
    } 
    
    function calcRoute() { 
      var start = document.getElementById('start').value; 
      var end = document.getElementById('end').value; 
      var waypts = []; 
      var optionsArray = document.getElementById('waypoints').val().split('\n'); 
      for (var i = 0; i < optionsArray.length; i++) { 
        if(document.('waypoints').val()) { 
          waypts.push({ 
              location:optionsArray[i].value, 
              stopover:true}); 
            } 
      } 
    
      var request = { 
          origin: start, 
          destination: end, 
          waypoints: waypts, 
          optimizeWaypoints: true, 
          travelMode: google.maps.TravelMode.DRIVING 
      }; 
      directionsService.route(request, function(response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
          directionsDisplay.setDirections(response); 
          var route = response.routes[0]; 
          var summaryPanel = document.getElementById('directions_panel'); 
          summaryPanel.innerHTML = ''; 
          // For each route, display summary information. 
          for (var i = 0; i < route.legs.length; i++) { 
            var routeSegment = i + 1; 
            summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>'; 
            summaryPanel.innerHTML += route.legs[i].start_address + ' to '; 
            summaryPanel.innerHTML += route.legs[i].end_address + '<br>'; 
            summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; 
          } 
        } 
      }); 
    } 
    
    google.maps.event.addDomListener(window, 'load', initialize); 
    
        </script> 
      </head> 
       <body> 
        <div id="mapcan" style="float:right;width:850px;height:900px;"></div> 
        <div id="control_panel" style="float:left;width:30%;text-align:left;padding-top:20px"> 
        <div style="margin:20px;border-width:2px;"> 
        <b>Start:</b> 
        <select id="start"> 
          <option value="4545 Rhodes Dr. Windsor, Ontario">EnWin Operating Center</option> 
        </select> 
        <br> 
        <b>Waypoints:</b> <br> 
        <textarea id="waypoints"> 
        </textarea> 
        <br> 
        <b>End:</b> 
        <input id="end"> 
        </input> 
        <br> 
          <input type="submit" onclick="initialize();","calcRoute();"> 
        </div> 
        <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 
        </div> 
      </body> 
    </html>
    No matter how hard I try, I can't get the array to form for the rest of the program to run.

    All help is appreciated, and yes, this is the first time I've ever used javascript!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,883
    Thanks
    56
    Thanked 539 Times in 536 Posts
    input type="submit" is for submitting forms (which will reload your page). Use type= "button" to call functions.

    You are not using jQuery, so document.('waypoints').val() is meaningless (and would be meaningless even if you were) - to check if there are waypoints you can do
    Code:
    if(optionsArray.length>0)
    something else, which I forgot.

    This seems to work better...
    Code:
    <!DOCTYPE html> 
    <html> 
      <head> 
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
        <meta charset="utf-8"> 
        <title>Waypoints in directions</title> 
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjLrR88brn1enUdWHThChOTF5v8C26sU0&sensor=true"></script> 
        <script> 
    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 
    
    function initialize() { 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var home = new google.maps.LatLng(42.285453,-82.956337); 
      var mapOptions = { 
        zoom: 6, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        center: home 
      } 
      map = new google.maps.Map(document.getElementById('mapcan'), mapOptions); 
      directionsDisplay.setMap(map); 
    } 
    
    function calcRoute() { 
      var start = document.getElementById('start').value; 
      var end = document.getElementById('end').value; 
      var waypts = []; 
      var optionsArray = document.getElementById('waypoints').value.split('\n'); 
     
      for (var i = 0; i < optionsArray.length; i++) { 
        if(optionsArray.length>0) { 
          waypts.push({ 
              location:optionsArray[i], 
              stopover:true}); 
            } 
      } 
    
      var request = { 
          origin: start, 
          destination: end, 
          waypoints: waypts, 
          optimizeWaypoints: true, 
          travelMode: google.maps.TravelMode.DRIVING 
      }; 
      directionsService.route(request, function(response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
          directionsDisplay.setDirections(response); 
          var route = response.routes[0]; 
          var summaryPanel = document.getElementById('directions_panel'); 
          summaryPanel.innerHTML = ''; 
          // For each route, display summary information. 
          for (var i = 0; i < route.legs.length; i++) { 
            var routeSegment = i + 1; 
            summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>'; 
            summaryPanel.innerHTML += route.legs[i].start_address + ' to '; 
            summaryPanel.innerHTML += route.legs[i].end_address + '<br>'; 
            summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; 
          } 
        } 
      }); 
    } 
    
    google.maps.event.addDomListener(window, 'load', initialize); 
    
        </script> 
      </head> 
       <body> 
        <div id="mapcan" style="float:right;width:850px;height:900px;"></div> 
        <div id="control_panel" style="float:left;width:30%;text-align:left;padding-top:20px"> 
        <div style="margin:20px;border-width:2px;"> 
        <b>Start:</b> 
        <select id="start"> 
          <option value="4545 Rhodes Dr. Windsor, Ontario">EnWin Operating Center</option> 
        </select> 
        <br> 
        <b>Waypoints:</b> <br> 
        <textarea id="waypoints"></textarea> 
        <br> 
        <b>End:</b> 
        <input id="end" /> 
        </input> 
        <br> 
          <input type="button" value="submit" onclick="calcRoute();"> 
        </div> 
        <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 
        </div> 
      </body> 
    </html>
    Last edited by xelawho; 07-03-2013 at 10:40 PM.

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much! I'll keep that in mind for future projects.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by xelawho View Post
    input type="submit" is for submitting forms (which will reload your page). Use type= "button" to call functions.
    doesn't a button also submit by default?

    EDIT: whoops, nvrmnd; i thought you were talking about <button>, which does submit (kinda tired here). input[type=button] does not.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    RndMe: But even <button> permits <button type="button"> to say that it does *NOT* submit. So whether <input> or <button> Xelawho's comment is correct.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •