เริ่มใช้งาน
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ทำตามขั้นตอนต่อไปนี้เพื่อเริ่มต้นใช้งานการจัดรูปแบบตามข้อมูลสำหรับชุดข้อมูล
รับคีย์ API และเปิดใช้ API
ก่อนใช้การจัดรูปแบบตามข้อมูลสำหรับชุดข้อมูล คุณต้องมีสิ่งต่อไปนี้
โปรเจ็กต์ Google Cloud ที่มีบัญชีสำหรับการเรียกเก็บเงิน และเปิดใช้ทั้ง
Maps JavaScript API และ Maps Datasets API
ดูข้อมูลเพิ่มเติมได้ที่หัวข้อ
ตั้งค่าโปรเจ็กต์ Google Cloud
รับคีย์ API
เปิดใช้ Maps JavaScript API
เปิดใช้ Maps Datasets API
สร้างรหัสแผนที่
หากต้องการสร้างรหัสแผนที่ใหม่
ให้ทำตามขั้นตอนใน
การปรับแต่งระบบคลาวด์
ตั้งค่าประเภทแผนที่เป็น JavaScript แล้วเลือกตัวเลือกเวกเตอร์
ระบุรหัสแผนที่โดยใช้พร็อพเพอร์ตี้ mapId เมื่อสร้างอินสแตนซ์ของแผนที่
รหัสแผนที่ต้องสอดคล้องกับรูปแบบแผนที่ที่เชื่อมโยงกับชุดข้อมูล
ที่จะแสดง
const position = new google.maps.LatLng(40.75, -74.05);
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: position,
mapId: 'YOUR_MAP_ID',
});
สร้างรูปแบบแผนที่ใหม่
หากต้องการสร้างรูปแบบแผนที่ใหม่ ให้ทำตามวิธีการใน
สร้างและใช้รูปแบบแผนที่
เพื่อสร้างรูปแบบ และ
เชื่อมโยงรูปแบบกับรหัสแผนที่ที่เพิ่งสร้าง
อัปเดตโค้ดการเริ่มต้นแผนที่
หากต้องการใช้การจัดรูปแบบตามข้อมูลสำหรับชุดข้อมูล ให้โหลด Maps JavaScript API ก่อนโดยเพิ่มโปรแกรมโหลดการเริ่มต้นแบบอินไลน์ลงในโค้ดแอปพลิเคชัน ดังที่แสดงที่นี่
(ใช้ v=beta ในแท็ก API script)
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
ตรวจสอบความสามารถของแผนที่ (ไม่บังคับ)
การจัดรูปแบบตามข้อมูลสำหรับชุดข้อมูลต้องใช้รหัสแผนที่ หากไม่มีรหัสแผนที่
หรือมีการส่งรหัสแผนที่ที่ไม่ถูกต้อง ระบบจะโหลดฟีเจอร์ข้อมูลไม่ได้ ในขั้นตอนการแก้ปัญหา คุณสามารถเพิ่มmapcapabilities_changed Listener เพื่อ
ติดตามการเปลี่ยนแปลงความสามารถของแผนที่ได้ ซึ่งจะระบุว่าตรงตามเงื่อนไขต่อไปนี้หรือไม่
- มีการใช้รหัสแผนที่ที่ถูกต้อง
- รหัสแผนที่จะเชื่อมโยงกับแผนที่เวกเตอร์
การใช้ความสามารถของแผนที่เป็นทางเลือก และขอแนะนำให้ใช้เพื่อการทดสอบและการแก้ปัญหาเท่านั้น หรือเพื่อใช้เป็นทางเลือกสำรองในรันไทม์
// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
const mapCapabilities = map.getMapCapabilities();
if (!mapCapabilities.isDataDrivenStylingAvailable) {
// Data-driven styling is *not* available, add a fallback.
// Existing feature layers are also unavailable.
}
});
ขั้นตอนถัดไป
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-31 UTC
[null,null,["อัปเดตล่าสุด 2025-08-31 UTC"],[[["\u003cp\u003eTo utilize data-driven styling for datasets, obtain an API key, enable necessary APIs (Maps JavaScript API and Maps Datasets API), and create a map ID associated with a vector-based map style.\u003c/p\u003e\n"],["\u003cp\u003eInitialization involves providing the map ID during map instantiation and loading the Maps JavaScript API with the \u003ccode\u003ev=beta\u003c/code\u003e parameter in the script tag.\u003c/p\u003e\n"],["\u003cp\u003eFor troubleshooting, optionally use the \u003ccode\u003emapcapabilities_changed\u003c/code\u003e listener to verify map capabilities, such as a valid map ID linked to a vector map, ensuring data-driven styling functionality.\u003c/p\u003e\n"],["\u003cp\u003eAfter setup, proceed to create and upload a dataset to leverage data-driven styling within your maps.\u003c/p\u003e\n"]]],["To utilize data-driven styling, first get an API key and enable the Maps JavaScript and Datasets APIs. Create a map ID of type \"JavaScript\" and \"Vector,\" then associate it with a new map style. In the map initialization code, use the `mapId` property with your created ID and load the Maps JavaScript API with an inline bootstrap loader. Optionally, use a `mapcapabilities_changed` listener to ensure a valid map ID is used and troubleshoot any issues.\n"],null,["Select platform: [Android](/maps/documentation/android-sdk/dds-datasets/start \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/dds-datasets/start \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/dds-datasets/start \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nFollow these steps to get set up with the data-driven styling for datasets.\n\nGet an API key and enable APIs\n\nBefore using the data-driven styling for datasets, you need:\nGoogle Cloud project with a billing account, and both the\nMaps JavaScript API and the Maps Datasets API enabled.\nTo learn more, see\n[Set up your Google Cloud project](/maps/documentation/javascript/cloud-setup).\n\n[Get an API key](/maps/documentation/javascript/get-api-key)\n\n\n[Enable the Maps JavaScript API](https://console.cloud.google.com/apis/library/maps-backend.googleapis.com)\n\n\n[Enable the Maps Datasets API](https://console.cloud.google.com/apis/library/mapsplatformdatasets.googleapis.com)\n\nCreate a map ID\n\nTo create a new [map ID](/maps/documentation/javascript/map-ids/mapid-over),\nfollow the steps in\n[Cloud customization](/maps/documentation/javascript/map-ids/get-map-id).\nSet the Map type to **JavaScript** , and select the **Vector** option.\n\nProvide a map ID using the `mapId` property when you instantiate the map .\nThe map ID must correspond to the map style that is associated with the dataset\nto display. \n\n```javascript\nconst position = new google.maps.LatLng(40.75, -74.05);\nconst map = new google.maps.Map(document.getElementById('map'), {\n zoom: 11,\n center: position,\n mapId: 'YOUR_MAP_ID',\n});\n```\n\nCreate a new map style\n\nTo create a new map style, follow the instructions in\n[Create and use map styles](/maps/documentation/javascript/cloud-customization/map-styles-leg)\nto create the style, and\n[associate the style with the map ID you just created](/maps/documentation/javascript/cloud-customization/map-styles-leg#associate-style-with-map-id).\n\nUpdate your map initialization code\n\nTo use the data-driven styling for datasets, first load the\nMaps JavaScript API, by adding the inline bootstrap loader to\nyour application code, as shown here\n(use `v=beta` in your API `script` tag): \n\n```javascript\n\u003cscript\u003e\n (g=\u003e{var h,a,k,p=\"The Google Maps JavaScript API\",c=\"google\",l=\"importLibrary\",q=\"__ib__\",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+t[0].toLowerCase()),g[k]);e.set(\"callback\",c+\".maps.\"+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=\u003eh=n(Error(p+\" could not load.\"));a.nonce=m.querySelector(\"script[nonce]\")?.nonce||\"\";m.head.append(a)}));d[l]?console.warn(p+\" only loads once. Ignoring:\",g):d[l]=(f,...n)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})({\n key: \"YOUR_API_KEY\",\n v: \"weekly\",\n // Use the 'v' parameter to indicate the /maps/documentation/javascript/versions to use (weekly, beta, alpha, etc.).\n // Add other /maps/documentation/javascript/load-maps-js-api#required_parameters as needed, using camel case.\n });\n\u003c/script\u003e\n```\n\nCheck map capabilities (optional)\n\nData-driven styling for datasets requires a map ID. If the map ID is missing,\nor an invalid map ID is passed, data features cannot load. As a\ntroubleshooting step, you can add a `mapcapabilities_changed` listener to\nsubscribe to map capability changes. This will indicate whether the following\nconditions have been met:\n\n- A valid map ID is in use.\n- The map ID is associated with a vector map.\n\nUsing Map Capabilities is optional, and recommended only for testing and\ntroubleshooting purposes, or for runtime fallback purposes. \n\n```javascript\n// Optional: subscribe to map capability changes.\nmap.addListener('mapcapabilities_changed', () =\u003e {\n const mapCapabilities = map.getMapCapabilities();\n\n if (!mapCapabilities.isDataDrivenStylingAvailable) {\n // Data-driven styling is *not* available, add a fallback.\n // Existing feature layers are also unavailable.\n }\n});\n```\n\nNext steps\n\n- [Create and upload a dataset](/maps/documentation/javascript/dds-datasets/create-dataset)"]]
