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

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

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

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

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

npm i @googlemaps/extended-component-library
เวอร์ชัน NPM สำหรับ @googlemaps/extended-component-library การดาวน์โหลด NPM สําหรับ @googlemaps/extended-component-library การติดดาวที่เก็บ GitHub กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

การโหลด API

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

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

npm i @googlemaps/js-api-loader
เวอร์ชัน NPM สำหรับ @googlemaps/js-api-loader การดาวน์โหลด NPM สําหรับ @googlemaps/js-api-loader การติดดาวที่เก็บ GitHub กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

การใช้ TypeScript

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

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

npm i -D @types/google.maps
เวอร์ชัน NPM สำหรับ @types/google.maps การดาวน์โหลด NPM สําหรับ @types/google.maps การติดดาวที่เก็บ GitHub กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

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

npm i -D @googlemaps/typescript-guards
เวอร์ชัน NPM สำหรับ @googlemaps/typescript-guards การดาวน์โหลด NPM สำหรับ @googlemaps/typescript-guards การติดดาวที่เก็บ GitHub กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

การใช้ React

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

คอมโพเนนต์และฮุกที่จะผสานรวม Maps JavaScript API ในแอปพลิเคชัน React

npm i -D @vis.gl/react-google-maps
เวอร์ชัน NPM สำหรับ @vis.gl/react-google-maps การดาวน์โหลด NPM สำหรับ @vis.gl/react-google-maps ดาวของ GitHub Repo กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

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

npm i @googlemaps/react-wrapper
เวอร์ชัน NPM สำหรับ @googlemaps/react-wrapper การดาวน์โหลด NPM สำหรับ @googlemaps/react-wrapper ดาวของ GitHub Repo กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

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

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

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

npm i @googlemaps/markerclusterer
เวอร์ชัน NPM สำหรับ @googlemaps/markerclusterer การดาวน์โหลด NPM สำหรับ @googlemaps/markerclusterer ดาวของ GitHub Repo กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

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

npm i @googlemaps/markermanager
เวอร์ชัน NPM สําหรับ @googlemaps/markermanager การดาวน์โหลด NPM สำหรับ @googlemaps/markermanager ดาวของ GitHub Repo กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

เพิ่มเลเยอร์ Open Geospatial Consortium (OGC) เช่น บริการแผนที่เว็บ (WMS) ลงในแผนที่

npm i @googlemaps/ogc
เวอร์ชัน NPM สำหรับ @googlemaps/ogc การดาวน์โหลด NPM สำหรับ @googlemaps/ogc ดาวของ GitHub Repo กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

เพิ่มป้ายกำกับ HTML ที่กำหนดเองลงในตัวทำเครื่องหมาย

npm i @googlemaps/markerwithlabel
เวอร์ชัน NPM สำหรับ @googlemaps/markerwithlabel การดาวน์โหลด NPM สําหรับ @googlemaps/markerwithlabel ดาวของ GitHub Repo กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

ใช้ WebGL และ ThreeJS สำหรับการแสดงภาพที่มีประสิทธิภาพสูง

npm i @googlemaps/three
เวอร์ชัน NPM สำหรับ @googlemaps/three การดาวน์โหลด NPM สำหรับ @googlemaps/three การติดดาวที่เก็บ GitHub กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

ใช้ Deck.gl เป็นการวางซ้อน Google Maps ที่กําหนดเอง

npm i @deck.gl/google-maps
เวอร์ชัน NPM สำหรับ @deck.gl/google-maps การดาวน์โหลด NPM สำหรับ @deck.gl/google-maps การติดดาวที่เก็บ GitHub กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

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

ใช้ไลบรารีเหล่านี้เพื่อให้ได้แนวทางปฏิบัติแนะนำและทำให้การทดสอบ JavaScript API ของ Maps JavaScript API ง่ายขึ้น

ใช้กฎ ESLint ที่กำหนดเองเพื่อวิเคราะห์โค้ดของคุณ

npm i -D eslint-plugin-googlemaps
เวอร์ชัน NPM สำหรับ eslint-plugin-googlemaps การดาวน์โหลด NPM สำหรับ eslint-plugin-googlemaps ดาวของ GitHub Repo กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

การจำลองสำหรับใช้กับไลบรารีการทดสอบ Jest

npm i -D @googlemaps/jest-mocks
เวอร์ชัน NPM สำหรับ @googlemaps/jest-mocks การดาวน์โหลด NPM สําหรับ @googlemaps/jest-mocks ดาวของ GitHub Repo กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

ไลบรารี Node.js

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

npm i @googlemaps/google-maps-services-js
เวอร์ชัน NPM สำหรับ @googlemaps/google-maps-services-js การดาวน์โหลด NPM สําหรับ @googlemaps/google-maps-services-js การติดดาวที่เก็บ GitHub กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

เข้ารหัสและถอดรหัสโพลีไลน์ใน Node.js

npm i @googlemaps/polyline-codec
เวอร์ชัน NPM สำหรับ @googlemaps/polyline-codec การดาวน์โหลด NPM สำหรับ @googlemaps/polyline-codec การติดดาวที่เก็บ GitHub กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord

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

npm i @googlemaps/url-signature
เวอร์ชัน NPM สำหรับ @googlemaps/url-signature การดาวน์โหลด NPM สำหรับ @googlemaps/url-signature ดาวของ GitHub Repo กิจกรรมการคอมมิต GitHub (Branch) การแยก GitHub ป้ายเซิร์ฟเวอร์ Discord