SVG is not out of the visible area of ​​Google Maps

Question

I used the Mike Bostok example to use d3 with Google Maps to display the outline. Here is my code:

http://bl.ocks.org/4959573

Everything seems beautiful, except that the outline does not extend beyond the visible area of ​​the Google Map. I managed to fix this by playing with the dimensions of the map:

#map { width: 100%; height: 3000px; top: -1000px; } 

This is not optimal and does not solve the problem completely, because if I increase too much, the size of the graph will quickly exceed the size of the map, and panning the map will make it visible.

Is there any other way to fix it?

Answer 1

OP solution for its own problem, quoted and formatted from comments:

I changed the map style to:

 #map { width: 100%; height: 100%; } 

The outline layer style has been changed as follows:

 cont_layer .attr("width","8000px") .attr("height","8000px") .style("position","absolute") .style("top","-4000px") .style("left","-4000px"); 

The x and y coordinates of the SVG paths must be shifted + 4000 pixels to compensate.