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

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

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

ใช้ Web Component ของ 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 แบบไดนามิกด้วย Promise

npm i @googlemaps/js-api-loader

การใช้ TypeScript

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

ประเภท TypeScript

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

npm i -D @types/google.maps

การป้องกัน TypeScript

การ์ด TypeScript เพื่อจำกัดประเภท Union

npm i -D @googlemaps/typescript-guards

การใช้ React

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

React Google Maps Library

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

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

React Wrapper

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

npm i @googlemaps/react-wrapper

การขยายเครื่องหมายและภาพซ้อนทับ

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

การทดสอบและการตรวจสอบ

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