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

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

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

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

ไลบรารีคอมโพเนนต์แบบขยาย (เบต้า)

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

npm i @googlemaps/extended-component-library

การโหลด API

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

JS API Loader

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

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

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

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

แสดงความรู้สึก Wrapper

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

npm i @googlemaps/react-wrapper

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

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

การคลัสเตอร์เครื่องหมาย

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

npm i @googlemaps/markerclusterer

เครื่องมือจัดการเครื่องหมาย

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

npm i @googlemaps/markermanager

บริการแผนที่บนเว็บ (WMS)

เพิ่มเลเยอร์ Open Geospatial Consortium (OGC) เช่น บริการแผนที่เว็บ (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 Function หรือโค้ดฝั่งเซิร์ฟเวอร์

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

การเข้ารหัสเส้นประกอบ

เข้ารหัสและถอดรหัสเส้นประกอบใน Node.js

npm i @googlemaps/polyline-codec

URL Signing

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

npm i @googlemaps/url-signature