JSFiddle - React, Tailwind, and code Playground

by angchen

HTML

<!DOCTYPE html>
  <!--
   @license
   Copyright 2023 Google LLC. All Rights Reserved.
   SPDX-License-Identifier: Apache-2.0
  -->
  <html>
    <head>
      <title>Aerial View</title>
      <style>
        /**
         * @license
         * Copyright 2023 Google LLC. All Rights Reserved.
         * SPDX-License-Identifier: Apache-2.0
         */
        html,
        body {
          align-items: center;
          display: flex;
          height: 100%;
          width: 100%;
          justify-content: center;
        }
        
        .aerial-view-media {
          object-fit: contain;
          height: 100%;
          width: 100%;
        }
        
        .container {
          display: flex;
          overflow: hidden;
          position: relative;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          max-height: 780px;
          max-width: 780px;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <img class="aerial-view-media">
      </div>
    </body>
    <script>
      /**
       * @license
       * Copyright 2023 Google LLC. All Rights Reserved.
       * SPDX-License-Identifier: Apache-2.0
       */
      // To use video ID as parameter input instead of address, replace parameter value with a videoID '-wVXGP6Hkogfqz6sZulUf3'.
      const PARAMETER_VALUE = '111 8th Ave, New York, NY 10011';
      const API_KEY = 'INSERT_API_KEY';
      
      async function initAerialView() {
        const displayEl = document.querySelector('img');
      
        // Parameter key can accept either 'videoId' or 'address' depending on input.
        const parameterKey = videoIdOrAddress(PARAMETER_VALUE);
        const urlParameter = new URLSearchParams();
        urlParameter.set(parameterKey, PARAMETER_VALUE);
        urlParameter.set('key', API_KEY);
        const response = await...