JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<html>
    <head>
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        </head>
<body onLoad="testF()">Hello
   
                                    <div id="map_r" style="width:300px;height:400px;border:2px solid red;"></div>
    <div id="map_directions" ></div>
    </body>
</html>

CSS

#map_r{float:left;}

#map_directions{border:1px solid black;width:120px;height:100px;float:left;}

JavaScript

$("document").ready(function() {
    testF();
});function testF() {
            
            var map = new google.maps.Map(document.getElementById('map_r'), {
                zoom : 2,
                center: new google.maps.LatLng(-35.028249, 151.157507),
                mapTypeControl: false, //will remove the top right corner Map type(Satellite/Map)
                //scaleControl: false,
                navigationControl: false,
                mapTypeId: google.maps.MapTypeId.TERRAIN
    });
   
                                             
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(-35.028249, 151.157507), 
            map: map,
            title: 'My workplace',
            clickable: true,
            
          });
           // Creating an InfowWindow          
          var infowindow = new google.maps.InfoWindow({
            content: 'Showing Zoomed Locations to the right'
          });
          
          // Adding a click event to the marker
          google.maps.event.addListener(marker, 'click', function() {
            // Opening the InfoWindow
              infowindow.open(map, marker);
              
            var map = new google.maps.Map(document.getElementById('map_directions'), {
                zoom : 10,
                center: new google.maps.LatLng(-35.028249, 151.157507),
                mapTypeControl: false, //will remove the top right corner Map type(Satellite/Map)
                //scaleControl: false,
                navigationControl: false,
                mapTypeId: google.maps.MapTypeId.TERRAIN
                });              
          });      
    }