title: Marking route on Google map with multiple latitude and longitude values from database
body: <p>I have written a PHP and javaScript code which will retrieve latitude and longitude informations from Database and place markers on Google map according in appropriate places(using lat and lon values). This works fine.</p>
  
  <p>I need to join these markers and draw route on the map. How to do it.</p>
  
  <pre><code>   &lt;html&gt;
     &lt;head&gt;
     &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
     &lt;style type="text/css"&gt;
     body { font: normal 10pt Helvetica, Arial; }
      #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
      &lt;/style&gt;
     &lt;script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript"&gt;
  
     var icon = new    google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
     new google.maps.Size(32, 32), new google.maps.Point(0, 0),
     new google.maps.Point(16, 32));
     var center = null;
     var map = null;
     var currentPopup;
     var bounds = new google.maps.LatLngBounds();
  
    function addMarker(lat, lng, info)
   {
     var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
  var marker = new google.maps.Marker(
  {
      position: pt,
      icon: icon,
      map: map
  });
  var popup = new google.maps.InfoWindow(
  {
      content: info,
      maxWidth: 300
  });
  
  google.maps.event.addListener(marker, "click", function()
  {
      if (currentPopup != null)
      {
          currentPopup.close();
          currentPopup = null;
      }
      popup.open(map, marker);
      currentPopup = popup;
     });
      google.maps.event.addListener(popup, "closeclick", function()
     {
      map.panTo(center);
      currentPopup = null;
     });
     }
  
  function initMap()
  {
   map = new google.maps.Map(document.getElementById("map"), {
  center: new google.maps.LatLng(0, 0),
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  mapTypeControlOptions:
  {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  },
  navigationControl: true,
  navigationControlOptions:
  {
  style: google.maps.NavigationControlStyle.SMALL
   }
   });
  
  
    $.getJSON('googlescript.php', function(items)
    {
     for (var i = 0; i &lt; items.length; i++) {
        (function(item) {
          addMarker(item.lat, item.long, '&lt;b&gt;' + item.name + '&lt;/b&gt;&lt;br /&gt;' + item.desc);
      })(items[i]);
     }
    });
  
    center = bounds.getCenter();
   map.fitBounds(bounds);
  
     }
     &lt;/script&gt;
      &lt;/head&gt;
     &lt;body onload="initMap()" style="margin:0px; border:0px; padding:0px;"&gt;
     &lt;div id="map"&gt;&lt;/div&gt;
      &lt;/html&gt;
  </code></pre>