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-09-04 UTC."],[[["\u003cp\u003eThis example showcases the use of \u003ccode\u003eWebGLOverlayView\u003c/code\u003e with the \u003ccode\u003ejs-three\u003c/code\u003e library to render a 3D model on a Google Map.\u003c/p\u003e\n"],["\u003cp\u003eIt features a 3D pin model with ambient and directional lighting, positioned and scaled within the scene.\u003c/p\u003e\n"],["\u003cp\u003eThe example includes an animation loop that adjusts the map's tilt, heading, and zoom over time for a dynamic effect.\u003c/p\u003e\n"],["\u003cp\u003eSample code is provided in both TypeScript and JavaScript, along with HTML and CSS for setup and styling.\u003c/p\u003e\n"]]],[],null,["# WebGL Overlay (ThreeJS wrapper)\n\nThis example demonstrates using the `WebGLOverlayView` to display a 3D image\nwith animation on a vector map, using the [js-three](https://github.com/googlemaps/js-three)\nlibrary.\n\nRead the [documentation](/maps/documentation/javascript/webgl/webgl-overlay-view). \n\n### TypeScript\n\n```typescript\nimport * as THREE from \"three\";\n\nimport { GLTFLoader } from \"three/examples/jsm/loaders/GLTFLoader\";\nimport { ThreeJSOverlayView } from \"@googlemaps/three\";\n\nlet map: google.maps.Map;\n\nconst mapOptions = {\n tilt: 0,\n heading: 0,\n zoom: 18,\n center: { lat: 35.6594945, lng: 139.6999859 },\n mapId: \"15431d2b469f209e\",\n // disable interactions due to animation loop and moveCamera\n disableDefaultUI: true,\n gestureHandling: \"none\",\n keyboardShortcuts: false,\n};\n\nfunction initMap(): void {\n const mapDiv = document.getElementById(\"map\") as HTMLElement;\n\n map = new google.maps.Map(mapDiv, mapOptions);\n\n const scene = new THREE.Scene();\n\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);\n\n scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.25);\n\n directionalLight.position.set(0, 10, 50);\n scene.add(directionalLight);\n\n // Load the model.\n const loader = new GLTFLoader();\n const url =\n \"https://raw.githubusercontent.com/googlemaps/js-samples/main/assets/pin.gltf\";\n\n loader.load(url, (gltf) =\u003e {\n gltf.scene.scale.set(10, 10, 10);\n gltf.scene.rotation.x = Math.PI / 2;\n scene.add(gltf.scene);\n\n let { tilt, heading, zoom } = mapOptions;\n\n const animate = () =\u003e {\n if (tilt \u003c 67.5) {\n tilt += 0.5;\n } else if (heading \u003c= 360) {\n heading += 0.2;\n zoom -= 0.0005;\n } else {\n // exit animation loop\n return;\n }\n\n map.moveCamera({ tilt, heading, zoom });\n\n requestAnimationFrame(animate);\n };\n\n requestAnimationFrame(animate);\n });\n\n new ThreeJSOverlayView({\n map,\n scene,\n anchor: { ...mapOptions.center, altitude: 100 },\n THREE,\n });\n}\n\ndeclare global {\n interface Window {\n initMap: () =\u003e void;\n }\n}\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/threejs-overlay-simple/index.ts#L18-L97\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\nimport * as THREE from \"three\";\nimport { GLTFLoader } from \"three/examples/jsm/loaders/GLTFLoader\";\nimport { ThreeJSOverlayView } from \"@googlemaps/three\";\nlet map;\nconst mapOptions = {\n tilt: 0,\n heading: 0,\n zoom: 18,\n center: { lat: 35.6594945, lng: 139.6999859 },\n mapId: \"15431d2b469f209e\",\n // disable interactions due to animation loop and moveCamera\n disableDefaultUI: true,\n gestureHandling: \"none\",\n keyboardShortcuts: false,\n};\n\nfunction initMap() {\n const mapDiv = document.getElementById(\"map\");\n\n map = new google.maps.Map(mapDiv, mapOptions);\n\n const scene = new THREE.Scene();\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);\n\n scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.25);\n\n directionalLight.position.set(0, 10, 50);\n scene.add(directionalLight);\n\n // Load the model.\n const loader = new GLTFLoader();\n const url =\n \"https://raw.githubusercontent.com/googlemaps/js-samples/main/assets/pin.gltf\";\n\n loader.load(url, (gltf) =\u003e {\n gltf.scene.scale.set(10, 10, 10);\n gltf.scene.rotation.x = Math.PI / 2;\n scene.add(gltf.scene);\n\n let { tilt, heading, zoom } = mapOptions;\n\n const animate = () =\u003e {\n if (tilt \u003c 67.5) {\n tilt += 0.5;\n } else if (heading \u003c= 360) {\n heading += 0.2;\n zoom -= 0.0005;\n } else {\n // exit animation loop\n return;\n }\n\n map.moveCamera({ tilt, heading, zoom });\n requestAnimationFrame(animate);\n };\n\n requestAnimationFrame(animate);\n });\n new ThreeJSOverlayView({\n map,\n scene,\n anchor: { ...mapOptions.center, altitude: 100 },\n THREE,\n });\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/threejs-overlay-simple/docs/index.js#L17-L85\n```\n| **Note:** The JavaScript is compiled from the TypeScript snippet.\n\n### CSS\n\n```css\n/* \n * Always set the map height explicitly to define the size of the div element\n * that contains the map. \n */\n#map {\n height: 100%;\n}\n\n/* \n * Optional: Makes the sample page fill the window. \n */\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n}\n\n#map {\n pointer-events: none;\n}\nhttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/threejs-overlay-simple/docs/style.css#L7-L28\n```\n\n### HTML\n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003eSimple ThreeJS Overlay View\u003c/title\u003e\n\n \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./style.css\" /\u003e\n \u003cscript type=\"module\" src=\"./index.js\"\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"map\" class=\"map\"\u003e\u003c/div\u003e\n\n \u003c!-- \n The `defer` attribute causes the script to execute after the full HTML\n document has been parsed. For non-blocking uses, avoiding race conditions,\n and consistent behavior across browsers, consider loading using Promises. See\n https://developers.google.com/maps/documentation/javascript/load-maps-js-api\n for more information.\n --\u003e\n \u003cscript\n src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly\"\n defer\n \u003e\u003c/script\u003e\n \u003c/body\u003e\n\u003c/html\u003ehttps://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/threejs-overlay-simple/docs/index.html#L8-L30\n```\n\n### Try Sample\n\n[Google Cloud Shell](https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https%3A%2F%2Fgithub.com%2Fgooglemaps%2Fjs-samples&cloudshell_git_branch=sample-threejs-overlay-simple&cloudshell_tutorial=cloud_shell_instructions.md&cloudshell_workspace=.)\n\n### Clone Sample\n\n\nGit and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. \n\n git clone -b sample-threejs-overlay-simple https://github.com/googlemaps/js-samples.git\n cd js-samples\n npm i\n npm start\n\n\nOther samples can be tried by switching to any branch beginning with `sample-`\u003cvar translate=\"no\"\u003eSAMPLE_NAME\u003c/var\u003e. \n\n git checkout sample-\u003cvar translate=\"no\"\u003e\u003cspan class=\"devsite-syntax-nx\"\u003eSAMPLE_NAME\u003c/span\u003e\u003c/var\u003e\n npm i\n npm start"]]
