รูปแบบสีของแผนที่
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
สำหรับแผนที่ประเภท roadmap และ terrain คุณสามารถตั้งค่ารูปแบบสีของแผนที่
(มืด สว่าง หรือการตั้งค่าระบบปัจจุบัน) ได้โดยใช้ google.maps.colorScheme คุณจะตั้งค่าตัวเลือก
colorScheme ได้เมื่อเริ่มต้นแผนที่เท่านั้น การตั้งค่าตัวเลือกนี้
หลังจากสร้างแผนที่จะไม่มีผล
แผนการใช้งาน
รูปภาพต่อไปนี้แสดงรูปแบบสีของโหมดสว่างและโหมดมืดสำหรับroadmapประเภท
ภูมิประเทศ
รูปภาพต่อไปนี้แสดงรูปแบบสีของโหมดสว่างและโหมดมืดสำหรับterrainประเภท
โดยค่าเริ่มต้น แผนที่จะใช้โหมดสว่าง เมื่อสร้างแผนที่ ให้นำเข้า ColorScheme
และระบุชุดรูปแบบสีของแผนที่ (LIGHT, DARK หรือ FOLLOW_SYSTEM) ใน
ตัวเลือกแผนที่ ดังที่แสดงที่นี่
const {ColorScheme} = await google.maps.importLibrary("core")
const mapOptions = {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
colorScheme: ColorScheme.DARK,
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
หากรีเซ็ตตัวเลือกหลังจากสร้างอินสแตนซ์แผนที่แล้ว colorScheme จะไม่มีผล
หากต้องการสร้างรูปแบบสว่างและรูปแบบมืดที่กำหนดเองสำหรับประเภทแผนที่แผนงาน ให้ใช้การจัดรูปแบบแผนที่ในระบบคลาวด์
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-27 UTC
[null,null,["อัปเดตล่าสุด 2025-08-27 UTC"],[[["\u003cp\u003eRoadmap and terrain map types allow customization of color schemes (light, dark, or system default) using \u003ccode\u003egoogle.maps.colorScheme\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003ecolorScheme\u003c/code\u003e option must be set during map initialization and cannot be changed afterward.\u003c/p\u003e\n"],["\u003cp\u003eBy default, maps use light mode; to change, import \u003ccode\u003eColorScheme\u003c/code\u003e and specify the desired scheme (LIGHT, DARK, or FOLLOW_SYSTEM) within map options.\u003c/p\u003e\n"],["\u003cp\u003eCustom styles using Map IDs are only compatible with the light color scheme for roadmap map types.\u003c/p\u003e\n"]]],[],null,["# Map color scheme\n\nFor maps of type `roadmap` and `terrain`, you can set the map color scheme\n(dark, light, or current system setting) by using `google.maps.colorScheme`. The\n`colorScheme` option can only be set when the map is initialized; setting this\noption after the map is created will have no effect. \n\n### Roadmap\n\nThe following image shows the light mode and dark mode color schemes for the\n`roadmap` type.\n\n### Terrain\n\nThe following image shows the light mode and dark mode color schemes for the\n`terrain` type.\n\nBy default, the map uses light mode. When creating the map, import `ColorScheme`\nand specify the map color scheme (`LIGHT`, `DARK`, or `FOLLOW_SYSTEM`) in\nmap options, as shown here. \n\n const {ColorScheme} = await google.maps.importLibrary(\"core\")\n\n const mapOptions = {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 8,\n colorScheme: ColorScheme.DARK,\n }\n map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);\n\nIf you reset the options after the map is instantiated, `colorScheme` has no\neffect.\n\nTo create custom light styles and dark styles for your roadmap map types, use\n[cloud-based maps styling](/maps/documentation/javascript/cloud-customization)."]]
