title: how to draw route in google map using database value?
body: <p>I have a database table like this:   </p>
  
  <p><img src="https://i.stack.imgur.com/MdUmk.jpg" alt="enter image description here"></p>
  
  <p>my original route is:</p>
  
  <p><img src="https://i.stack.imgur.com/S8hSx.png" alt="enter image description here"></p>
  
  <p>but, when i load map using database value, it became like this:</p>
  
  <p><img src="https://i.stack.imgur.com/MHmQW.png" alt="enter image description here"></p>
  
  <p>means it not contain all points and the waypoints are changed.I try to load map as same as i created, but no success.</p>
  
  <p>It is worked fine for one route, means for <code>A to B</code>.but it create problem when i try to load multiple routes like <code>A to B to c</code>.  </p>
  
  <p>so what is the problem?</p>
  
  <p>full code:</p>
  
  <pre><code>    &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;body onLoad="goma()"&gt;
  &lt;div id="mappy" style="width:80%; height:400px; float:left; margin-top:100px"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  var map, ren, ser;
  var request;
  var data = {};
  function goma()
  {
  map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(23.0171240, 72.5330533) })
  
      ren = new google.maps.DirectionsRenderer( {'draggable':true} );
      ren.setMap(map);
      ser = new google.maps.DirectionsService();
      fetchdata()
  }
  
  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) {                
          var jsonobj = JSON.parse(jax.responseText);
  
          try {
                  console.log(jax.responseText);
                  var tot_length=JSON.parse(jax.responseText).length;
                  var wp = [];
                  var startos=eval('(' + jsonobj[0] + ')');
                  var lastos=eval('(' + jsonobj[tot_length-1] + ')');
                  for(var j=0;j&lt;JSON.parse(jax.responseText).length;j++) 
                  {
                   var os = eval('(' + jsonobj[j] + ')');
                      for(var i=0;i&lt;os.waypoints.length;i++)
                      {
                           wp.push({
                               'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][1]),
                               'stopover':false 
                           }); 
                      }
                  }
  
                   alert(startos.start.lat+","+startos.start.lng+"&lt;br&gt;"+lastos.end.lat+","+lastos.end.lng);
                   request = 
                           {
                                origin:new google.maps.LatLng(startos.start.lat,startos.start.lng),
                                destination:new google.maps.LatLng(lastos.end.lat,lastos.end.lng),
                                waypoints:wp,
                                travelMode: google.maps.DirectionsTravelMode.DRIVING
                           };
  
                   ser.route(request, function(res,sts) {
                      if (sts == google.maps.DirectionsStatus.OK)
                      {
                        ren.setDirections(res);
                      }   
                   });    
  
              }
          catch(e){ alert(e); }
      }}
  }
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>