لتحميل رمز JavaScript لواجهة برمجة تطبيقات JavaScript للخرائط، يمكنك تضمين نص برمجي لبرنامج التحميل 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", 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 لتمهيد التوجيه (الإصدار القديم)
يمكن استخدام المكتبات التالية مع علامة النص البرمجي Bootstrap القديمة:- توفّر
drawing
واجهة رسومية تتيح للمستخدمين رسم المضلعات والمستطيلات والخطوط المتعددة والدوائر والعلامات على الخريطة. راجِع مستندات مكتبة الرسومات للحصول على مزيد من المعلومات. - تشتمل الخاصية
geometry
على دوال حسابية لحساب القيم الهندسية العددية (مثل المسافة والمساحة) على سطح الأرض. راجِع مستندات مكتبة الهندسة للحصول على مزيد من المعلومات. - توفّر "
journeySharing
" الدعم لحلول النقل والخدمات اللوجستية على "منصة خرائط Google". - تعرض السمة
localContext
الأماكن الرئيسية المهمة للمستخدمين بالقرب من موقع جغرافي تحدّده. راجِع مستندات مكتبة السياقات المحلية للحصول على مزيد من المعلومات. - يتيح لك
marker
إضافة علامات متقدّمة قابلة للتخصيص وذات أداء عالٍ إلى خرائطك. راجِع مستندات العلامات المتقدمة للحصول على مزيد من المعلومات. - تتيح
places
لتطبيقك إمكانية البحث عن أماكن، مثل المنشآت أو المواقع الجغرافية أو نقاط الاهتمام البارزة، ضمن منطقة محدّدة. يمكنك الاطّلاع على مستندات مكتبة الأماكن للحصول على مزيد من المعلومات. - توفّر
visualization
خرائط التمثيل اللوني للتمثيل المرئي للبيانات. راجِع مستندات مكتبة العروض المرئية للحصول على مزيد من المعلومات.
يوضِّح طلب بدء التشغيل التالي كيفية إضافة طلب لمكتبة google.maps.geometry
لواجهة برمجة تطبيقات JavaScript للخرائط إلى النص البرمجي القديم لأداة تحميل التمهيد:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry&callback=initMap">
</script>
لطلب مكتبات متعددة، افصل بينها بفاصلة:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry,places&callback=initMap">
</script>