لتحميل رمز JavaScript لواجهة برمجة التطبيقات JavaScript API للخرائط، عليك تضمين نص برمجي لأداة التحميل bootstrap على صفحتك، بالصيغة التالية:
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY_HERE", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
تتكون واجهة برمجة تطبيقات JavaScript للخرائط من مكتبات لا يتم تحميلها إلى أن تطلبها على وجه التحديد. ويساعد تقسيم المكوّنات إلى مكتبات إلى تحميل (وتحليل) واجهة برمجة التطبيقات بسرعة. لا تتحمّل سوى تكاليف التحميل الإضافي للمكتبات والتحليلات عند الحاجة إليها.
يمكنك تحميل المكتبات الإضافية في وقت التشغيل باستخدام عامل التشغيل await
لاستدعاء
importLibrary()
من داخل دالة async
. على سبيل المثال:
const { Map } = await google.maps.importLibrary("maps");
يوضّح مثال الرمز التالي تحميل المكتبتَين Map
وAdvancedMarkerElement
:
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
مكتبات لاستيراد المكتبة الديناميكية
المكتبات التالية متاحة للاستخدام مع استيراد المكتبة الديناميكية:
core
(google.maps.CoreLibrary
)maps
(google.maps.MapsLibrary
)places
(google.maps.PlacesLibrary
)geocoding
(google.maps.GeocodingLibrary
)routes
(google.maps.RoutesLibrary
)marker
(google.maps.MarkerLibrary
)geometry
(google.maps.GeometryLibrary
)elevation
(google.maps.ElevationLibrary
)streetView
(google.maps.StreetViewLibrary
)journeySharing
(google.maps.JourneySharingLibrary
)drawing
(google.maps.DrawingLibrary
)visualization
(google.maps.VisualizationLibrary
)
مكتبات لعناوين URL الخاصة بالتشغيل (قديمة)
تتوفّر المكتبات التالية للاستخدام مع علامة النص البرمجي لبرنامج التشغيل القديم:- توفّر السمة
drawing
واجهة رسومية للمستخدمين لرسم المضلّعات والمستطيلات والخطوط المتعددة و الدوائر والعلامات على الخريطة. للاطّلاع على مزيد من المعلومات، يمكنك مراجعة المواد المتعلقة بمكتبة الرسم. - تشمل دالة
geometry
دوال المساعدة في احتساب القيم الهندسية القياسية (مثل المسافة ومساحة) على سطح الأرض. للاطّلاع على مزيد من المعلومات، يمكنك مراجعة مستندات المكتبة الهندسية. - توفّر شركة
journeySharing
إمكانية استخدام حلول النقل والخدمات اللوجستية في "منصة خرائط Google". - يعرض
localContext
الأماكن الرئيسية المهمة للمستخدمين بالقرب من الموقع الجغرافي الذي تحدّده. للاطّلاع على مزيد من المعلومات، يمكنك مراجعة مستندات المكتبة المحلية للسياق. - تتيح لك ميزة
marker
إضافة علامات متقدّمة قابلة للتخصيص بدرجة عالية إلى خرائطك. للاطّلاع على مزيد من المعلومات، يمكنك الرجوع إلى مستندات "محدّدات المواقع المتقدّمة". - تتيح لك السمة
places
طلبك البحث عن أماكن، مثل مؤسسات أو مواقع جغرافية أو نقاط اهتمام بارزة ضمن منطقة معيّنة. للاطّلاع على مزيد من المعلومات، يمكنك مراجعة المستندات المتعلّقة بمكتبة الأماكن. - توفّر السمة
visualization
خرائط التمثيل اللوني لتمثيل البيانات بشكل مرئي. للاطّلاع على مزيد من المعلومات، يمكنك مراجعة المستندات الخاصة بمكتبة العناصر المرئية.
يوضّح طلب بدء التشغيل التالي كيفية إضافة طلب إلى مكتبة google.maps.geometry
في واجهة برمجة تطبيقات JavaScript لخدمة "خرائط Google" إلى النص البرمجي القديم لبرنامج تحميل نظام التشغيل:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=initMap">
</script>
لطلب مكتبات متعددة، يُرجى فصلها بفاصلة:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,places&callback=initMap">
</script>