مكتبات برامج مفتوحة المصدر

تتوفر العديد من المكتبات مفتوحة المصدر لتوفير إمكانات إضافية لواجهة برمجة تطبيقات JavaScript للخرائط. تتوفر نُسخ من هذه المكتبات على GitHub ويتم نشرها على npm.

مكوّنات الويب

استخدم مكونات الويب لـ Maps JavaScript API لإضافة وظائف الخرائط إلى مواقعك الإلكترونية بسرعة. تحتوي مكونات الويب على رمز نموذجي وأفضل الممارسات والتصميم سريع الاستجابة، ما يقلل من واجهات المستخدم المعقدة للخريطة إلى ما هو عنصر HTML واحد بشكل فعال.

مكتبة المكونات الموسّعة في "منصة خرائط Google" هي مجموعة من مكونات الويب التي تساعد المطوّرين على إنشاء خرائط أفضل بشكل أسرع وبجهد أقل.

npm i @googlemaps/extended-component-library
نسخة NPM لـ @googlemaps/extended-component-library عمليات تنزيل NPM لملف @googlemaps/extended-component-library نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

تحميل واجهة برمجة التطبيقات

قد تستفيد تطبيقات الويب الحديثة من استخدام المكتبات التالية لتحميل Maps JavaScript API.

التحميل الديناميكي لواجهة Maps JavaScript API بالوعد

npm i @googlemaps/js-api-loader
نسخة NPM لـ @googlemaps/js-api-loader عمليات تنزيل NPM لملف @googlemaps/js-api-loader نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات 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 (فرع) شوكات GitHub شارة خادم Discord

تحمي ميزة TypeScript أنواع اتحادات ضيقة.

npm i -D @googlemaps/typescript-guards
نسخة NPM لـ @googlemaps/typescript-guards عمليات تنزيل NPM لملف @googlemaps/typescript-guards نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

استخدام ميزة التفاعل

يمكن لمستخدمي التفاعل بدء استخدام الحِزم التالية.

مكوِّن برنامج تضمين لتحميل واجهة برمجة تطبيقات JavaScript للخرائط بشكل بياني.

npm i @googlemaps/react-wrapper
نسخة NPM لـ @googlemaps/react-wrapper عمليات تنزيل NPM لملف @googlemaps/react-wrapper نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

المكوّنات وعناصر الجذب لدمج واجهة برمجة تطبيقات JavaScript JavaScript في تطبيقات React

npm i -D @vis.gl/react-google-maps
نسخة NPM لـ @vis.gl/react-google-maps عمليات تنزيل NPM لملف @vis.gl/react-google-maps نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

تمديد العلامات والتراكبات

تعمل المكتبات التالية على توسيع فئات مثل Marker وOverlayView.

تنشئ مجموعات على مستوى التكبير أو التصغير لمجموعات كبيرة من العلامات وتديرها.

npm i @googlemaps/markerclusterer
نسخة NPM لـ @googlemaps/markerclusterer عمليات تنزيل NPM لملف @googlemaps/markerclusterer نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

لإضافة العلامات وإزالتها استنادًا إلى تغييرات إطار عرض الخريطة.

npm i @googlemaps/markermanager
نسخة NPM لـ @googlemaps/markermanager عمليات تنزيل NPM لموقع @googlemaps/markermanager نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

إضافة طبقات الاتحاد الجغرافي المكاني المفتوحة (OGC) مثل خدمة خرائط الويب (WMS) إلى خريطة.

npm i @googlemaps/ogc
نسخة NPM لـ @googlemaps/ogc عمليات تنزيل NPM لملف @googlemaps/ogc نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

أضِف تصنيفات HTML مخصّصة إلى العلامات.

npm i @googlemaps/markerwithlabel
نسخة NPM لـ @googlemaps/markerwithlabel عمليات تنزيل NPM لموقع @googlemaps/markerwithlabel نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

استخدِم WebGL و3JS للحصول على عروض مرئية عالية الأداء.

npm i @googlemaps/three
نسخة NPM الخاصة بـ @googlemaps/three عمليات تنزيل NPM لملف @googlemaps/Three نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

استخدام Deck.gl كتراكب مخصص في "خرائط Google"

npm i @deck.gl/google-maps
نسخة NPM لـ @deck.gl/google-maps عمليات تنزيل NPM لموقع @deck.gl/google-maps نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

إجراء الاختبارات والكشف عن التشويش

استخدِم هذه المكتبات للتأكّد من تطبيق أفضل الممارسات وتسهيل عملية اختبار واجهة Maps JavaScript API.

استخدِم قواعد ESLint مخصصة لتوضيح الرمز البرمجي.

npm i -D eslint-plugin-googlemaps
نسخة إدارة الشركاء الاستراتيجيين لـ eslint-extension-googlemaps. عمليات تنزيل إدارة الشركاء الاستراتيجيين (NPM) لملف eslint-extension-googlemaps. نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

نماذج تجريبية لاستخدامها مع مكتبة اختبار Jest.

npm i -D @googlemaps/jest-mocks
نسخة NPM لـ @googlemaps/jest-mocks عمليات تنزيل NPM لملف @googlemaps/jest-mocks نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات 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 (فرع) شوكات GitHub شارة خادم Discord

ترميز وفك ترميز الخطوط المتعددة في Node.js.

npm i @googlemaps/polyline-codec
نسخة NPM لـ @googlemaps/polyline-codec عمليات تنزيل NPM لملف @googlemaps/polyline-codec نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord

سجِّل عناوين URL في Node.js لمزيد من الأمان.

npm i @googlemaps/url-signature
نسخة NPM لـ @googlemaps/url-signature عمليات تنزيل NPM لـ @googlemaps/url-signature نجوم GitHub Repo نشاط تنفيذ GitHub (فرع) شوكات GitHub شارة خادم Discord