title: Google Maps V3 - waypoints + infowindow with random text
body: <p>I'm using this example to set up a route with more then 8 markers. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Google Maps JavaScript API v3 Example: Directions Waypoints&lt;/title&gt;
  &lt;style&gt;
      #map{
      width: 100%;
      height: 450px;
  }
  &lt;/style&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;script&gt;
        jQuery(function() {
      var stops = [
                          {"Geometry":{"Latitude":52.1615470947258,"Longitude":20.80514430999756}},
                          {"Geometry":{"Latitude":52.15991486090931,"Longitude":20.804049968719482}},
                          {"Geometry":{"Latitude":52.15772967999426,"Longitude":20.805788040161133}},
                          {"Geometry":{"Latitude":52.15586034371232,"Longitude":20.80460786819458}},
                          {"Geometry":{"Latitude":52.15923693975469,"Longitude":20.80113172531128}},
                          {"Geometry":{"Latitude":52.159849043774074, "Longitude":20.791990756988525}},
                          {"Geometry":{"Latitude":52.15986220720892,"Longitude":20.790467262268066}},
                          {"Geometry":{"Latitude":52.16202095784738,"Longitude":20.7806396484375}},
                          {"Geometry":{"Latitude":52.16088894313116,"Longitude":20.77737808227539}},
                          {"Geometry":{"Latitude":52.15255590234335,"Longitude":20.784244537353516}},
                          {"Geometry":{"Latitude":52.14747369312591,"Longitude":20.791218280792236}},
                          {"Geometry":{"Latitude":52.14963304460396,"Longitude":20.79387903213501}}
  
  
  
                      ] ;
  
      var map = new window.google.maps.Map(document.getElementById("map"));
  
      // new up complex objects before passing them around
      var directionsDisplay = new window.google.maps.DirectionsRenderer();
      var directionsService = new window.google.maps.DirectionsService();
  
      Tour_startUp(stops);
  
      window.tour.loadMap(map, directionsDisplay);
      window.tour.fitBounds(map);
  
      if (stops.length &gt; 1)
          window.tour.calcRoute(directionsService, directionsDisplay);
  });
  
  function Tour_startUp(stops) {
      if (!window.tour) window.tour = {
          updateStops: function (newStops) {
              stops = newStops;
          },
          // map: google map object
          // directionsDisplay: google directionsDisplay object (comes in empty)
          loadMap: function (map, directionsDisplay) {
              var myOptions = {
                  zoom: 13,
                  center: new window.google.maps.LatLng(51.507937, -0.076188), // default to London
                  mapTypeId: window.google.maps.MapTypeId.ROADMAP
              };
              map.setOptions(myOptions);
              directionsDisplay.setMap(map);
          },
          fitBounds: function (map) {
              var bounds = new window.google.maps.LatLngBounds();
  
              // extend bounds for each record
              jQuery.each(stops, function (key, val) {
                  var myLatlng = new window.google.maps.LatLng(val.Geometry.Latitude, val.Geometry.Longitude);
                  bounds.extend(myLatlng);
              });
              map.fitBounds(bounds);
          },
          calcRoute: function (directionsService, directionsDisplay) {
              var batches = [];
              var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
              var itemsCounter = 0;
              var wayptsExist = stops.length &gt; 0;
  
              while (wayptsExist) {
                  var subBatch = [];
                  var subitemsCounter = 0;
  
                  for (var j = itemsCounter; j &lt; stops.length; j++) {
                      subitemsCounter++;
                      subBatch.push({
                          location: new window.google.maps.LatLng(stops[j].Geometry.Latitude, stops[j].Geometry.Longitude),
                          stopover: true
                      });
                      if (subitemsCounter == itemsPerBatch)
                          break;
                  }
  
                  itemsCounter += subitemsCounter;
                  batches.push(subBatch);
                  wayptsExist = itemsCounter &lt; stops.length;
                  // If it runs again there are still points. Minus 1 before continuing to
                  // start up with end of previous tour leg
                  itemsCounter--;
              }
  
              // now we should have a 2 dimensional array with a list of a list of waypoints
              var combinedResults;
              var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
              var directionsResultsReturned = 0;
  
              for (var k = 0; k &lt; batches.length; k++) {
                  var lastIndex = batches[k].length - 1;
                  var start = batches[k][0].location;
                  var end = batches[k][lastIndex].location;
  
                  // trim first and last entry from array
                  var waypts = [];
                  waypts = batches[k];
                  waypts.splice(0, 1);
                  waypts.splice(waypts.length - 1, 1);
  
                  var request = {
                      origin: start,
                      destination: end,
                      waypoints: waypts,
                      travelMode: window.google.maps.TravelMode.WALKING
                  };
                  (function (kk) {
                      directionsService.route(request, function (result, status) {
                          if (status == window.google.maps.DirectionsStatus.OK) {
  
                              var unsortedResult = { order: kk, result: result };
                              unsortedResults.push(unsortedResult);
  
                              directionsResultsReturned++;
  
                              if (directionsResultsReturned == batches.length) // we've received all the results. put to map
                              {
                                  // sort the returned values into their correct order
                                  unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
                                  var count = 0;
                                  for (var key in unsortedResults) {
                                      if (unsortedResults[key].result != null) {
                                          if (unsortedResults.hasOwnProperty(key)) {
                                              if (count == 0) // first results. new up the combinedResults object
                                                  combinedResults = unsortedResults[key].result;
                                              else {
                                                  // only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
                                                  // directionResults object, but enough to draw a path on the map, which is all I need
                                                  combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
                                                  combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
  
                                                  combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
                                                  combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
                                              }
                                              count++;
                                          }
                                      }
                                  }
                                  directionsDisplay.setDirections(combinedResults);
                              }
                          }
                      });
                  })(k);
              }
          }
      };
  }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It works like a charm but I have problem to setup an infowindow for each waypoint. I would like to leave markers names like A , B ,C or generate it in otherway but to keep A,B,C or 1,2,3 pattern and I want to add infowindow to each marker which contains title text and link.</p>
  
  <p>I was trying to find any info or examples but nothing works. Maybe someone have and idea how to easily add infowindow to this code.</p>