park-brian/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.regions, .regions svg {
  position: absolute;
}

.regions svg {
  width: 40px;
  height: 40px;
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, Arial, sans-serif;
}

.regions circle {
  fill: #1E8BC3;
}


</style>
<div id="map"></div>
<script src="//maps.google.com/maps/api/js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 2,
  center: new google.maps.LatLng(0, 0),
  mapTypeControl: false
});

map.setOptions({
  styles: [
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#81CFE0"
            },
            {
                "lightness": 17
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#f5f5f5"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#ffffff"
            },
            {
                "lightness": 17
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#ffffff"
            },
            {
                "lightness": 29
            },
            {
                "weight": 0.2
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#ffffff"
            },
            {
                "lightness": 18
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#ffffff"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#f5f5f5"
            },
            {
                "lightness": 21
            }
        ]
    },
    {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#dedede"
            },
            {
                "lightness": 21
            }
        ]
    },
    {
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#ffffff"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "saturation": 36
            },
            {
                "color": "#333333"
            },
            {
                "lightness": 40
            }
        ]
    },
    {
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#f2f2f2"
            },
            {
                "lightness": 19
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#fefefe"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#dfdfdf"
            },
            {
                "lightness": 17
            },
            {
                "weight": 1.2
            }
        ]
    },
    {
      "elementType": "labels",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    }
]
})


var data = [
  {label: "Africa", coordinates: [15, 15], projects: 2000},
  {label: "Europe", coordinates: [10, 52], projects: 6102},
  {label: "Asia", coordinates: [85, 50], projects: 1101},
  {label: "North America", coordinates: [-105, 50], projects: 9104},
  {label: "South America", coordinates: [-60, -14], projects: 2105},
  {label: "Oceania", coordinates: [130, -21], projects: 4108},
]

var overlay = new google.maps.OverlayView();

// Add the container when the overlay is added to the map.
overlay.onAdd = function() {
  var layer = d3.select(this.getPanes().overlayLayer)
    .style('z-index', '9999')
    .append("div")
      .attr("class", "regions")

  // Draw each marker as a separate SVG element.
  // We could use a single SVG, but what size would it have?
  overlay.draw = function() {
    var projection = this.getProjection(),
        padding = 10;

    var marker = layer.selectAll("svg")
        .data(d3.entries(data))
        .each(transform) // update existing markers
      .enter().append("svg")
        .each(transform)
        .attr("class", "marker");

    var containerWidth = 40;

    // Add a circle.
    marker.append("circle")
        .attr("r", 20)
        .attr("cx", containerWidth/2)
        .attr("cy", containerWidth/2)

        .on('mouseover', function() {
          alert('hello!')
        });

    // Add a label.
    marker.append("text")
        .attr("x", containerWidth/2)
        .attr("y", containerWidth/2 + 5)
        .attr('text-anchor', 'middle')
        .attr('font-size', '12px')
        .attr('fill', 'white')
        .text(function(d) { return d.value.projects; });


    function transform(d) {
      d = new google.maps.LatLng(d.value.coordinates[1], d.value.coordinates[0]);
      d = projection.fromLatLngToDivPixel(d);
      return d3.select(this)
          .style("left", (d.x - padding) + "px")
          .style("top", (d.y - padding) + "px");
    }
  };
};

