ماذا تعرف
- اذهب إلى وحدة تحكم Google Cloud Platform وإنشاء مشروع أو تحديده ، ثم انقر فوق يكمل. على ال أوراق اعتماد الصفحة ، احصل على مفتاح API.
- أدخل كود JavaScript (الموضح أدناه) في قسم BODY من مستند HTML.
- في رأس مستند HTML ، حدد قيود CSS للخريطة ، بما في ذلك تغيير الحجم والألوان وموضع الصفحة.
تشرح هذه المقالة كيفية إدراج خريطة Google مع علامة الموقع في صفحة الويب الخاصة بك. تتضمن هذه العملية الحصول على مفتاح برنامج خاص من Google ثم إضافة JavaScript ذات الصلة إلى الصفحة.
احصل على مفتاح API لخرائط Google
لحماية خوادمها من التعرض للقصف من خلال طلبات الخرائط وعمليات البحث عن الموقع ، تقيد Google الوصول إلى قاعدة بيانات الخرائط الخاصة بها. يجب عليك التسجيل لدى Google كمطور للحصول على مفتاح فريد لاستخدام واجهة برمجة التطبيقات لطلب البيانات من خوادم الخرائط. مفتاح API مجاني إلا إذا كنت بحاجة إلى وصول قوي إلى خوادم Google (على سبيل المثال ، لتطوير تطبيق ويب).
لتسجيل مفتاح API الخاص بك:
اذهب إلى وحدة تحكم Google Cloud Platform وبعد تسجيل الدخول باستخدام حساب Google الخاص بك ، إما أن تنشئ مشروعًا جديدًا أو حدد مشروعًا موجودًا.
انقر يكمل لتمكين API وأي خدمات ذات صلة.
على ال أوراق اعتماد الصفحة ، احصل على مفتاح API. عند الضرورة ، ضع القيود ذات الصلة على المفتاح.
تأمين مفتاح API الخاص بك باستخدام أفضل الممارسات أوصت به جوجل.
إذا كنت تعتقد أنك ستحتاج إلى عرض الخريطة مرات أكثر مما تسمح به حصتك المجانية ، فقم بإعداد ترتيب فوترة مع Google. من غير المحتمل أن تستهلك معظم مواقع الويب ، خاصة المدونات منخفضة الحركة أو المواقع المتخصصة ، الكثير من تخصيص الحصة.
أدخل JavaScript في صفحة الويب الخاصة بك
أدخل الكود التالي في صفحة الويب الخاصة بك ، في قسم BODY من مستند HTML:
// تهيئة وإضافة وظيفة الخريطة initMap () {
// موقع العلم var = {lat: XXX، lng: YYY}؛
// الخريطة ، المتمركزة في علم var map = خرائط google.map جديدة. Map (document.getElementById ('map')، {zoom: 4، center: flag}) ؛
// العلامة الموضوعة على العلامة var marker = new google.maps. علامة ({position: flag، map: map}) ؛ } src = " https://maps.googleapis.com/maps/api/js? key = YOUR_API_KEY & callback = initMap ">
في هذا الرمز ، قم بتغيير ما يلي:
- يستبدل علم باسم يشير إلى الموقع الذي تقوم بتثبيته. اجعلها بسيطة وقصيرة (مثل الصفحة الرئيسية أو مكتب أو باريس أو ديترويت). يمكنك تشغيل هذا الرمز مغادرة علم كما هو ، ولكن تغيير الاسم يدعم إعادة استخدام هذا الرمز في نفس الصفحة ، لتضمين عدة خرائط مختلفة.
- يستبدل XXX و YYY مع خطوط الطول والعرض ، بالأرقام العشرية ، لموقع محدد الخريطة. يجب استبدال هذه القيم حتى يتم عرض الخريطة بشكل صحيح. طريقة سهلة للعثور على خطوط الطول والعرض هي فتح خرائط Google والنقر بزر الماوس الأيمن على الموقع الدقيق الذي تنوي الإبلاغ عنه. في قائمة السياق ، حدد ماذا هنا؟ لعرض خطوط الطول والعرض.
- يستبدل YOUR_API_KEY باستخدام مفتاح API الذي حصلت عليه من Google. لا تضع مسافات بين علامة يساوي وعلامة العطف. بدون المفتاح ، سيفشل الاستعلام ولن يتم عرض الخريطة بشكل صحيح.
الممارسات المثلى
في رأس مستند HTML الخاص بك ، حدد قيود CSS للخريطة ، بما في ذلك تغيير الحجم والألوان وموضع الصفحة.
يحتوي البرنامج النصي لخريطة Google على سمات مثل تكبير و المركز المفتوحة لتعديل المستخدم النهائي. يتم دعم هذه التقنية الأكثر تقدمًا من خلال وثائق مطوري Google.
تعد واجهة برمجة تطبيقات خرائط Google أحد الأصول القيمة. تقدم إرشادات أفضل الممارسات من Google نصائح ممتازة لتأمين المفتاح ضد سوء الاستخدام من قبل الآخرين. الأمان المناسب مهم بشكل خاص إذا قمت بإعداد نظام دفع للوصول إلى واجهة برمجة التطبيقات ، حيث قد تواجه فاتورة باهظة إذا سُرقت بيانات اعتمادك. على وجه الخصوص ، المثال الذي أظهرناه هنا يفعل قم بتضمين مفتاح API مباشرة في الكود — لقد قمنا بذلك بغرض توضيح الإجراء. ومع ذلك ، في بيئة الإنتاج ، من الأفضل تحديد متغيرات البيئة للمفتاح بدلاً من إدخال المفتاح مباشرةً.