title: Can't load waypoints and routes on Google Maps api v3
body: <p>I want to display multiple directions with dragable waypoints and save each waypoints.</p>
  
  <p>On my project I can click on the map to create the routes, generating a wayA point and a wayB point and draw a route between them. So, I can make multiple routes.
  I can also save them on the database.
  The problem is load this points on the map again fetching them on the database and drawing all on the map.</p>
  
  <p>I have two pages, on <a href="http://www.inventoresdegaragem.com/dbteste/test.html" rel="nofollow noreferrer">index.htm</a> you can draw your routes and save them, and on <a href="http://www.inventoresdegaragem.com/dbteste/loady.htm" rel="nofollow noreferrer">loady.htm</a> you can load them on the map.</p>
  
  <p>I tried somethings but without sucess, I will post my try here.</p>
  
  <p>This is my resumed index.htm</p>
  
  <pre><code> var map, ren, ser;
   var data = {};    
   var wayA = [];
   var wayB = [];
   var directionResult = [];
  
  function goma() &lt;---Initialize
  {
  
  
  google.maps.event.addListener(map, "click", function(event) {
          if (wayA.length == wayB.length) {
          wayA.push(new google.maps.Marker({
        draggable: true,      
            position: event.latLng,
            map: map
  
          }));
          } else {
          wayB.push(new google.maps.Marker({
        draggable: true,  
            position: event.latLng,
            map: map
  
          }));  
      ren = new google.maps.DirectionsRenderer( {'draggable':true} );
      ren.setMap(map);
      ren.setPanel(document.getElementById("directionsPanel"));
      ser = new google.maps.DirectionsService();  
      ser.route({ 'origin': wayA[wayA.length-1].getPosition(), 'destination':  wayB[wayB.length-1].getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
          if(sts=='OK') {
                      directionResult.push(res);
                      ren.setDirections(res); 
                  } else {
                      directionResult.push(null);
                  }   })      
  } }); }  
  
  function save_waypoints()
  {
      var w=[],wp;
      var rleg = ren.directions.routes[0].legs[0];
      data.start = {'lat': rleg.start_location.lat(), 'lng':rleg.start_location.lng()}
      data.end = {'lat': rleg.end_location.lat(), 'lng':rleg.end_location.lng()}
      var wp = rleg.via_waypoints 
      for(var i=0;i&lt;wp.length;i++)w[i] = [wp[i].lat(),wp[i].lng()]    
      data.waypoints = w;   
      var str = JSON.stringify(data)   
      var jax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
      jax.open('POST','process.php');
      jax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      jax.send('command=save&amp;inventoresdegara='+str)
      jax.onreadystatechange = function(){ if(jax.readyState==4) {
          if(jax.responseText.indexOf('bien')+1)alert('Mapa Atualizado !');
          else alert(jax.responseText)        
      }}  
   }
  </code></pre>
  
  <p>This is the resumed loady.htm with my try</p>
  
  <pre><code>var map, ren, ser;
  var data = {};
  var wayA = [];
  var wayB = [];
  var directionResult = [];
  
   function goma() {
  
  ren = new google.maps.DirectionsRenderer( {'draggable':true} );
      ren.setMap(map);
      ren.setPanel(document.getElementById("directionsPanel"));
      ser = new google.maps.DirectionsService();
      fetchdata();
  
      function setroute(os)
  {
      var wp = [];
      for(var i=0;i&lt;os.waypoints.length;i++)
          wp[i] = {'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][3]),'stopover':false }
    ser.route({ 'origin': wayA[wayA.length-1].setPosition(), 'destination':  wayB[wayB.length-1].setPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
          if(sts=='OK') {
                      directionResult.push(res);
                      ren.setDirections(res); 
                  } else {
                      directionResult.push(null);
                  }    
   });
  }
  function fetchdata()
  {
      var jax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
      jax.open('POST','process.php');
      jax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      jax.send('command=fetch')
      jax.onreadystatechange = function(){ if(jax.readyState==4) {        
          try { setroute( eval('(' + jax.responseText + ')') ); } 
          catch(e){ alert(e); }
  
      }}    
  
   }
  </code></pre>
  
  <p>This is my php file:</p>
  
  <pre><code>&lt;?   
      if($_REQUEST['command']=='save')
      {
  
          $query = "insert into inventoresdegara set value='$data'";
          if(mysql_query($query))die('bien');
          die(mysql_error());                 
      }  
      if($_REQUEST['command']=='fetch')
      {
          //$query = "select value from inventoresdegara";
          $query = "SELECT value FROM inventoresdegara";
          if(!($res = mysql_query($query)));      
          $rs = mysql_fetch_array($res,1);
          die($rs['value']);      
      }
  ?&gt;
  </code></pre>
  
  <p>This is a image from my database to you know how the information are saved
  <img src="https://i.stack.imgur.com/ZY1Cf.png" alt="enter image description here"></p>
  
  <p>The only thing that I need to do is load this values to the map, please help me =).</p>
  
  <p>Thanks !</p>
  
  <p>After my try, the loady.htm was this on ser.routes</p>
  
  <pre><code>ser.route({'origin':new google.maps.LatLng(os.start.lat,os.start.lng),
      'destination':new google.maps.LatLng(os.end.lat,os.end.lng),
      'waypoints': wp,
  
      'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
          if(sts=='OK')ren.setDirections(res);
  }
  </code></pre>