มีไลบรารีโอเพนซอร์สจำนวนมากที่มีไว้เพื่อเพิ่มความสามารถสำหรับ Maps JavaScript API ไลบรารีเหล่านี้มีเวอร์ชัน GitHub และเผยแพร่ใน npm
คอมโพเนนต์ของเว็บ
ใช้เว็บ Maps JavaScript API คอมโพเนนต์สำหรับเพิ่มแผนที่อย่างรวดเร็ว ฟังก์ชันการทำงานในเว็บไซต์ Web Components ห่อหุ้มโค้ด Boilerplate แนวทางปฏิบัติที่ดีที่สุด และการออกแบบเชิงตอบสนอง ซึ่งช่วยลด 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
ผู้ใช้ React สามารถเริ่มต้นใช้งานแพ็กเกจต่อไปนี้
React ไลบรารี Google Maps
คอมโพเนนต์และฮุกสำหรับผสานรวม Maps JavaScript API ในแอปพลิเคชัน React
npm i -D @vis.gl/react-google-maps
แสดงความรู้สึก Wrapper
คอมโพเนนต์ Wrapper เพื่อโหลด Maps JavaScript API อย่างชัดแจ้ง
npm i @googlemaps/react-wrapper
เครื่องหมายขยายและการวางซ้อน
ไลบรารีต่อไปนี้ขยายคลาส เช่น Mark และ 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
การทดสอบและการวิเคราะห์โค้ด
ใช้ไลบรารีเหล่านี้เพื่อให้ได้แนวทางปฏิบัติแนะนำและทำให้การทดสอบ JavaScript API ของ Maps JavaScript API ง่ายขึ้น
ปลั๊กอิน ESLint
ใช้กฎ ESLint ที่กำหนดเองเพื่อวิเคราะห์โค้ดของคุณ
npm i -D eslint-plugin-googlemaps
Jest ล้อเลียน
การจำลองสำหรับใช้กับไลบรารีการทดสอบ 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