title: Overlay d3 paths onto Google Maps?
body: <p>I'm trying to overlay a map onto Google Maps using d3.geo and GeoJson. I've managed to force d3 to use the Google Map's projection for drawing the paths, which was surprisingly easy. Here's what I have so far:</p>
  
  <p><a href="http://www.caudillweb.com/temp/d3_choropleth.html" rel="noreferrer">http://www.caudillweb.com/temp/d3_choropleth.html</a></p>
  
  <p>This works well as I zoom in and out:</p>
  
  <p><img src="https://i.stack.imgur.com/Z4z8W.png" alt="Map zoomed out">
  <img src="https://i.stack.imgur.com/dRJY5.png" alt="Map zoomed in"></p>
  
  <p>But when I pan, the SVG overlay moves too, and since its size is fixed, the shapes get truncated:</p>
  
  <p><img src="https://i.stack.imgur.com/Iirqt.png" alt="Map panned down"></p>
  
  <p>Has anyone gotten something like this to work? Any ideas where I could go from here? The above example is a single self-contained HTML file if anyone wants to play with it.</p>