البدء السريع لواجهة برمجة تطبيقات تضمين الخرائط

يمكنكم وضع خريطة تفاعلية أو بانوراما في "التجوّل الافتراضي" على صفحة الويب باستخدام طلب HTTP بسيط، بدون الحاجة إلى JavaScript مخصّص.

التكاليف

تتوفّر جميع الطلبات من Maps Embed API بدون أي تكلفة وبعدد غير محدود من الاستخدامات. ومع ذلك، لا تزال جميع الطلبات تتطلّب مفتاح Google Cloud API صالحًا. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة الاستخدام والفوترة.

قبل البدء

لإنشاء خريطة مضمّنة على صفحة الويب، يُرجى إكمال خطوات الإعداد المطلوبة من خلال النقر على علامات التبويب التالية:

الخطوة 1

وحدة التحكّم

  1. في Google Cloud Console، انقر على إنشاء مشروع في صفحة اختيار المشروع لبدء إنشاء مشروع جديد على Cloud.

    الانتقال إلى صفحة اختيار المشروع

  2. تأكَّد من تفعيل الفوترة لمشروعك على السحابة الإلكترونية. تأكَّد من تفعيل الفوترة لمشروعك.

    تقدِّم Google Cloud فترة تجريبية بدون أي تكلفة. تنتهي الفترة التجريبية بعد 90 يومًا أو بعد أن تتراكم على الحساب رسوم بقيمة 300 دولار أمريكي (أو ما يعادله بالعملة المحلية)، أيّهما يحدث أولاً. يمكنكم إلغاء الاشتراك في أي وقت. لمزيد من المعلومات، يُرجى الاطّلاع على مقالتَي أرصدة حساب الفوترة والفوترة.

SDK للسحاب

gcloud projects create "PROJECT"

يمكنكم الاطّلاع على مزيد من المعلومات عن Google Cloud SDK و تثبيت Cloud SDK والأوامر التالية:

الخطوة 2

لاستخدام منصة خرائط Google، يجب تفعيل واجهات برمجة التطبيقات أو حِزم تطوير البرامج (SDK) التي تخططون لاستخدامها مع مشروعكم.

وحدة التحكّم

تفعيل Maps Embed API

SDK للسحاب

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

يمكنكم الاطّلاع على مزيد من المعلومات عن Google Cloud SDK و تثبيت Cloud SDK والأوامر التالية:

الخطوة 3

تتضمّن هذه الخطوة عملية إنشاء مفتاح واجهة برمجة التطبيقات فقط. إذا كنتم تستخدمون مفتاح واجهة برمجة التطبيقات في بيئة الإنتاج، ننصحكم بشدة بتقييده. يمكنكم العث101}ور على مزيد من المعلومات في صفحة استخدام مفاتيح واجهة برمجة التطبيقات الخاصة بالمنتج.

مفتاح واجهة برمجة التطبيقات هو معرّف فريد يصادق على الطلبات المرتبطة بمشروعكم لأغراض الاستخدام والفوترة. يجب أن يكون لديكم مفتاح واحد على الأقل لواجهة برمجة التطبيقات مرتبط بمشروعكم.

لإنشاء مفتاح واجهة برمجة التطبيقات:

وحدة التحكّم

  1. انتقِلوا إلى صفحة منصة خرائط Google > بيانات الاعتماد.

    الانتقال إلى صفحة "بيانات الاعتماد"

  2. في صفحة بيانات الاعتماد ، انقروا على إنشاء بيانات اعتماد > مفتاح واجهة برمجة التطبيقات.
    يعرض مربّع الحوار تم إنشاء مفتاح واجهة برمجة التطبيقات مفتاح واجهة برمجة التطبيقات الذي أنشأتموه مؤخرًا.
  3. انقروا على إغلاق.
    يظهر مفتاح واجهة برمجة التطبيقات الجديد في صفحة بيانات الاعتماد ضِمن مفاتيح واجهة برمجة التطبيقات.
    (يُرجى تذكُّر تقييد مفتاح واجهة برمجة التطبيقات قبل استخدامه في بيئة الإنتاج).

SDK للسحاب

gcloud services api-keys create \
    --project "PROJECT" \
    --display-name "DISPLAY_NAME"

يمكنكم الاطّلاع على مزيد من المعلومات عن Google Cloud SDK و تثبيت Cloud SDK والأوامر التالية:

إنشاء إطار iframe

انقروا على الخيارات التالية وأضيفوا موقعًا جغرافيًا ومفتاح واجهة برمجة التطبيقات لإنشاء إطار iframe لصفحة الويب. للاطّلاع على مَعلمات وخيارات إضافية، يُرجى الانتقال إلى مقالة تضمين خريطة.

اختبار إطار iframe

لعرض إطار iframe في نافذة متصفّح HTML:

  1. افتحوا محرّر النصوص التلقائي. من المفترض أن تكون محرّرات النصوص، مثل TextEdit أو "المفكرة" من Microsoft Windows مثبّتة على جهازكم تلقائيًا.
  2. أنشئوا ملف HTML وسمّوه index.html.

  3. أضيفوا الرمز التالي مع إطار iframe الذي أنشأتموه أعلاه:

    <html>
  <!-- Replace this code comment with your iframe. -->
</html>

  4. احفظوا ملف HTML باسم index.html.

  5. حمِّلوا ملف HTML في متصفّح ويب عن طريق سحبه من سطح المكتب إلى المتصفّح. بدلاً من ذلك، يمكنكم النقر مرّتين على الملف في معظم أنظمة التشغيل.

تهانينا! لقد أعددتم خريطة وأنشأتموها باستخدام Maps Embed API.

إخلاء مساحة

يمكنكم حذف مشروع Google Cloud لإيقاف الفوترة لجميع الموارد المستخدَمة ضِمن هذا المشروع.

  1. في Google Cloud Console، انتقِلوا إلى صفحة إدارة الموارد:

    الانتقال إلى صفحة "إدارة الموارد"

  2. إذا كان المشروع الذي تخططون لحذفه مرتبطًا بمؤسسة، اختاروا قائمة المؤسسة ووسِّعوها في أعلى الصفحة.
  3. في قائمة المشاريع، اختاروا المشروع الذي تريدون حذفه وانقروا على حذف.
  4. في مربّع الحوار، اكتبوا رقم تعريف المشروع وانقروا على إيقاف لحذف المشروع.

الخطوات التالية

  • ابدأوا التطوير باستخدام Maps Embed API من خلال إعداد مشروع Google Cloud:

    الإعداد في Cloud Console

  • للاطّلاع على قائمة بالخيارات والمَعلمات الإضافية التي يمكنكم إضافتها في إطار iframe:

    تضمين خريطة

  • وسِّعوا مشروعكم على "خرائط Google" باستخدام JavaScript API:

    Maps JavaScript API