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

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

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

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

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

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

npm i @googlemaps/extended-component-library

การโหลด API

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

JS API Loader

โหลด Maps JavaScript API แบบไดนามิกด้วย Promise

npm i @googlemaps/js-api-loader

การใช้ TypeScript

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

ประเภท TypeScript

ประเภท TypeScript สําหรับ Maps JavaScript API

npm i -D @types/google.maps

เงื่อนไขเริ่มต้นของ TypeScript

TypeScript Guard เพื่อจํากัดประเภทยูเนียนให้แคบลง

npm i -D @googlemaps/typescript-guards

การใช้ React

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

ไลบรารี Google Maps ของ React

คอมโพเนนต์และฮุกเพื่อผสานรวม 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

บริการแผนที่บนเว็บ (WMS)

เพิ่มเลเยอร์ Open Geospatial Consortium (OGC) เช่น บริการแผนที่เว็บ (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

การทดสอบและการตรวจหาข้อบกพร่อง

ใช้ไลบรารีเหล่านี้เพื่อให้เป็นไปตามแนวทางปฏิบัติแนะนำและทําให้การทดสอบ 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

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

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

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

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

npm i @googlemaps/polyline-codec

URL Signing

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

npm i @googlemaps/url-signature