يمكنك وضع خريطة تفاعلية أو صورة بانورامية في "التجوّل الافتراضي" على صفحتك على الويب باستخدام طلب HTTP بسيط، بدون الحاجة إلى JavaScript.
التكاليف
تتوفّر جميع طلبات البيانات من واجهة برمجة التطبيقات لميزة "إدراج خرائط Google" بدون أي رسوم مع استخدام غير محدود. ومع ذلك، لا تزال جميع الطلبات تتطلّب مفتاح Google Cloud API صالحًا. لمزيد من المعلومات، يُرجى الاطّلاع على الاستخدام والفوترة.
قبل البدء
لإنشاء خريطة مضمّنة على صفحة الويب، أكمِل خطوات الإعداد المطلوبة من خلال النقر على علامات التبويب التالية:
الخطوة 1
وحدة التحكّم
-
في Google Cloud Console، في صفحة أداة اختيار المشاريع، انقر على إنشاء مشروع لبدء إنشاء مشروع جديد على Cloud.
-
تأكَّد من تفعيل الفوترة لمشروعك على Cloud. تأكَّد من تفعيل الفوترة لمشروعك.
توفّر Google Cloud فترة تجريبية بدون أي رسوم. تنتهي الفترة التجريبية بعد 90 يومًا أو بعد تحصيل رسوم بقيمة 300 دولار أمريكي من الحساب، أيهما أقرب. يمكنك الإلغاء في أي وقت. توفّر "منصة خرائط Google" رصيدًا شهريًا متكررًا بقيمة 200 دولار أمريكي. لمزيد من المعلومات، يُرجى الاطّلاع على أرصدة حسابات الفوترة والفوترة.
SDK للسحاب
gcloud projects create "PROJECT"
يمكنك الاطّلاع على مزيد من المعلومات حول Google Cloud SDK و تثبيت Cloud SDK والأوامر التالية:
الخطوة 2
لاستخدام Google Maps Platform، عليك تفعيل واجهات برمجة التطبيقات أو حِزم تطوير البرامج (SDK) التي تخطّط لاستخدامها مع مشروعك.
وحدة التحكّم
SDK للسحاب
gcloud services enable \ --project "PROJECT" \ "maps-embed-backend.googleapis.com"
يمكنك الاطّلاع على مزيد من المعلومات حول Google Cloud SDK و تثبيت Cloud SDK والأوامر التالية:
الخطوة 3
لا تؤدي هذه الخطوة إلا إلى تنفيذ عملية إنشاء مفتاح واجهة برمجة التطبيقات. إذا كنت تستخدم مفتاح واجهة برمجة التطبيقات في مرحلة الإنتاج، ننصحك بشدة بتقييد مفتاح واجهة برمجة التطبيقات. يمكنك العثور على مزيد من المعلومات في صفحة استخدام مفاتيح واجهة برمجة التطبيقات الخاصة بالمنتج.
مفتاح واجهة برمجة التطبيقات هو معرّف فريد يُستخدم لمصادقة الطلبات المرتبطة بمشروعك لأغراض الاستخدام والفوترة. يجب أن يكون لديك مفتاح واجهة برمجة تطبيقات واحد على الأقل مرتبط بمشروعك.
لإنشاء مفتاح واجهة برمجة التطبيقات، اتّبِع الخطوات التالية:
وحدة التحكّم
-
انتقِل إلى صفحة منصة خرائط Google > بيانات الاعتماد.
-
في صفحة بيانات الاعتماد، انقر على إنشاء بيانات اعتماد > مفتاح واجهة برمجة التطبيقات.
يعرض مربّع الحوار مفتاح واجهة برمجة التطبيقات الذي تم إنشاؤه مفتاح واجهة برمجة التطبيقات الذي تم إنشاؤه حديثًا. -
انقر على إغلاق.
يظهر مفتاح واجهة برمجة التطبيقات الجديد في صفحة بيانات الاعتماد ضمن مفاتيح واجهة برمجة التطبيقات.
(تذكَّر فرض قيود على مفتاح واجهة برمجة التطبيقات قبل استخدامه في مرحلة الإنتاج).
SDK للسحاب
gcloud alpha services api-keys create \ --project "PROJECT" \ --display-name "DISPLAY_NAME"
يمكنك الاطّلاع على مزيد من المعلومات حول Google Cloud SDK و تثبيت Cloud SDK والأوامر التالية:
إنشاء إطار iframe
انتقِل بين الخيارات التالية وأضِف موقعًا جغرافيًا ومفتاح واجهة برمجة التطبيقات لإنشاء إطار iframe لصفحة الويب. للحصول على مَعلمات وخيارات إضافية، يُرجى الاطّلاع على تضمين خريطة.
اختبار إطار iframe
للاطّلاع على إطار iframe في نافذة متصفّح HTML:
- افتح محرِّر النصوص التلقائي. من المفترض أن يكون لديك محرّرو نصوص مثل TextEdit أو Microsoft Windows Notepad مثبّتَين على جهازك تلقائيًا.
- أنشئ ملف HTML واسمه
index.html
. أضِف الرمز البرمجي التالي مع إطار iframe الذي أنشأته أعلاه:
<html> <!-- Replace this code comment with your iframe. --> </html>
احفظ ملف HTML الخاص بـ
index.html
.حمِّل ملف HTML في متصفّح ويب من خلال سحبه من سطح المكتب إلى المتصفّح. بدلاً من ذلك، يمكنك النقر مرّتين على الملف في معظم أنظمة التشغيل.
تهانينا! لقد أنشأت للتو خريطة باستخدام واجهة برمجة التطبيقات Maps Embed API.
تنظيف
يمكنك حذف مشروعك على Google Cloud لإيقاف الفوترة مقابل جميع الموارد المستخدَمة في ذلك المشروع.
- في Google Cloud Console، انتقِل إلى صفحة إدارة الموارد:
- إذا كان المشروع الذي تريد حذفه مرتبطًا بمؤسسة، اختَر قائمة المؤسسات في أعلى الصفحة ووسِّعها.
- في قائمة المشاريع، اختَر المشروع الذي تريد حذفه وانقر على حذف.
- في مربّع الحوار، اكتب رقم تعريف المشروع وانقر على إيقاف لحذف المشروع.
الخطوات التالية
ابدأ عملية التطوير باستخدام Maps Embed API من خلال إعداد مشروعك على Google Cloud:
للحصول على قائمة بالمَعلمات والخيارات الإضافية التي يمكنك إضافتها في إطار iframe:
يمكنك توسيع نطاق مشروعك على "خرائط Google" باستخدام Javascript API: