title: Google Maps Encode Polyline Rendering Wrong
body: <p>I am having problems rendering polylines on a Google map for my univer. The result should look like the polyline on: <a href="http://goo.gl/U18jBJ" rel="nofollow">http://goo.gl/U18jBJ</a> (Google maps directions from Leeds to London).</p>
  
  <p>I am rendering individual paths from each step from the Google directions API instead of just getting a Google directions map, so that I can use a loop to render the individual paths from each step from the Google directions API and the polyline paths in the Rome2Rio Search API result. </p>
  
  <p>The following php writes out the javascript for the map:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function initialize() {
  var myLatLng = new google.maps.LatLng(53.796490000000006, -1.5473400000000002);
  var myOptions = {
      zoom: 8,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map = new google.maps.Map(document.getElementById("routeMap"), myOptions);
  
  &lt;?php $stopCounter = 0;
  foreach($travelData[0]-&gt;stops as $stop):
      echo 'var stopLatlng'.$stopCounter.' = new google.maps.LatLng('.$stop-&gt;location.');';
      echo 'var marker'.$stopCounter.' = new google.maps.Marker({
                position: stopLatlng'.$stopCounter.',
                map: map,
                title: \''.$stop-&gt;name.'\'
            });';
      ++$stopCounter;
  endforeach; 
  $segementCounter = 0;
  foreach($travelData[0]-&gt;segments as $segment):
      echo 'var routePath'.$segementCounter.' = \''.$segment-&gt;path.'\'; ';
      echo 'var path'.$segementCounter.' = google.maps.geometry.encoding.decodePath(String(routePath'.$segementCounter.')); ';
      echo 'var route'.$segementCounter.' = new google.maps.Polyline({
                path: path'.$segementCounter.',
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
              }); ';
      ++$segementCounter;
  endforeach;
  $segementCounter = 0;
  foreach($travelData[0]-&gt;segments as $segment):
      echo 'route'.$segementCounter.'.setMap(map);';
      ++$segementCounter;
  endforeach;?&gt;
  
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;div id="routeMap" class="floatLeft"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>From my research, it seems that it is the javascript which is causing problems (possibly by escaping characters) but I cannot find a resolution. The code output by the php is here: <a href="http://jsfiddle.net/phily245/ebbCX/" rel="nofollow">http://jsfiddle.net/phily245/ebbCX/</a></p>