D3 vs Google Data Projection

This example shows the county boundaries for Illinois. In red we see the google.maps.Data() layer in blue a D3.geo.path() with mercator projection.

The google data layer is an object which displays in the same canvas as any google overlay (polygons, markers, polylines, etc) while the D3.geo.path() shows up in an SVG container I overlap on top of the google container.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>

.counties {
  fill: none;
  stroke: #00c;
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}
#thissvg {
	position:absolute;
	left:0;
	top:0;
	z-index: 50;
}

#map-canvas {
	position:absolute;
	left:0;
	top:0;
	z-index: 30;
}

.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }

</style>
<body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

jQuery(document).ready(function() {
		jQuery('#map-canvas').width(width);
		jQuery('#map-canvas').height(height);
	}); 
	function initialize() {
 		map = new google.maps.Map(document.getElementById('map-canvas'), {
			zoom: 9,
			maxZoom:9,
			minZoom:9,
			center: {lat: 41, lng: -89.5}
		});

map.data.loadGeoJson(url);

var featureStyle = {
		    fillColor: 'transparent',
		    strokeWeight: 2,
		    strokeColor: 'red'
		  };
		  map.data.setStyle(featureStyle);
			 
			var projection=projection=d3.geo.mercator()
				.scale(40.5 * Math.pow(2, map.getZoom()))
				.translate([0,0]);

var path = d3.geo.path().projection(projection);
	
			var g_=  	d3.select('#thissvg')
				.attr("width", 900)
				.attr("height", 600)
				.append("g")
				.attr("class", "counties")
				.attr("id","pathgroup");

function ready(error, us) {
				console.log(us);
			    g_.selectAll("path")
				  .data(us.features)
				.enter().append("path")
				  .attr("d", path);

var centerPixel = projection([map.getCenter().lng(), map.getCenter().lat()]);
				var translate = [(width / 2 - centerPixel[0]), (height / 2 - centerPixel[1])];
				d3.select("#pathgroup").attr("transform", "translate(" + translate + ")scale(1)");
 			}

queue()
				.defer(d3.json, url)
				.await(ready);
		 
	}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<svg id="thissvg"/>
<div id="map-canvas"></div>
</body>
</html>

Modified http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false

https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js