// Copyright 2021 Google LLC

// 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

//     https://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 { Loader } from '@googlemaps/js-api-loader';
import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';

const apiOptions = {
  "apiKey": 'YOUR_API_KEY',
  "version": "beta",
  "map_ids": "YOUR_MAP_ID"
};

const mapOptions = {
  "tilt": 0,
  "heading": 0,
  "zoom": 18,
  "center": { lat: 35.6594945, lng: 139.6999859 },
  "mapId": "YOUR_MAP_ID"    
}


async function initMap() {    
  const mapDiv = document.getElementById("map");
  const apiLoader = new Loader(apiOptions);
  await apiLoader.load();
  return new google.maps.Map(mapDiv, mapOptions);
}


function initWebglOverlayView(map) {  
  let scene, renderer, camera, loader;
  const webglOverlayView = new google.maps.WebglOverlayView();
  
  webglOverlayView.onAdd = () => {   
    // set up the scene
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera();
    const ambientLight = new THREE.AmbientLight( 0xffffff, 0.75 ); // soft white light
    scene.add( ambientLight );
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.25);
    directionalLight.position.set(0.5, -1, 0.5);
    scene.add(directionalLight);
  
    // load the model    
    loader = new GLTFLoader();               
    const source = "pin.gltf";
    loader.load(
      source,
      gltf => {      
        gltf.scene.scale.set(25,25,25);
        gltf.scene.rotation.x = 180 * Math.PI/180; // rotations are in radians
        scene.add(gltf.scene);           
      }
    );

    const matrix = transformer.fromLatLngAltitude(mapOptions.center, 120);
    camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);
  }
  
  webglOverlayView.onContextRestored = (gl) => {        
    // create the three.js renderer, using the
    // maps's WebGL rendering context.
    renderer = new THREE.WebGLRenderer({
      canvas: gl.canvas,
      context: gl,
      ...gl.getContextAttributes(),
    });
    renderer.autoClear = false;

    // wait to move the camera until the 3D model loads
    
    loader.manager.onLoad = () => {        
      renderer.setAnimationLoop(() => {
        webglOverlayView.requestRedraw();
        map.moveCamera({
          "tilt": mapOptions.tilt,
          "heading": mapOptions.heading,
          "zoom": mapOptions.zoom
        });            
        
        // rotate the map 360 degrees 
        if (mapOptions.tilt < 67.5) {
          mapOptions.tilt += 0.5
        } else if (mapOptions.heading <= 360) {
          mapOptions.heading += 0.2;              
          mapOptions.zoom -= 0.0005;
        } else {
          renderer.setAnimationLoop(null)
        }
      });        
    }
  }

  webglOverlayView.onDraw = (gl, transformer) => {
    // update camera matrix to ensure the model is georeferenced correctly on the map     
    
    
    webglOverlayView.requestRedraw();      
    renderer.render(scene, camera);                  

    // always reset the GL state
    renderer.state.reset();
  }

  webglOverlayView.setMap(map);
}

(async () => {        
  const map = await initMap();
  const webglOverlayView = initWebglOverlayView(map);    
})();
@@ -757,45 +757,41 @@
 %7B%0A  
-%22
 apiKey
-%22
 : 
-'
+%E2%80%9C
 YOUR
-_API_KEY'
+ API KEY%E2%80%9D
 ,%0A  
-%22
 version
-%22
 : %22b
@@ -802,32 +802,32 @@
 ,%0A  
-%22
 map_ids
-%22
 : 
+%5B
 %22YOUR
-_MAP_
+ MAP 
 ID%22
+%5D
 %0A%7D;%0A
@@ -962,13 +962,13 @@
 YOUR
-_MAP_
+ MAP 
 ID%22 
@@ -974,17 +974,16 @@
     %0A%7D%0A%0A
-%0A
 async fu
@@ -3634,33 +3634,8 @@
 );%0A 
- const webglOverlayView =
  ini

resolve merge conflict