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

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

Web Components

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

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 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