import*asTHREEfrom"three";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader";import{ThreeJSOverlayView}from"@googlemaps/three";letmap:google.maps.Map;constmapOptions={tilt:0,heading:0,zoom:18,center:{lat:35.6594945,lng:139.6999859},mapId:"15431d2b469f209e",// disable interactions due to animation loop and moveCameradisableDefaultUI:true,gestureHandling:"none",keyboardShortcuts:false,};functioninitMap():void{constmapDiv=document.getElementById("map")asHTMLElement;map=newgoogle.maps.Map(mapDiv,mapOptions);constscene=newTHREE.Scene();constambientLight=newTHREE.AmbientLight(0xffffff,0.75);scene.add(ambientLight);constdirectionalLight=newTHREE.DirectionalLight(0xffffff,0.25);directionalLight.position.set(0,10,50);scene.add(directionalLight);// Load the model.constloader=newGLTFLoader();consturl="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;constanimate=()=>{if(tilt<67.5){tilt+=0.5;}elseif(heading<=360){heading+=0.2;zoom-=0.0005;}else{// exit animation loopreturn;}map.moveCamera({tilt,heading,zoom});requestAnimationFrame(animate);};requestAnimationFrame(animate);});newThreeJSOverlayView({map,scene,anchor:{...mapOptions.center,altitude:100},THREE,});}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
import*asTHREEfrom"three";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader";import{ThreeJSOverlayView}from"@googlemaps/three";letmap;constmapOptions={tilt:0,heading:0,zoom:18,center:{lat:35.6594945,lng:139.6999859},mapId:"15431d2b469f209e",// disable interactions due to animation loop and moveCameradisableDefaultUI:true,gestureHandling:"none",keyboardShortcuts:false,};functioninitMap(){constmapDiv=document.getElementById("map");map=newgoogle.maps.Map(mapDiv,mapOptions);constscene=newTHREE.Scene();constambientLight=newTHREE.AmbientLight(0xffffff,0.75);scene.add(ambientLight);constdirectionalLight=newTHREE.DirectionalLight(0xffffff,0.25);directionalLight.position.set(0,10,50);scene.add(directionalLight);// Load the model.constloader=newGLTFLoader();consturl="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;constanimate=()=>{if(tilt<67.5){tilt+=0.5;}elseif(heading<=360){heading+=0.2;zoom-=0.0005;}else{// exit animation loopreturn;}map.moveCamera({tilt,heading,zoom});requestAnimationFrame(animate);};requestAnimationFrame(animate);});newThreeJSOverlayView({map,scene,anchor:{...mapOptions.center,altitude:100},THREE,});}window.initMap=initMap;
/** Always set the map height explicitly to define the size of the div element* that contains the map.*/#map{height:100%;}/** Optional: Makes the sample page fill the window.*/html,body{height:100%;margin:0;padding:0;}#map{pointer-events:none;}
<html>
<head>
<title>Simple ThreeJS Overlay View</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-12-11 UTC."],[],[]]
