JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=drawing"></script>
<table border="1">
      <tr>
        <th>add some features  then run the test</th>
        <th>test-result</th>
      </tr>
      <tr>
        <td><div></div></td>
        <td><div></div></td>
      </tr>
    </table>

CSS

html, body, table {
        height: 100%;
        width:100%;
        margin: 0px;
        padding: 0px
      }
      td{width:50%;height: 100%;
        padding:0;
      }
      td>div{height: 100%;}
      th{
      height:20px;
      }

JavaScript

function initialize() {
  // Create a simple map.
  map = new google.maps.Map(document.getElementsByTagName('TD')[0].firstChild, {
    zoom: 4,
    center: {lat: -28, lng: 137.883},
    disableDefaultUI:true
  });
  map2 = new google.maps.Map(document.getElementsByTagName('TD')[1].firstChild, {
    zoom: map.getZoom(),
    center: map.getCenter()
  });
  map2.bindTo('zoom',map,'zoom');
  map2.bindTo('center',map,'center');
  map.data.setStyle(function(feature) {
    if(feature.getProperty('radius') && feature.getGeometry().getType()==='Point'){
        return {
        visible:false
      };
    }
    
    return {
      
    };
});
  map2.data.setStyle(function(feature) {
    if(feature.getProperty('radius') && feature.getGeometry().getType()==='Point'){
    
    new google.maps.Circle({map:map2,center:feature.getGeometry().get(),radius:feature.getProperty('radius')});
        return {
        visible:false
      };
    }
    
    return {
      
    };
});
  
  map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');

  google.maps.event.addListenerOnce(map.data,'addfeature',function(){
    var btn=document.createElement('input');
    btn.type='button';
    btn.value='click here to test the geoJson-export in the right map';
    google.maps.event.addDomListener(btn,'click',function(){
      map2.data.forEach(function(f){map2.data.remove(f);});
      map.getGeoJson(function(geo){console.log(map2.data.addGeoJson(geo));});
    });
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(btn);
  
  });
  var drawingManager = new google.maps.drawing.DrawingManager({
  map:map,
  drawingMode: google.maps.drawing.OverlayType.MARKER,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP,
    drawingModes: [
      google.maps.drawing.OverlayType.MARKER,
      google.maps.drawing.OverlayType.POLYGON,
      google.maps.drawing.OverlayType.POLYLINE,
      google.maps.drawing.OverlayType.CIRCLE,
    ...