title: Google Maps with D3.geo.path
body: <p>I'm trying to follow the example in this videos:</p>
  
  <p><a href="https://www.youtube.com/watch?v=wqPGFs0cqxI" rel="nofollow">https://www.youtube.com/watch?v=wqPGFs0cqxI</a></p>
  
  <p>It's about drawing path with D3.js into Google Maps API. The console shows me the error <code>Uncaught TypeError: Object#&lt;PolylineContext&gt;"  has no method 'setCurrent'</code>.</p>
  
  <p>The index.html</p>
  
  <pre><code>&lt;head&gt;
    &lt;title&gt;App&lt;/title&gt;
    &lt;style type="text/css"&gt;
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 100%; }
      &lt;/style&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;
      &lt;/script&gt;
      &lt;script src="http://d3js.org/d3.v3.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="polyline_context.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      var map;
      var polyline;
        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(53.567, 9.944),
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById("map-canvas"),
              mapOptions);
          polyline = new google.maps.Polyline({
            map: map
          });
  
          d3init();
        }
        var context;
        var width;
        var height;
        var path;
        var graticule;
        var equator;
        var projection;
  
        function d3init() {
          width = map.getDiv().offsetWidth;
          height = map.getDiv().offsetHeight;
  
          projection = d3.geo.equirectangular()
            .translate([0, 0])
            .scale(52.29578)
            .precision(2)
  
          context = new PolylineContext();
          path = d3.geo.path().projection(projection).context(context);
          equator = {type: 'LineString', coordinates: [[-180, 20], [-90, 0], [0, -20], [90, 0], [180, 20]]};
  
          render();
        }
  
        function render() {
          polyline.setOptions({
            strokeColor: 'red',
            strokeWeight: 2
          });
          context.setCurrent(polyline.getPath());
  
          path(equator);
        }
  
        google.maps.event.addDomListener(window, 'load', initialize);
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="map-canvas"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The Polyline_context.js</p>
  
  <pre><code>'use strict';
  function PolylineContext () {
      this.currentPath = null;
      this.currentIndex = 0;
  }
  
  PolylineContext.prototype.beginPath = function() {};
  
  PolylineContext.prototype.moveTo = function(x, y) {
      if (this.currentPath) {
          var latLng = new google.maps.LatLng(y, x);
          this.currentPath.setAt(this.currentIndex, latLng);
          this.currentIndex++;
      }
  };
  
  PolylineContext.prototype.lineTo = function(x, y) {
      if (this.currentPath) {
          var latLng = new google.maps.LatLng(y, x);
          this.currentPath.setAt(this.currentIndex, latLng);
          this.currentIndex++;
      }
  };
  
  PolylineContext.prototype.arc = function(x, y, radius, startAngle, endAngle) {};
  
  PolylineContext.prototype.closePath = function() {};
  </code></pre>
  
  <p>Any ideas of what's wrong in here?</p>