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-wrap {
width: 500px;
height: 500px;
overflow: hidden;
}
#map {
width: 1000px; /* just big enough to show the whole thing at zoom #6 */
height: 1000px;
}
.SvgOverlay, .SvgOverlay svg {
position: absolute;
top: 0;
left: 0;
}
.SvgOverlay path {
stroke: Orange;
stroke-width: 2px;
fill: Orange;
fill-opacity: .3;
}
</style>
</head>
<body>
<div id="map-wrap">
<div id="map">
</div>
</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}]}]
});
google.maps.event.addListener(map, 'bounds_changed', function() {
$map.css({ height: '500px', width: '500px' });
google.maps.event.trigger(map, 'resize');
map.setCenter(new google.maps.LatLng(-18.2, 35.1));
google.maps.event.clearListeners(map, 'bounds_changed');
});
var geoJson = provinces();
var overlay = new google.maps.OverlayView();
overlay.onAdd = function () {
var...