Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Trang này liệt kê các vấn đề đã biết và cách giải quyết cho bản đồ vectơ và các tính năng WebGL.
Hỗ trợ trình duyệt/thiết bị
Bản xem trước tính năng WebGL hỗ trợ các trình duyệt và thiết bị giống như Maps JavaScript API.
Để kiểm tra xem trình duyệt trên một thiết bị cụ thể có hỗ trợ WebGL hay không, hãy truy cập vào get.webgl.org hoặc caniuse.com. Ngoài ra, vui lòng đảm bảo rằng tính năng tăng tốc phần cứng được bật trong phần cài đặt trình duyệt, nếu không, bản đồ vectơ sẽ chuyển về raster (raster là một định dạng hình ảnh kỹ thuật số).
Đồ hoạ raster hay đồ hoạ vectơ?
Đôi khi, bản đồ vectơ có thể chuyển về dạng raster. Khi đó, những tính năng phụ thuộc vào bản đồ vectơ sẽ không hoạt động. Có thể xảy ra trường hợp dự phòng cho bản đồ raster vì nhiều lý do. Phần này hướng dẫn bạn cách định cấu hình trình duyệt web đúng cách và cách kiểm tra theo phương thức lập trình xem có chức năng bản đồ vectơ hay không.
Kiểm tra các chức năng của trình duyệt trên Chrome
Để xác định những chức năng tăng tốc phần cứng được bật trong một bản cài đặt Chrome cụ thể, hãy chuyển đến chrome://gpu/ và đảm bảo rằng các mục sau đây được bật (màu xanh lục):
"OpenGL: Đã bật"
"WebGL: Được tăng tốc bằng phần cứng"
"WebGL2: Được tăng tốc bằng phần cứng"
(Đây chỉ là các yêu cầu cơ bản, có thể có những yếu tố khác ảnh hưởng đến việc hỗ trợ, hãy xem phần "Lỗi đã biết" bên dưới.)
Bật chế độ tăng tốc phần cứng
Để hỗ trợ bản đồ vectơ, bạn phải bật chế độ tăng tốc phần cứng trong hầu hết các trình duyệt. Để bật chế độ tăng tốc phần cứng trong Chrome và Microsoft Edge, hãy mở Cài đặt, chọn Hệ thống rồi đảm bảo bạn đã bật chế độ Sử dụng chế độ tăng tốc phần cứng khi có thể.
Kiểm tra đường quét hoặc vectơ theo phương thức lập trình
Bạn có thể kiểm tra theo phương thức lập trình để xem bản đồ là bản đồ raster hay vectơ bằng cách gọi map.getRenderingType(). Ví dụ sau đây cho thấy mã để theo dõi sự kiện renderingtype_changed và hiện một cửa sổ thông tin cho biết liệu bản đồ raster hay bản đồ vectơ đang được sử dụng.
TypeScript
/** * This example creates a map with an info window that shows whether * the map render type is raster or vector. */functioninitMap(){constcenter={lat:0,lng:0};constmap=newgoogle.maps.Map(document.getElementById('map')asHTMLElement,{center,zoom:10,heading:0.0,tilt:0.0,// Map ID for a vector map.mapId:'6ff586e93e18149f',});constcanvas=document.createElement("canvas");constinfoWindow=newgoogle.maps.InfoWindow({content:'',ariaLabel:'Raster/Vector',position:center,});infoWindow.open({map,});map.addListener('renderingtype_changed',()=>{infoWindow.setContent(`${map.getRenderingType()}`);});}declareglobal{interfaceWindow{initMap:()=>void;}}window.initMap=initMap;
/** * This example creates a map with an info window that shows whether * the map render type is raster or vector. */functioninitMap(){constcenter={lat:0,lng:0};constmap=newgoogle.maps.Map(document.getElementById("map"),{center,zoom:10,heading:0.0,tilt:0.0,// Map ID for a vector map.mapId:"6ff586e93e18149f",});constcanvas=document.createElement("canvas");constinfoWindow=newgoogle.maps.InfoWindow({content:"",ariaLabel:"Raster/Vector",position:center,});infoWindow.open({map,});map.addListener("renderingtype_changed",()=>{infoWindow.setContent(`${map.getRenderingType()}`);});}window.initMap=initMap;
Tính năng hỗ trợ bản đồ vectơ trên web di động vẫn đang trong giai đoạn thử nghiệm. Nhà phát triển có thể dùng API máy khách để phát hiện trình duyệt web di động và dùng mã bản đồ được liên kết với bản đồ raster thay vì bản đồ vectơ. Chúng tôi dự đoán hiệu suất kết xuất sẽ chậm hơn đối với một số thiết bị di động. Nếu bạn chọn sử dụng bản đồ vectơ trên web di động, chúng tôi rất mong nhận được số liệu thống kê về hiệu suất và ý kiến phản hồi của bạn. Như đã đề cập ở trên, nếu không có chế độ hỗ trợ Bản đồ vectơ, thì mã nhận dạng bản đồ vectơ sẽ tự động chuyển về chế độ sử dụng bản đồ raster.
Lỗi
Các lỗi đã biết
Chrome gặp một vấn đề đã biết trên một số thiết bị macOS có GPU AMD. Điều này có thể gây nhầm lẫn, đặc biệt là khi macOS tự động chuyển đổi giữa các GPU trên các thiết bị có nhiều GPU. Do đó, bản đồ vectơ có thể không dùng được tuỳ thuộc vào những ứng dụng khác đang chạy hoặc liệu có màn hình ngoài được kết nối hay không.
Việc bật phần phụ trợ ANGLE Metal sắp ra mắt của Chrome dường như khắc phục được vấn đề này trong một số trường hợp. Bạn có thể theo dõi kế hoạch triển khai chung cho vấn đề này tại
https://bugs.chromium.org/p/chromium/issues/detail?id=1322521.
Báo cáo lỗi
Vui lòng cập nhật trình duyệt và trình điều khiển GPU lên phiên bản mới nhất trước khi báo cáo lỗi.
Đảm bảo bạn đã bật chế độ cài đặt tăng tốc phần cứng tại chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge). Trong Safari, chế độ cài đặt này sẽ tự động bật trong macOS phiên bản 10.15 trở lên. Đối với(các) phiên bản MacOS cũ, vui lòng chuyển đến phần cài đặt nâng cao của Safari và đảm bảo rằng bạn đã bật chế độ "Sử dụng chế độ tăng tốc phần cứng".
Thêm đường liên kết đến mã mẫu jsfiddle vào báo cáo lỗi.
Vui lòng chụp ảnh màn hình chrome://gpu (Chrome), about:support (Firefox) hoặc edge://gpu (Microsoft Edge), đồng thời đính kèm thông tin liên quan đến GPU trong báo cáo lỗi nếu bạn gặp phải vấn đề về kết xuất.
Cho chúng tôi biết bạn nghĩ gì
Chúng tôi trân trọng ý kiến phản hồi của bạn vì chúng tôi luôn nỗ lực mang đến trải nghiệm bản đồ vectơ tốt nhất cho bạn và người dùng cuối. Vui lòng cho chúng tôi biết nếu:
Có bất kỳ lỗi JavaScript mới nào hoặc lỗi/sự cố nào mà bạn phát hiện thấy trong các ứng dụng web của mình.
Độ trễ khởi động đối với bản đồ vectơ tệ hơn đáng kể so với độ trễ khởi động đối với bản đồ raster. Trong trường hợp này, các chỉ số về độ trễ khởi động rất hữu ích. Nhìn chung, chúng tôi muốn biết liệu độ trễ khởi động có giảm xuống dưới ngưỡng chấp nhận được hay không.
Trải nghiệm bản đồ vectơ không mượt mà như mong đợi. Nếu bạn ghi lại chỉ số FPS hoặc chỉ số giật hình, thì các chỉ số này khác nhau như thế nào giữa bản đồ vectơ và bản đồ raster?
Hiệu suất khác nhau đáng kể tuỳ theo trình duyệt.
Nếu bạn đã thiết lập thử nghiệm A/B để so sánh bản đồ vectơ với bản đồ raster, vui lòng chia sẻ mọi ý kiến phản hồi về hiệu suất mà bạn nhận được, vì điều này sẽ rất hữu ích để giúp chúng tôi tinh chỉnh tính năng này.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-09-05 UTC."],[[["\u003cp\u003eThis page addresses known issues and workarounds for vector maps and WebGL features in Google Maps.\u003c/p\u003e\n"],["\u003cp\u003eHardware acceleration must be enabled in your browser settings for vector maps to function correctly; instructions for various browsers are provided.\u003c/p\u003e\n"],["\u003cp\u003eYou can programmatically determine if a map is rendering in vector or raster mode using the \u003ccode\u003emap.getRenderingType()\u003c/code\u003e method.\u003c/p\u003e\n"],["\u003cp\u003eThere are known issues with vector maps on certain macOS devices with AMD GPUs in Chrome, potentially due to dynamic GPU switching.\u003c/p\u003e\n"],["\u003cp\u003eFeedback on performance, bugs, and user experience with vector maps is encouraged to help improve the feature.\u003c/p\u003e\n"]]],["This document details vector map and WebGL feature support, troubleshooting, and usage. Key actions include: checking browser support via `get.webgl.org` or `caniuse.com`; enabling hardware acceleration in browser settings; using `chrome://gpu/` to verify hardware acceleration in Chrome; and programmatically checking for raster or vector maps using `map.getRenderingType()`. The document also covers mobile web support limitations, known bugs, and how to report them, including updating browsers/drivers and providing relevant diagnostic information.\n"],null,["# Support\n\nThis page lists known issues and workarounds for vector maps and WebGL features.\n\nBrowser/device support\n----------------------\n\nThe WebGL feature preview supports the same browsers and devices as the Maps JavaScript API.\nTo check whether the browser on a particular device will support WebGL, visit [get.webgl.org](https://get.webgl.org/)\nor [caniuse.com](https://caniuse.com/?search=webgl). Please also ensure the\nhardware acceleration is enabled in the browser settings, otherwise vector maps\nwill revert to [raster](#raster-fallback).\n\nRaster or vector?\n-----------------\n\nOccasionally, a vector map may fall back to raster. When this happens, features\ndepending on the vector map are unavailable. Fallback to a raster map may occur\nfor a variety of reasons. This section shows you how to correctly configure\nyour web browser, and how to programmatically check whether vector map\ncapability is present.\n\n### Check browser capabilities on Chrome\n\nTo determine which hardware acceleration capabilities are enabled in a specific\ninstallation of Chrome, navigate to \u003cchrome://gpu/\u003e, and ensure\nthat the following items are enabled (in green):\n\n- \"OpenGL: Enabled\"\n- \"WebGL: Hardware accelerated\"\n- \"WebGL2: Hardware accelerated\"\n\n(These are just baseline requirements, there can be other factors which\nimpact support, see \"Known bugs\" below.)\n\n### Enable hardware acceleration\n\nIn order to support vector maps, hardware acceleration must be enabled in most\nbrowsers. To enable hardware acceleration in Chrome and Microsoft Edge, open\n**Settings** , select **System** , and ensure that **Use hardware acceleration\nwhen available** is enabled.\n\n- Learn how to [change websites preferences in Safari](https://support.apple.com/guide/safari/websites-ibrwe2159f50/14.0/mac/11.0).\n- Learn about [Firefox's performance settings](https://support.mozilla.org/en-US/kb/performance-settings).\n\n### Programmatically check for raster or vector\n\nYou can programmatically check to see whether a map is raster or vector, by\ncalling `map.getRenderingType()`. The following example shows code to monitor\nthe `renderingtype_changed` event, and show an info window displaying whether a\nraster or vector map is in use.\n\n\n### TypeScript\n\n```typescript\n/**\n * This example creates a map with an info window that shows whether\n * the map render type is raster or vector.\n */\n\n function initMap() {\n const center = {lat: 0, lng: 0};\n const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {\n center,\n zoom: 10,\n heading: 0.0,\n tilt: 0.0,\n // Map ID for a vector map.\n mapId: '6ff586e93e18149f',\n });\n const canvas = document.createElement(\"canvas\");\n const infoWindow = new google.maps.InfoWindow({\n content: '',\n ariaLabel: 'Raster/Vector',\n position: center,\n });\n infoWindow.open({\n map,\n });\n\n map.addListener('renderingtype_changed', () =\u003e {\n infoWindow.setContent(`${map.getRenderingType()}`);\n });\n }\n\n declare global {\n interface Window {\n initMap: () =\u003e void;\n }\n }\n window.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/samples/vector-detector/index.ts#L8-L43\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\n### JavaScript\n\n```javascript\n/**\n * This example creates a map with an info window that shows whether\n * the map render type is raster or vector.\n */\nfunction initMap() {\n const center = { lat: 0, lng: 0 };\n const map = new google.maps.Map(document.getElementById(\"map\"), {\n center,\n zoom: 10,\n heading: 0.0,\n tilt: 0.0,\n // Map ID for a vector map.\n mapId: \"6ff586e93e18149f\",\n });\n const canvas = document.createElement(\"canvas\");\n const infoWindow = new google.maps.InfoWindow({\n content: \"\",\n ariaLabel: \"Raster/Vector\",\n position: center,\n });\n\n infoWindow.open({\n map,\n });\n map.addListener(\"renderingtype_changed\", () =\u003e {\n infoWindow.setContent(`${map.getRenderingType()}`);\n });\n}\n\nwindow.initMap = initMap;https://github.com/googlemaps/js-samples/blob/2683f7366fb27829401945d2a7e27d77ed2df8e5/dist/samples/vector-detector/docs/index.js#L7-L36\n```\n\n\u003cbr /\u003e\n\nYou can also use the WebGL rendering context to check support for WebGL 2: \n\n const canvas = document.createElement(\"canvas\");\n canvas.getContext(\"webgl2\") ? console.log(\"WebGL 2 is supported\") : console.log(\"WebGL 2 is NOT supported\");\n\nLearn other ways to [programmatically detect WebGL rendering context](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Detect_WebGL).\n\nMobile web support\n------------------\n\nMobile web support for vector maps is still experimental. Developers can use\nclient APIs to detect mobile web browsers and use a map ID associated with a\nraster map instead of a vector map. We anticipate slower rendering performance\nfor some mobile devices. If you choose to use vector maps on mobile web, we\nwould greatly appreciate performance statistics and feedback. As above, if\nVector Maps support is not available, a vector map ID will automatically\nfallback to using a raster map.\n\nBugs\n----\n\n### Known bugs\n\n- There is a known issue in Chrome on some macOS devices with AMD GPUs. This can be particularly confusing when macOS dynamically switches between GPUs on devices with multiple GPUs, so vector maps may not be available depending on what other apps are running, or whether an external monitor is connected. Turning on Chrome's upcoming ANGLE Metal backend appears to fix this issue in some cases. You can follow general rollout plans for this at \u003chttps://bugs.chromium.org/p/chromium/issues/detail?id=1322521\u003e.\n\n### Reporting bugs\n\n- Please update the browser and GPU driver to the latest version before reporting the bug.\n- Ensure that the hardware acceleration setting at `chrome://settings/system` (Chrome), `about:preferences#general` (Firefox), `edge://settings/system` (Microsoft Edge) is enabled. In Safari, this setting is enabled automatically in macOS version 10.15 or newer. For older MacOS version(s), please go to the Safari advanced settings and ensure that the \"Use hardware acceleration\" option is enabled.\n- Include [jsfiddle](https://jsfiddle.net/L320szg9/) sample code link in the bug report.\n- Please also take a screenshot of `chrome://gpu` (Chrome), `about:support` (Firefox) or `edge://gpu` (Microsoft Edge), attach GPU related info in bug report if you encounter any rendering issues.\n\nTell us what you think!\n-----------------------\n\nWe value your feedback as we strive to make the best vector map experience for\nyou and your end-users. Please let us know if:\n\n- There are any new JavaScript errors or bugs/crashes that you detect in your web apps.\n- Startup latency for vector maps is significantly worse than that for raster maps. If this is the case, metrics for startup latency regression are very helpful. In general, we want to know if startup latency regresses beyond acceptable thresholds.\n- The vector maps experience is not as smooth as it could be. If you log FPS or jank metrics, how do they compare between vector and raster maps?\n- Performance differs greatly by browser.\n\nIf you have set up A/B testing for a comparison of vector maps vs. raster maps,\nplease share any performance feedback you acquire, as this will be very useful\nto help us refine the feature."]]