// Bind our overlay to the map…
overlay.setMap(map);

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<style>

	html, body, #map {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	.regions, .regions svg {
	position: absolute;
	}

	.regions svg {
	width: 40px;
	height: 40px;
	font-size: 10px;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, Arial, sans-serif;
	}

	.regions circle {
	fill: #1E8BC3;
	}





	</style>
	<div id="map"></div>
	<script src="//maps.google.com/maps/api/js"></script>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	// Create the Google Map…
	var map = new google.maps.Map(d3.select("#map").node(), {
	zoom: 2,
	center: new google.maps.LatLng(0, 0),
	mapTypeControl: false
	});

	map.setOptions({
	styles: [
	{
	"featureType": "water",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#81CFE0"
	},
	{
	"lightness": 17
	}
	]
	},
	{
	"featureType": "landscape",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#f5f5f5"
	},
	{
	"lightness": 20
	}
	]
	},
	{
	"featureType": "road.highway",
	"elementType": "geometry.fill",
	"stylers": [
	{
	"color": "#ffffff"
	},
	{
	"lightness": 17
	}
	]
	},
	{
	"featureType": "road.highway",
	"elementType": "geometry.stroke",
	"stylers": [
	{
	"color": "#ffffff"
	},
	{
	"lightness": 29
	},
	{
	"weight": 0.2
	}
	]
	},
	{
	"featureType": "road.arterial",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#ffffff"
	},
	{
	"lightness": 18
	}
	]
	},
	{
	"featureType": "road.local",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#ffffff"
	},
	{
	"lightness": 16
	}
	]
	},
	{
	"featureType": "poi",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#f5f5f5"
	},
	{
	"lightness": 21
	}
	]
	},
	{
	"featureType": "poi.park",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#dedede"
	},
	{
	"lightness": 21
	}
	]
	},
	{
	"elementType": "labels.text.stroke",
	"stylers": [
	{
	"visibility": "on"
	},
	{
	"color": "#ffffff"
	},
	{
	"lightness": 16
	}
	]
	},
	{
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"saturation": 36
	},
	{
	"color": "#333333"
	},
	{
	"lightness": 40
	}
	]
	},
	{
	"elementType": "labels.icon",
	"stylers": [
	{
	"visibility": "off"
	}
	]
	},
	{
	"featureType": "transit",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#f2f2f2"
	},
	{
	"lightness": 19
	}
	]
	},
	{
	"featureType": "administrative",
	"elementType": "geometry.fill",
	"stylers": [
	{
	"color": "#fefefe"
	},
	{
	"lightness": 20
	}
	]
	},
	{
	"featureType": "administrative",
	"elementType": "geometry.stroke",
	"stylers": [
	{
	"color": "#dfdfdf"
	},
	{
	"lightness": 17
	},
	{
	"weight": 1.2
	}
	]
	},
	{
	"elementType": "labels",
	"stylers": [
	{
	"visibility": "off"
	}
	]
	}
	]
	})


	var data = [
	{label: "Africa", coordinates: [15, 15], projects: 2000},
	{label: "Europe", coordinates: [10, 52], projects: 6102},
	{label: "Asia", coordinates: [85, 50], projects: 1101},
	{label: "North America", coordinates: [-105, 50], projects: 9104},
	{label: "South America", coordinates: [-60, -14], projects: 2105},
	{label: "Oceania", coordinates: [130, -21], projects: 4108},
	]

	var overlay = new google.maps.OverlayView();

	// Add the container when the overlay is added to the map.
	overlay.onAdd = function() {
	var layer = d3.select(this.getPanes().overlayLayer)
	.style('z-index', '9999')
	.append("div")
	.attr("class", "regions")

	// Draw each marker as a separate SVG element.
	// We could use a single SVG, but what size would it have?
	overlay.draw = function() {
	var projection = this.getProjection(),
	padding = 10;

	var marker = layer.selectAll("svg")
	.data(d3.entries(data))
	.each(transform) // update existing markers
	.enter().append("svg")
	.each(transform)
	.attr("class", "marker");

	var containerWidth = 40;

	// Add a circle.
	marker.append("circle")
	.attr("r", 20)
	.attr("cx", containerWidth/2)
	.attr("cy", containerWidth/2)

	.on('mouseover', function() {
	alert('hello!')
	});

	// Add a label.
	marker.append("text")
	.attr("x", containerWidth/2)
	.attr("y", containerWidth/2 + 5)
	.attr('text-anchor', 'middle')
	.attr('font-size', '12px')
	.attr('fill', 'white')
	.text(function(d) { return d.value.projects; });


	function transform(d) {
	d = new google.maps.LatLng(d.value.coordinates[1], d.value.coordinates[0]);
	d = projection.fromLatLngToDivPixel(d);
	return d3.select(this)
	.style("left", (d.x - padding) + "px")
	.style("top", (d.y - padding) + "px");
	}
	};
	};

	// Bind our overlay to the map…
	overlay.setMap(map);

	</script>