JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
    var map;
    var arrMarkers = [];
    var arrInfoWindows = [];
    
    function mapInit(){
        var centerCoord = new google.maps.LatLng(17.22, 78.29);
        var mapOptions = {
            zoom: 6,
            center: centerCoord,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
        var mapPoints = [];
        for(var i=0;i<4;i++){
            var pt = {};
            pt.latitude = 17 + i;
            pt.longitude = 78.0 + i;
            mapPoints.push(pt);
        }
        var count = mapPoints.length;
        for (var i = 0; i < count; i++) {
            var latlng = new google.maps.LatLng(mapPoints[i].latitude,mapPoints[i].longitude);
            var title = "test" + i;
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: title
            });
            arrMarkers[i] = marker;
            var infowindow = new google.maps.InfoWindow();
            arrInfoWindows[i] = infowindow;
            marker.myHtml = "<h3>Test this " + i + "</h3>";
            google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(this.myHtml);
                    infowindow.open(map, this);
                });
        }
    }
    $(function(){
        mapInit();
    });
</script>

<div id="container">
    <div id="map"></div>
</div>

CSS

img { border: 0; }
#map{
    width: 500px;
    height: 600px;;
    
    
}
#content {
    position: fixed;
    top: 10px;
    left: 800px;
    margin: 30px;
}