Skip to content

Instantly share code, notes, and snippets.

What would you like to do?

Based on which uses D3 to draw elements into a google maps overlay layer, but doesn't use d3.geo machinery to draw map geometry. This gist illustrates how to align a D3 mercator projection with google maps so we can do standard d3 mapping stuff on top of the google API.

<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script src=""></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
#map {
margin: 0;
padding: 0;
#d3map {
/*pointer-events: none;*/
-webkit-transform: none;
position: relative;
top: 0px;
left: 0px;
#countries path {
stroke-width: 1px;
vector-effect: non-scaling-stroke;
fill: none;
stroke: #333;
<script type="text/javascript">
var width = 600,
height = 400,
div ='body')
.style('width', width + 'px')
.style('height', height + 'px');
// Create the Google Map…
var map = new google.maps.Map(div.node(), {
zoom: 2,
center: new google.maps.LatLng(37.76487, -122.41948),
mapTypeId: google.maps.MapTypeId.TERRAIN,
minZoom: 2 // stuff goes wrong if we allow world wraparound
// Load the data. When the data comes back, create an overlay.
.defer(d3.json, "world-110m.json")
var svg, overlay;
function ready(error, world) {
var countries = topojson.feature(world, world.objects.countries).features,
land = topojson.feature(world,;
overlay = new google.maps.OverlayView();
overlay.onAdd = function() {
// create an SVG over top of it.
svg =
.style('width', width + 'px')
.style('height', height + 'px')
.attr('width', width)
.attr('height', height);
overlay.draw = redraw;
google.maps.event.addListener(map, 'bounds_changed', redraw);
google.maps.event.addListener(map, 'center_changed', redraw);
function redraw() {
var bounds = map.getBounds(),
ne = bounds.getNorthEast(),
sw = bounds.getSouthWest(),
projection = d3.geo.mercator()
path = d3.geo.path()
var p1 = projection([ne.lng(),]),
p2 = projection([sw.lng(),]);'#countries').attr('transform',
'translate('+(-p2[0])+','+(-p1[1])+') ');
svg.selectAll('path').attr('d', path);
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment