【google map api】地図とオープンストリートを同時に表示したい

概要
内容

概要

地図とオープンストリートを同時に表示する。幅は50%と50%。
地図とオープンストリートを切り替える。切り替えは100%と0%あるいは0%と100%。
ボーダーはマウスでドラッグして変更可能。
ライセンスはMaps JavaScript APIを2つのみ。

内容

htmlの内容を以下に示します。
google のgoogle map api keyは”YOUR_KEY”は適時、修正してください。

<!DOCTYPE html>
<html>
<head>
  <title>Street View + Map Split</title>
  <style>

    html {
      overflow-y: scroll;   /* 常に縦スクロールバーを表示 */
      overflow-x: hidden;   /* 横スクロールバーは非表示 */
    }

    html, body {
      height: 100%;
      margin: 5;
    }

    body {
      box-sizing: border-box;
    }

    #header{
      height: 20%;
      width: 100%;
    }
    #footer{
      height: 10%;
      width: 100%;
    }
    #container {
      display: flex;
      height: 70%;
      width: 100%;
    }
    #smap, #map {
      flex: 1;
    }
    #divider {
      width: 5px;
      background: #666;
      cursor: ew-resize;
      z-index: 10;
    }
  </style>
</head>
<body>

    <div id="header"> 
        <button onclick="view_smap()">ストリートビュー</button>
        <button onclick="view_map()">地図</button>
        <button onclick="view_smap_and_map()">2画面表示</button>
    </div>
    <div id="container">
      <div id="smap"></div>
      <div id="divider"></div>
      <div id="map"></div>
    </div>
    <div id="footer"> </div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
   <script>
    const tokyo = { lat: 35.6895, lng: 139.6917 };
    var map = new google.maps.Map(document.getElementById("map"), {
      center: tokyo,
      zoom: 14
    });

    var  smap = new google.maps.StreetViewPanorama(
      document.getElementById("smap"),
      {
        position: tokyo,
        pov: { heading: 165, pitch: 0 }
      }
    );

    map.setStreetView(smap);

    // Divider drag logic
    const divider = document.getElementById("divider");
    const container = document.getElementById("container");
    const smapDiv = document.getElementById("smap");
    const mapDiv = document.getElementById("map");

    var isDragging = false;

    divider.addEventListener("mousedown", () => {
      isDragging = true;
      document.body.style.cursor = "ew-resize";
    });

    window.addEventListener("mouseup", () => {
      isDragging = false;
      document.body.style.cursor = "default";
    });

    window.addEventListener("mousemove", (e) => {
      if (!isDragging) return;
      const totalWidth = container.offsetWidth;
      const x = e.clientX;
      const leftRatio = x / totalWidth;
      smapDiv.style.flex = leftRatio;
      mapDiv.style.flex = 1 - leftRatio;
      google.maps.event.trigger(map, "resize");
      google.maps.event.trigger(smap, "resize");
    });
  </script>

  <script>
    function view_smap() {
      smapDiv.style.flex = 1;
      mapDiv.style.flex = 0;
      google.maps.event.trigger(map, "resize");
      google.maps.event.trigger(smap, "resize");
      smap.setPov({ heading: 165, pitch: 0 }); 
    }
    function view_map() {
      smapDiv.style.flex = 0;
      mapDiv.style.flex = 1;
      google.maps.event.trigger(map, "resize");
      google.maps.event.trigger(smap, "resize");
      smap.setPov({ heading: 165, pitch: 0 }); 
    }
    function view_smap_and_map() {
      smapDiv.style.flex = 0.5;
      mapDiv.style.flex = 0.5;
      google.maps.event.trigger(map, "resize");
      google.maps.event.trigger(smap, "resize");
      smap.setPov({ heading: 165, pitch: 0 }); 
    }
  </script>  
</body>
</html>