ไลบรารีโอเพนซอร์ส

ไลบรารีโอเพนซอร์สจำนวนมากพร้อมใช้งานเพื่อมอบความสามารถเพิ่มเติมสำหรับ Maps JavaScript API ไลบรารีเหล่านี้มีการกำหนดเวอร์ชันใน GitHub และเผยแพร่ไปยัง npm

คอมโพเนนต์เว็บ

ใช้คอมโพเนนต์เว็บของ Maps JavaScript API เพื่อเพิ่มฟังก์ชันการทำงานของแผนที่ลงในเว็บไซต์อย่างรวดเร็ว คอมโพเนนต์เว็บจะรวมโค้ด Boilerplate, แนวทางปฏิบัติแนะนำ และการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์เข้าด้วยกัน ซึ่งจะลด UI แผนที่ที่ซับซ้อนให้กลายเป็นองค์ประกอบ HTML รายการเดียวได้อย่างมีประสิทธิภาพ

คลังคอมโพเนนต์แบบขยาย (เบต้า)

ไลบรารีคอมโพเนนต์แบบขยายของ Google Maps Platform คือชุดคอมโพเนนต์เว็บที่ช่วยให้นักพัฒนาซอฟต์แวร์สร้างแผนที่ได้ดีขึ้น เร็วขึ้น และใช้ความพยายามน้อยลง

npm i @googlemaps/extended-component-library

การโหลด API

เว็บแอปพลิเคชันสมัยใหม่อาจได้รับประโยชน์จากการใช้ไลบรารีต่อไปนี้เพื่อโหลด Maps JavaScript API

JS API Loader

โหลด 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 Guard

TypeScript Guard เพื่อจำกัดประเภท Union ให้แคบลง

npm i -D @googlemaps/typescript-guards

การใช้ React

ผู้ใช้ React สามารถเริ่มต้นใช้งานด้วยแพ็กเกจต่อไปนี้

ไลบรารี React Google Maps

คอมโพเนนต์และฮุกเพื่อผสานรวม Maps JavaScript API เข้ากับแอปพลิเคชัน React

npm i -D @vis.gl/react-google-maps

Wrapper ของ React

คอมโพเนนต์ Wrapper เพื่อโหลด Maps JavaScript API แบบประกาศ

npm i @googlemaps/react-wrapper

การขยายเครื่องหมายและการวางซ้อน

ไลบรารีต่อไปนี้จะขยายคลาสต่างๆ เช่น Marker และ OverlayView

การคลัสเตอร์เครื่องหมาย

สร้างและจัดการคลัสเตอร์ระดับการซูมสำหรับเครื่องหมายจำนวนมาก

npm i @googlemaps/markerclusterer

เครื่องมือจัดการเครื่องหมาย

เพิ่มและนำเครื่องหมายออกตามการเปลี่ยนแปลงวิวพอร์ตแผนที่

npm i @googlemaps/markermanager

Web Map Service (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 mocks

จำลองเพื่อใช้กับไลบรารีการทดสอบ Jest

npm i -D @googlemaps/jest-mocks

ไลบรารี Node.js

หมายเหตุ: ไลบรารีต่อไปนี้ไม่ทำงานในสภาพแวดล้อมของเบราว์เซอร์ และใช้สำหรับ Node.js และสภาพแวดล้อมของเซิร์ฟเวอร์

ไลบรารีของไคลเอ็นต์ Node.js

ไลบรารีของไคลเอ็นต์ Node.js สำหรับการเรียกใช้จาก Cloud Functions หรือโค้ดฝั่งเซิร์ฟเวอร์

npm i @googlemaps/google-maps-services-js

การเข้ารหัสเส้นประกอบ

เข้ารหัสและถอดรหัสเส้นประกอบใน Node.js

npm i @googlemaps/polyline-codec

URL Signing

ลงชื่อเข้าใช้ URL ใน Node.js เพื่อเพิ่มความปลอดภัย

npm i @googlemaps/url-signature