title: Populating infowindow in Google Map dynamically with html element (contentString variable)
body: <p>I'm using "get directions" functionality to create a simple route search script which finds the best route between two points.</p>
  
  <p>When you get directions, it's in this form:</p>
  
  <pre><code>Turn left at...
  
  Keep right...
  
  Continue onto...
  </code></pre>
  
  <p>What I want is an option to click on these messages, which opens a marker on the map with info window. The problem is that the info window should contain the message clicked:</p>
  
  <p>When I click "Keep right...", there should be a marker opened on the coordinate of that message with content "Keep right...". I'm missing the last part - populating a marker with such content.</p>
  
  <p>Here are important parts of the code:</p>
  
  <pre class="lang-js prettyprint-override"><code>var directionDisplay;
  var directionsService;
  var map;
  var contentString = ???;
  var infoWindow;
  var marker;
  var Here;
  
  function initialize() {
    var rendererOptions = {
      draggable: true
    };
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsService = new google.maps.DirectionsService();
    Here = new google.maps.LatLng(0, 0);
    var myOptions = {
        zoom: 1,
        center: Here,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: true,
        scaleControl: true
    }
    map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("guide"));
    infoWindow = new google.maps.InfoWindow({
      content: contentString
    });
    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.open(map,marker);
    });
  }
  
  function calcRoute() {
    var request;
    var so;
    var start = document.getElementById("from").value;
    var end = document.getElementById("to").value;
  ...
    }
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
  ...
  }
  </code></pre>
  
  <p>I tried populating contentString variable with some strings, even with "contentString", but nothing happens.</p>
  
  <p>Here is a code of one of the rows with instructions:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;tr jseval="setupPanelStep(this, $legIndex, $index)" jsselect="steps" jstcache="12" jsinstance="12"&gt;
    &lt;td jscontent="($index + 1) + '.'" class="adp-substep" jstcache="14"&gt;13.&lt;/td&gt;
    &lt;td jsvalues=".innerHTML:format(instructions)" class="adp-substep" jstcache="15"&gt;Continue onto &lt;b jstcache="0"&gt;A1&lt;/b&gt;&lt;div style="font-size: 0.9em;" jstcache="0"&gt;Toll road&lt;/div&gt;&lt;/td&gt;
    &lt;td class="adp-substep" jstcache="0"&gt;&lt;div jscontent="distance['text']" class="adp-distance" jstcache="16"&gt;123 km&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This is part of the code which displays a script to the user:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form id="Googlemap" style="height:800px;" action="#"&gt;
  &lt;div style="width:250px; float:left;"&gt;
  &lt;div class="title"&gt;GET DIRECTIONS&lt;/div&gt;
  &lt;div id="123"&gt;
  &lt;div style="width:250px; margin-bottom: 5px;"&gt;&lt;span style="width:54px; float:left;"&gt;FROM&lt;/span&gt;
  &lt;input type="text" id="from" name="from" /&gt;
  &lt;/div&gt;
  &lt;div style="width:250px; margin-bottom: 5px;"&gt;&lt;span style="width:54px; float:left;"&gt;TO&lt;/span&gt;
  &lt;input type="text" id="to" name="to" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;input type="checkbox" id="tolls" /&gt;&lt;label for="tolls"&gt;Avoid tolls&lt;/label&gt;
  &lt;input type="checkbox" id="highways" /&gt;&lt;label for="highways"&gt;Avoid highways&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>