text: /*
   * Copyright 2021 Google LLC. All Rights Reserved.
   *
   * Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *
   *     http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   */
  import * as THREE from "https://cdn.skypack.dev/three@^0.140.2";
  import { GLTFLoader } from "https://cdn.skypack.dev/three@^0.140.2/examples/jsm/loaders/GLTFLoader";
  import { ThreeJSOverlayView } from "https://cdn.skypack.dev/@googlemaps/three@^3.0.1";
  let map;
  const mapOptions = {
    tilt: 0,
    heading: 0,
    zoom: 18,
    center: { lat: 35.6594945, lng: 139.6999859 },
    mapId: "15431d2b469f209e",
    // disable interactions due to animation loop and moveCamera
    disableDefaultUI: true,
    gestureHandling: "none",
    keyboardShortcuts: false,
  };
  
  function initMap() {
    const mapDiv = document.getElementById("map");
  
    map = new google.maps.Map(mapDiv, mapOptions);
  
    const scene = new THREE.Scene();
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);
  
    scene.add(ambientLight);
  
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.25);
  
    directionalLight.position.set(0, 10, 50);
    scene.add(directionalLight);
  
    // Load the model.
    const loader = new GLTFLoader();
    const url =
      "https://raw.githubusercontent.com/googlemaps/js-samples/main/assets/pin.gltf";
  
    loader.load(url, (gltf) => {
      gltf.scene.scale.set(10, 10, 10);
      gltf.scene.rotation.x = Math.PI / 2;
      scene.add(gltf.scene);
  
      let { tilt, heading, zoom } = mapOptions;
  
      const animate = () => {
        if (tilt < 67.5) {
          tilt += 0.5;
        } else if (heading <= 360) {
          heading += 0.2;
          zoom -= 0.0005;
        } else {
          // exit animation loop
          return;
        }
  
        map.moveCamera({ tilt, heading, zoom });
        requestAnimationFrame(animate);
      };
  
      requestAnimationFrame(animate);
    });
    new ThreeJSOverlayView({
      map,
      scene,
      anchor: { ...mapOptions.center, altitude: 100 },
      THREE,
    });
  }
  
  window.initMap = initMap;
  