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

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

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