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

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

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

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

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

npm i @googlemaps/extended-component-library

การโหลด API

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

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

npm i @googlemaps/js-api-loader

การใช้ TypeScript

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

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

npm i -D @types/google.maps

TypeScript ป้องกันประเภทยูเนียนที่แคบ

npm i -D @googlemaps/typescript-guards

การใช้ React

ผู้ใช้รีแอ็กชันจะเริ่มต้นใช้งานแพ็กเกจต่อไปนี้ได้

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

npm i @googlemaps/react-wrapper

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

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

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

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

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

npm i @googlemaps/markerclusterer

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

npm i @googlemaps/markermanager

เพิ่มเลเยอร์ Open Geospatial Consortium (OGC) เช่น Web Map Service (WMS) ลงในแผนที่

npm i @googlemaps/ogc

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

npm i @googlemaps/markerwithlabel

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

npm i @googlemaps/three

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

npm i @deck.gl/google-maps

การทดสอบและ Linting

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

ใช้กฎ ESLint ที่กำหนดเองเพื่อเชื่อมโยงโค้ดของคุณ

npm i -D eslint-plugin-googlemaps

จำลองเพื่อใช้กับไลบรารีการทดสอบ Jest

npm i -D @googlemaps/jest-mocks

ไลบรารี Node.js

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

npm i @googlemaps/google-maps-services-js

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

npm i @googlemaps/polyline-codec

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

npm i @googlemaps/url-signature