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

ไลบรารีโอเพนซอร์สจำนวนมากพร้อมให้ใช้งานเพื่อมอบความสามารถเพิ่มเติมสำหรับ 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 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

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

ไลบรารีต่อไปนี้ขยายคลาส เช่น Mark และ 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

การทดสอบและการวิเคราะห์โค้ด

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

ไลบรารีของไคลเอ็นต์ 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