มีไลบรารีโอเพนซอร์สจำนวนมากที่มีไว้เพื่อเพิ่มความสามารถให้กับ Maps JavaScript API ไลบรารีเหล่านี้มีเวอร์ชันใน GitHub และเผยแพร่ไปยัง npm
คอมโพเนนต์ของเว็บ
ใช้คอมโพเนนต์เว็บ Maps JavaScript API เพื่อเพิ่มฟังก์ชันแผนที่ลงในเว็บไซต์อย่างรวดเร็ว Web Components ประกอบด้วยโค้ดสำเร็จรูป แนวทางปฏิบัติแนะนำ และการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งช่วยลด 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