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

มีไลบรารีโอเพนซอร์สจำนวนมากที่มีไว้เพื่อเพิ่มความสามารถสำหรับ 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 Repo กิจกรรมการคอมมิต 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 Repo กิจกรรมการคอมมิต 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 Repo กิจกรรมการคอมมิต GitHub (Branch) ส้อม GitHub ป้ายเซิร์ฟเวอร์ Discord

TypeScript ป้องกันประเภทการรวมที่แคบ

npm i -D @googlemaps/typescript-guards
เวอร์ชัน NPM สำหรับ @googlemaps/typescript-guards การดาวน์โหลด NPM สำหรับ @googlemaps/typescript-guards ดาวของ GitHub Repo กิจกรรมการคอมมิต 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) เช่น Web Map Service (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 Repo กิจกรรมการคอมมิต 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 Repo กิจกรรมการคอมมิต 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 Repo กิจกรรมการคอมมิต GitHub (Branch) ส้อม GitHub ป้ายเซิร์ฟเวอร์ Discord

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

npm i @googlemaps/polyline-codec
เวอร์ชัน NPM สำหรับ @googlemaps/polyline-codec การดาวน์โหลด NPM สำหรับ @googlemaps/polyline-codec ดาวของ GitHub Repo กิจกรรมการคอมมิต 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