JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
</head>
<body >
    <div>
        <form id="myform">
             <input type="button" value="Show Map" onClick="showmap();">
        </form>
    </div>

    <div id="map_canvas"></div>    
</body>
</html>

CSS

#map_canvas {height: 500px; width: 400px;border:1px solid red;)

JavaScript

<!-- Display Map -->
function showmap() {
     
      function initialize() {
    var map;
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
            
        window.open("http://www.google.com")
        
      }

initialize();
}