لتحميل رمز JavaScript لواجهة برمجة تطبيقات JavaScript للخرائط، يمكنك تضمين نص برمجي لبرنامج التحميل في صفحتك، بالشكل التالي:
<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", // Add other bootstrap parameters as needed, using camel case. // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.) }); </script>
تتألف واجهة برمجة تطبيقات JavaScript للخرائط من مكتبات لا يتم تحميلها إلا بعد أن تطلبها تحديدًا. ويسمح تقسيم المكوّنات إلى المكتبات بتحميل واجهة برمجة التطبيقات (وتحليلها) بسرعة. لا تُفرض عليك أي تكاليف إضافية على تحميل المكتبات وتحليلها إلا عند اللزوم.
يمكنك تحميل مكتبات إضافية في وقت التشغيل، باستخدام عامل التشغيل await
لاستدعاء
importLibrary()
من داخل الدالة async
. مثلاً:
const { Map } = await google.maps.importLibrary("maps");
يوضّح مثال الرمز التالي تحميل المكتبتَين Map
وAdvancedMarkerView
:
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 { AdvancedMarkerView } = 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 AdvancedMarkerView({ 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 { AdvancedMarkerView } = 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 AdvancedMarkerView({ 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 للخرائط إلى النص البرمجي القديم لأداة بدء التشغيل:
<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>