title: Google maps directions using stored results
body: <p>I am trying to put together an app where I can query googles directions service, store the results to build up a cache then render the directions as I need them.</p>
  
  <p>I can get the direction data back and store it in the database just fine, and thats all good, now when I go to render the directions over the map my javascript really lets me down. (strData) is a string containing the json formatted directions from the database.</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="map.aspx.cs" Inherits="panto" %&gt;
  &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 http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;Google Maps JavaScript API v3 Example: Directions Simple&lt;/title&gt;
  &lt;link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  
  function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var chicago = new google.maps.LatLng(41.850033, -87.6500523);
      var myOptions = {
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: chicago
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      directionsDisplay.setMap(map);
      directionsDisplay.setDirections(&lt;%= strData %&gt;);
  }
  
  function calcRoute() {
      var start = document.getElementById("start").value;
      var end = document.getElementById("end").value;
      var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function (response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
              alert(response);
              directionsDisplay.setDirections(response);
          }
      });
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
  &lt;div&gt;
  
  &lt;/div&gt;
  &lt;div id="map_canvas" style="top:30px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The firefox error console reports the error</p>
  
  <pre><code>Error: g[Xb] is not a function
  Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/5/11/main.js
  Line: 109
  </code></pre>
  
  <p>any help would be greatly appreciated</p>