JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="fluid-wrapper">
	<div id="map-canvas"></div>
	<canvas id="activity-reach"></canvas>
</div>

CSS

.fluid-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
#map-canvas, #activity-reach{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
#activity-reach{
    z-index: 1;
    pointer-events:none;
}

JavaScript

var mapReach = {
	init: function(mapId, canvasId) {
		var myLatlng = new google.maps.LatLng(30,0); // Add the coordinates
		var mapOptions = {
			zoom: 3, // The initial zoom level when your map loads (0-20)
			minZoom: 3, // Minimum zoom level allowed (0-20)
			maxZoom: 17, // Maximum soom level allowed (0-20)
			zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
			zoomControlOptions: {
				style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
			},
			center: myLatlng, // Centre the Map to our coordinates variable
			mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
			scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
			mapTypeControl:false, // Disable Map/Satellite switch
			scaleControl:false, // Set to false to hide scale
			streetViewControl:false, // Set to disable to hide street view
			overviewMapControl:false, // Set to false to remove overview control
			rotateControl:false // Set to false to disable rotate control
		};
		var mapStyles = [
			{
				"featureType": "landscape.natural",
				"stylers": [
					{ "visibility": "on" },
					{ "color": "#08304b" }
				]
			},{
				"featureType": "water",
				"stylers": [
					{ "color": "#011018" }
				]
			},{
				"featureType": "administrative.country",
				"elementType": "geometry",
				"stylers": [
					{ "visibility": "on" },
					{ "weight": 0.5 },
					{ "color": "#124b5e" }
				]
			},{
				"featureType": "administrative",
				"stylers": [
					{ "weight": 0.1 },
					{ "color": "#ffffff" },
					{ "visibility": "on" }
				]
			},{
				"featureType": "administrative.province",
				"stylers": [
					{ "visibility": "off" }
				]
			},{
				"featureType": "landscape.natural.terrain",
				"stylers": [
					{ "visibility": "off" }
				]
			},{
				"featureType": "poi",
				"stylers": [
					{ "visibility": "off" }
				]
			},{
				"featureType":...