// Create a map instance.constmap=newgoogle.maps.Map(mapDiv,mapOptions);// Create a WebGL Overlay View instance.constwebglOverlayView=newgoogle.maps.WebGLOverlayView();// Add the overlay to the map.webglOverlayView.setMap(map);
constwebglOverlayView=newgoogle.maps.WebGLOverlayView();webglOverlayView.onAdd=()=>{// Do setup that does not require access to rendering context.}webglOverlayView.onContextRestored=({gl})=>{// Do setup that requires access to rendering context before onDraw call.}webglOverlayView.onStateUpdate=({gl})=>{// Do GL state setup or updates outside of the render loop.}webglOverlayView.onDraw=({gl,transformer})=>{// Render objects.}webglOverlayView.onContextLost=()=>{// Clean up pre-existing GL state.}webglOverlayView.onRemove=()=>{// Remove all intermediate objects.}webglOverlayView.setMap(map);
constwebglOverlayView=newgoogle.maps.WebGLOverlayView();letscene,renderer,camera,loader;webglOverlayView.onAdd=()=>{// Set up the Three.js scene.scene=newTHREE.Scene();camera=newTHREE.PerspectiveCamera();constambientLight=newTHREE.AmbientLight(0xffffff,0.75);// Soft white light.scene.add(ambientLight);// Load the 3D model with GLTF Loader from Three.js.loader=newGLTFLoader();loader.load("pin.gltf");}webglOverlayView.onContextRestored=({gl})=>{// Create the Three.js renderer, using the// maps's WebGL rendering context.renderer=newTHREE.WebGLRenderer({canvas:gl.canvas,context:gl,...gl.getContextAttributes(),});renderer.autoClear=false;}webglOverlayView.onDraw=({gl,transformer})=>{// Update camera matrix to ensure the model is georeferenced correctly on the map.constmatrix=transformer.fromLatLngAltitude({lat:mapOptions.center.lat,lng:mapOptions.center.lng,altitude:120,});camera.projectionMatrix=newTHREE.Matrix4().fromArray(matrix);// Request a redraw and render the scene.webglOverlayView.requestRedraw();renderer.render(scene,camera);// Always reset the GL state.renderer.resetState();}// Add the overlay to the map.webglOverlayView.setMap(map);
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-08-17 UTC"],[[["\u003cp\u003eWebGL Overlay View empowers you to seamlessly integrate 3D and 2D content into Google Maps using WebGL directly or via libraries like Three.js, leveraging the same rendering context for synchronized visuals and depth occlusion with buildings.\u003c/p\u003e\n"],["\u003cp\u003eIt's crucial to load the map with a vector map enabled map ID, ideally with tilt and rotation activated, to fully utilize 3D camera control and functionalities.\u003c/p\u003e\n"],["\u003cp\u003eWebGL Overlay View offers lifecycle hooks like \u003ccode\u003eonAdd\u003c/code\u003e, \u003ccode\u003eonContextRestored\u003c/code\u003e, \u003ccode\u003eonDraw\u003c/code\u003e, \u003ccode\u003eonContextLost\u003c/code\u003e, \u003ccode\u003eonStateUpdate\u003c/code\u003e, and \u003ccode\u003eonRemove\u003c/code\u003e, providing control over setup, rendering, and teardown of your overlay elements.\u003c/p\u003e\n"],["\u003cp\u003eRemember to reset the GL state after rendering using methods like \u003ccode\u003erenderer.resetState()\u003c/code\u003e (Three.js) to avoid rendering conflicts and ensure proper functionality.\u003c/p\u003e\n"],["\u003cp\u003eUtilize the \u003ccode\u003ecoordinateTransformer.fromLatLngAltitude()\u003c/code\u003e helper function within \u003ccode\u003eonDraw\u003c/code\u003e to transform latitude/longitude/altitude coordinates to world/camera/screen space for accurate object placement and georeferencing.\u003c/p\u003e\n"]]],[],null,["\u003cbr /\u003e\n\n\n[View Sample](/maps/documentation/javascript/examples/webgl/webgl-overlay-simple)\n\nWith WebGL Overlay View you can add content to your maps using WebGL directly,\nor popular Graphics libraries like Three.js. WebGL Overlay View provides direct\naccess to the same WebGL rendering context Google Maps Platform uses to render\nthe vector basemap. This use of a shared rendering context provides benefits\nsuch as depth occlusion with 3D building geometry, and the ability to sync 2D/3D\ncontent with basemap rendering. Objects rendered with the WebGL Overlay View can\nalso be tied to latitude/longitude coordinates, so they move when you drag,\nzoom, pan, or tilt the map.\n\nRequirements\n\nTo use WebGL Overlay View, you must load the map using a map ID with the vector\nmap enabled. We strongly recommend enabling tilt and rotation when you create\nthe map ID, to allow for full 3D camera control.\n[See the overview for details](/maps/documentation/javascript/webgl).\n\nAdd WebGL Overlay View\n\nTo add the overlay to your map, implement `google.maps.WebGLOverlayView`, then\npass it your map instance using `setMap`: \n\n // Create a map instance.\n const map = new google.maps.Map(mapDiv, mapOptions);\n\n // Create a WebGL Overlay View instance.\n const webglOverlayView = new google.maps.WebGLOverlayView();\n\n // Add the overlay to the map.\n webglOverlayView.setMap(map);\n\nLifecycle hooks\n\nWebGL Overlay View provides a set of hooks that are called at various times in\nthe lifecycle of the WebGL rendering context of the vector basemap. These\nlifecycle hooks are where you setup, draw, and tear down anything you want\nrendered in the overlay.\n\n- **`onAdd()`** is called when the overlay is created. Use it to fetch or create intermediate data structures before the overlay is drawn that don't require immediate access to the WebGL rendering context.\n- **`onContextRestored({gl})`** is called once the rendering context is available. Use it to initialize or bind any WebGL state such as shaders, GL buffer objects, and so on. `onContextRestored()` takes a `WebGLStateOptions` instance, which has a single field:\n - `gl` is a handle to the `WebGLRenderingContext` used by the basemap.\n- **`onDraw({gl, transformer})`** renders the scene on the basemap. The parameters for `onDraw()` is a `WebGLDrawOptions` object, which has two fields:\n - `gl` is a handle to the `WebGLRenderingContext` used by the basemap.\n - `transformer` provides helper functions to transform from map coordinates to model-view-projection matrix, which can be used to translate map coordinates to world space, camera space, and screen space.\n- **`onContextLost()`** is called when the rendering context is lost for any reason, and is where you should clean up any pre-existing GL state, since it is no longer needed.\n- **`onStateUpdate({gl})`** updates the GL state outside of the render loop, and is invoked when `requestStateUpdate` is called. It takes a `WebGLStateOptions` instance, which has a single field:\n - `gl` is a handle to the `WebGLRenderingContext` used by the basemap.\n- **`onRemove()`** is called when the overlay is removed from the map with `WebGLOverlayView.setMap(null)`, and is where you should remove all intermediate objects.\n\nFor example, the following is a basic implementation of all lifecycle hooks: \n\n const webglOverlayView = new google.maps.WebGLOverlayView();\n\n webglOverlayView.onAdd = () =\u003e {\n // Do setup that does not require access to rendering context.\n }\n\n webglOverlayView.onContextRestored = ({gl}) =\u003e {\n // Do setup that requires access to rendering context before onDraw call.\n }\n\n webglOverlayView.onStateUpdate = ({gl}) =\u003e {\n // Do GL state setup or updates outside of the render loop.\n }\n\n webglOverlayView.onDraw = ({gl, transformer}) =\u003e {\n // Render objects.\n }\n\n webglOverlayView.onContextLost = () =\u003e {\n // Clean up pre-existing GL state.\n }\n\n webglOverlayView.onRemove = () =\u003e {\n // Remove all intermediate objects.\n }\n\n webglOverlayView.setMap(map);\n\nResetting GL State\n\nWebGL Overlay View exposes the WebGL rendering context of the basemap. Because\nof this, it is extremely important that you reset the GL state to its original\nstate when you are done rendering objects. Failure to reset the GL state is\nlikely to result in GL state conflicts, which will cause rendering of both the\nmap and any objects you specify to fail.\n\nResetting the GL state is normally handled in the `onDraw()` hook. For example,\nThree.js provides a helper function that clears any changes to the GL state: \n\n webglOverlayView.onDraw = ({gl, transformer}) =\u003e {\n // Specify an object to render.\n renderer.render(scene, camera);\n renderer.resetState();\n }\n\nIf the map or your objects fail to render, it is very likely that the GL state\nhas not been reset.\n\nCoordinate Transformations\n\nThe position of an object on the vector map is specified by providing a\ncombination of latitude and longitude coordinates, as well as altitude. 3D\ngraphics, however, are specified in world space, camera space, or screen space.\nTo make it easier to transform map coordinates to these more commonly used\nspaces, WebGL Overlay View provides the\n`coordinateTransformer.fromLatLngAltitude(latLngAltitude, rotationArr,\nscalarArr)` helper function in the `onDraw()` hook that takes the following and\nreturns a `Float64Array`:\n\n- `latLngAltitude`: Latitude/longitude/altitude coordinates either as a `LatLngAltitude` or `LatLngAltitudeLiteral`.\n- `rotationArr`: `Float32Array` of euler rotation angles specified in degrees.\n- `scalarArr`: `Float32Array` of scalars to apply to the cardinal axis.\n\nFor example, the following uses `fromLatLngAltitude()` to create a camera\nprojection matrix in Three.js: \n\n const camera = new THREE.PerspectiveCamera();\n const matrix = coordinateTransformer.fromLatLngAltitude({\n lat: mapOptions.center.lat,\n lng: mapOptions.center.lng,\n altitude: 120,\n });\n camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);\n\nExample\n\nThe following is a simple example of using [Three.js](https://threejs.org), a\npopular, open source WebGL library, to place a 3D object on the map. For a\ncomplete walkthrough of using WebGL Overlay View to build the example you see\nrunning at the top of this page, try the\n[Building WebGL-accelerated Map Experiences codelab](http://goo.gle/maps-platform-webgl-codelab). \n\n const webglOverlayView = new google.maps.WebGLOverlayView();\n let scene, renderer, camera, loader;\n\n webglOverlayView.onAdd = () =\u003e {\n // Set up the Three.js scene.\n scene = new THREE.Scene();\n camera = new THREE.PerspectiveCamera();\n const ambientLight = new THREE.AmbientLight( 0xffffff, 0.75 ); // Soft white light.\n scene.add(ambientLight);\n\n // Load the 3D model with GLTF Loader from Three.js.\n loader = new GLTFLoader();\n loader.load(\"pin.gltf\");\n }\n\n webglOverlayView.onContextRestored = ({gl}) =\u003e {\n // Create the Three.js renderer, using the\n // maps's WebGL rendering context.\n renderer = new THREE.WebGLRenderer({\n canvas: gl.canvas,\n context: gl,\n ...gl.getContextAttributes(),\n });\n renderer.autoClear = false;\n }\n\n webglOverlayView.onDraw = ({gl, transformer}) =\u003e {\n // Update camera matrix to ensure the model is georeferenced correctly on the map.\n const matrix = transformer.fromLatLngAltitude({\n lat: mapOptions.center.lat,\n lng: mapOptions.center.lng,\n altitude: 120,\n });\n camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);\n\n // Request a redraw and render the scene.\n webglOverlayView.requestRedraw();\n renderer.render(scene, camera);\n\n // Always reset the GL state.\n renderer.resetState();\n }\n\n // Add the overlay to the map.\n webglOverlayView.setMap(map);"]]
