JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
#map {
width: 500px;
height: 500px;
}
.SvgOverlay {
}
.SvgOverlay, .SvgOverlay svg {
position: absolute;
top: -250px;
left: -250px;
padding: 500px;
}
.SvgOverlay path {
stroke: Orange;
stroke-width: 2px;
fill: Orange;
fill-opacity: .3;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
$(function () {
var $map=$("#map");
var map = new google.maps.Map($map[0], {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(-18.2, 35.1), // Mozambique
styles:[{"stylers": [{"saturation": -75},{"lightness": 75}]}]
});
var geoJson = provinces();
var overlay = new google.maps.OverlayView();
overlay.onAdd = function () {
var layer = d3.select(this.getPanes().overlayLayer).append("div").attr("class", "SvgOverlay");
var svg = layer.append("svg")
.attr("width", 1000)
.attr("height", 1000)
var adminDivisions = svg.append("g").attr("class", "AdminDivisions");
overlay.draw = function () {
var markerOverlay = this;
var overlayProjection = markerOverlay.getProjection();
// Turn the overlay projection into a d3...