JSFiddle - React, Tailwind, and code Playground

by kpolifimos

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="top">
	<div id="map-canvas" class="circle-text">
    		<div id="googleMap"></div>
	</div>
</div>

CSS

body{
	margin:0px;
	height:900px;
	font-family: sans-serif;
}
#top{
   width:500px;
   height:500px;
   margin-left: auto;
   margin-right: auto;
   position:relative;
   z-index:0;
}
.circle-text {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    z-index:4;
}
#googleMap {
    position:relative;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
     border: 1px solid green;
    -webkit-mask-box-image: url(http://83.212.84.134/stackoverflow/mask.png);

    margin-left: auto;
    margin-right: auto;
    z-index:2;
}

JavaScript

var map = new google.maps.Map(document.getElementById('googleMap'), {
    zoom: 1,
    center: new google.maps.LatLng(35.137879, -82.836914),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});