GoogleMap上に透過画像を貼りたい

前提・実現したいこと

Google Mapに貼り付けた画像だけを透過させて後ろにMapが重なるようにしたい。

発生している問題・エラーメッセージ

エラーはないが、
現状のコードだと透過させようとすると、Mapも透過されてしまっている。

該当のソースコード

HTML/JS
1<!DOCTYPE html>
2<html lang="ja">
3<link rel="stylesheet" href="style.css">
4  <head>
5    <meta charset="utf-8">
6    <title>Google Maps API サンプル</title>
7  </head>
8    <body>
9    <p>東京都市の古地図です。</p>
10
11    <!--オーバーレイ画像　ボタンクリック　表示・非表示-->
12    <div id = "floating-panel">
13      <input onclick = "removeOverlay();" type="button" value="古地図の非表示" />
14      <input onclick = "addOverlay();" type="button" value="古地図の表示" />
15    </div>
16
17    <div style="margin:5px;">
18      <input type="radio" name="rdo" value="0">0%
19      <input type="radio" name="rdo" value="0.3">30%
20      <input type="radio" name="rdo" value="0.5">50%
21      <input type="radio" name="rdo" value="0.8">80%
22      <input type="radio" name="rdo" value="1.0">100%
23      <input type="button" value="ボタン" onclick="touka();" style="width:100px;margin-left:10px;">
24    </div>
25    <div id="historicalOverlay">
26
27    </div>
28
29
30    <div id="map" style="width:100%; height:500px"></div>
31
32
33    <script type="text/javascript">
34    /*オーバーレイ画像の座標*/
35          var imageBounds = {
36            north: 35.6983223,
37            south: 35.658584,
38            east: 139.7730186,
39            west: 139.7454316,
40          };
41          historicalOverlay = new google.maps.GroundOverlay(
42            //画像のURL
43            "",
44            imageBounds
45          );
46          historicalOverlay.setMap(map);
47        }
48/*1*/
49    function initMap() {
50        var opts = {
51          zoom:5,
52          center: new google.maps.LatLng(35.6809591,139.7673068)
53        };
54        var map = new google.maps.Map(document.getElementById("map"), opts);
55    }
56    let historicalOverlay;
57/*2*/
58    function initMap() {
59      map = new google.maps.Map(document.getElementById("map"), {
60        zoom: 13,
61        center: { lat: 35.6809591, lng: 139.7673068 },
62      });
63
64      var obj = document.getElementById("historicalOverlay");
65
66/*透過率のコード*/
67    function touka(){
68
69      var radios = document.getElementsByName("rdo");
70      var result;
71      for(var i=0; i<radios.length; i++){
72        if (radios[i].checked) {
73          result = radios[i].value;
74          break;
75        }
76      }
77    document.getElementById("map").style.opacity = parseFloat(result);
78    }
79
80
81/*functionでオーバーレイの画像を表示・非表示*/
82    function addOverlay() {
83      historicalOverlay.setMap(map);
84    }
85    function removeOverlay(){
86      historicalOverlay.setMap(null);
87    }
88
89
90    </script>
91<!--APIの指定-->
92       <script async defer
93        src="API">
94       </script>
95     </body>
96</html>