ไลบรารีโอเพนซอร์สจำนวนมากพร้อมใช้งานเพื่อเพิ่มความสามารถให้กับ Maps JavaScript API ไลบรารีเหล่านี้มีเวอร์ชันบน GitHub และเผยแพร่ใน npm
คอมโพเนนต์ของเว็บ
ใช้คอมโพเนนต์เว็บ Maps JavaScript API เพื่อเพิ่มฟังก์ชันการทำงานของแผนที่ลงในเว็บไซต์ได้อย่างรวดเร็ว คอมโพเนนต์เว็บห่อหุ้มโค้ดต้นแบบ แนวทางปฏิบัติแนะนำ และการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ โดยลด UI ของแผนที่ที่ซับซ้อนให้เป็นองค์ประกอบ HTML เดี่ยวที่มีประสิทธิภาพ
ไลบรารีคอมโพเนนต์แบบขยาย (เบต้า)
ไลบรารีคอมโพเนนต์ขยายของ Google Maps Platform เป็นชุดคอมโพเนนต์ของเว็บที่ช่วยให้นักพัฒนาซอฟต์แวร์สร้างแผนที่ที่ดียิ่งขึ้นได้รวดเร็วยิ่งขึ้น และลงแรงน้อยลง
npm i @googlemaps/extended-component-library
การโหลด API
เว็บแอปพลิเคชันสมัยใหม่อาจได้รับประโยชน์จากการใช้ไลบรารีต่อไปนี้เพื่อโหลด Maps JavaScript API
ตัวโหลด JS API
โหลด Maps JavaScript API แบบไดนามิกด้วย Promises
npm i @googlemaps/js-api-loader
การใช้ TypeScript
ผู้ใช้ TypeScript สามารถเริ่มต้นใช้งานแพ็กเกจต่อไปนี้ ดูข้อมูลเพิ่มเติมได้ที่การใช้คำแนะนำ TypeScript
ประเภท TypeScript
ประเภท TypeScript สำหรับ Maps JavaScript API
npm i -D @types/google.maps
การป้องกัน TypeScript
TypeScript ป้องกันประเภทยูเนียนที่แคบ
npm i -D @googlemaps/typescript-guards
การใช้ React
ผู้ใช้รีแอ็กชันจะเริ่มต้นใช้งานแพ็กเกจต่อไปนี้ได้
Wrapper ของรีแอ็กชัน
คอมโพเนนต์ Wrapper สำหรับโหลด Maps JavaScript API แบบประกาศ
npm i @googlemaps/react-wrapper
องค์ประกอบรีแอ็กชัน (อัลฟ่า)
คอมโพเนนต์และฮุกที่จะผสานรวม Maps JavaScript API เข้ากับแอปพลิเคชัน React
npm i -D @vis.gl/react-google-maps
ส่วนขยายเครื่องหมายและการวางซ้อน
ไลบรารีต่อไปนี้จะขยายคลาส เช่น มาร์กเกอร์และ OverlayView
การคลัสเตอร์เครื่องหมาย
สร้างและจัดการคลัสเตอร์ระดับต่อการซูมสำหรับเครื่องหมายจำนวนมาก
npm i @googlemaps/markerclusterer
เครื่องมือจัดการเครื่องหมาย
เพิ่มและลบเครื่องหมายตามการเปลี่ยนแปลงวิวพอร์ตของแผนที่
npm i @googlemaps/markermanager
บริการแผนที่บนเว็บ (WMS)
เพิ่มเลเยอร์ Open Geospatial Consortium (OGC) เช่น Web Map Service (WMS) ลงในแผนที่
npm i @googlemaps/ogc
ป้ายเครื่องหมาย
เพิ่มป้ายกำกับ HTML ที่กำหนดเองลงในตัวทำเครื่องหมาย
npm i @googlemaps/markerwithlabel
การวางซ้อน Three.js
ใช้ WebGL และ ThreeJS สำหรับการแสดงข้อมูลผ่านภาพประสิทธิภาพสูง
npm i @googlemaps/three
การวางซ้อน Deck.gl
ใช้ Deck.gl เป็นการวางซ้อน Google Maps ที่กำหนดเอง
npm i @deck.gl/google-maps
การทดสอบและ Linting
ใช้ไลบรารีเหล่านี้เพื่อให้แน่ใจถึงแนวทางปฏิบัติแนะนำและทำให้การทดสอบ Maps JavaScript API ง่ายขึ้น
ปลั๊กอิน ESLint
ใช้กฎ ESLint ที่กำหนดเองเพื่อเชื่อมโยงโค้ดของคุณ
npm i -D eslint-plugin-googlemaps
เยสต์ล้อเลียน
จำลองเพื่อใช้กับไลบรารีการทดสอบ Jest
npm i -D @googlemaps/jest-mocks
ไลบรารี Node.js
ไลบรารีของไคลเอ็นต์ Node.js
ไลบรารีของไคลเอ็นต์ Node.js สำหรับการเรียกจากฟังก์ชันระบบคลาวด์หรือโค้ดฝั่งเซิร์ฟเวอร์
npm i @googlemaps/google-maps-services-js
การเข้ารหัสโพลีไลน์
เข้ารหัสและถอดรหัสโพลีไลน์ใน Node.js
npm i @googlemaps/polyline-codec
URL Signing
ลงชื่อเข้าใช้ URL ใน Node.js เพื่อความปลอดภัยเพิ่มเติม
npm i @googlemaps/url-signature