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

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

Web Components

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

Extended Component Library ของ Google Maps Platform คือชุดของ Web Component ที่ช่วยให้นักพัฒนาแอปสร้างแผนที่ที่ดีขึ้น ได้เร็วขึ้นและง่ายขึ้น

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

การโหลด API

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

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

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

การ์ด TypeScript เพื่อจำกัดประเภทการรวม

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

การใช้ React

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

คอมโพเนนต์และ Hook สำหรับผสานรวม 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 กิจกรรมการคอมมิตใน GitHub (Branch) Fork ใน GitHub ป้ายเซิร์ฟเวอร์ Discord

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

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

ขยายเครื่องหมายและภาพซ้อนทับ

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

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

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

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

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

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

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

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

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

ใช้ WebGL และ ThreeJS เพื่อการแสดงภาพที่มีประสิทธิภาพสูง

npm i @googlemaps/three
เวอร์ชัน NPM สำหรับ @googlemaps/three การดาวน์โหลด NPM สำหรับ @googlemaps/three ดาวในที่เก็บ GitHub กิจกรรมการคอมมิตใน GitHub (Branch) Fork ใน 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) Fork ใน GitHub ป้ายเซิร์ฟเวอร์ Discord

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

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

ใช้กฎ ESLint ที่กำหนดเองเพื่อ Lint โค้ด

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

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

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

ไลบรารี Node.js

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

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

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

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

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

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