JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCxrbE0MBmDRGnnPjyIx5RunUq_bEMxY3k&sensor=true"></script>

<div class="map_contain">
<div class="map_canvas">
    <div class="map_area" data-showcontrols="true" data-lat="26.84651" data-lng="80.94668" data-zoom="7"></div>
</div></div>

CSS

.map_contain {
    border-left: 10px solid #D2D828;
    overflow: hidden;
}
.map_canvas {
    border-bottom: 10px solid #D2D828;
    border-right: 10px solid #D2D828;
    border-top: 10px solid #D2D828;
    margin: 0 40px 0 -40px;
    overflow: hidden;
    position: relative;
    transform: skewX(10deg);
    -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
}
.map_area {
    height: 400px;
    margin: 0 -35px 0 40px;
    transform: skewX(-10deg);
    -moz-transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);
}

JavaScript

$(function() {
		$('div.map_area').each(function() {
			var data = $(this).data(),
				options = {
					center: new google.maps.LatLng(data.lat, data.lng),
					disableDefaultUI: data.showcontrols || false,
					zoom: data.zoom || 10,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					//addr: data.address
				};
			
			var map = new google.maps.Map(this, options);
		});
		
	});