حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح للمطوّرين إمكانية التخصيص والتحكّم. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

البدء

اختيار النظام الأساسي: Android iOS JavaScript

في هذا البرنامج التعليمي، ستتعرّف على كيفية إنشاء أول تطبيق JavaScript باستخدام "خرائط ثلاثية الأبعاد" في Maps JavaScript: وهي نافذة أساسية تعرض عرضًا من الأعلى لجسر Golden Gate مع Marin Headlands في الخلفية.

بعد إكمال البرنامج التعليمي، من المفترض أن تظهر لك الخريطة التالية في بيئة التطوير:

إعداد البيئة

قبل البدء في كتابة التعليمات البرمجية، عليك إعداد بيئة تشغّل JavaScript. في هذا البرنامج التعليمي، ستستخدم متصفّح ويب كبيئة لك. تتضمّن جميع متصفّحات الويب الحديثة دعمًا مدمجًا لـ JavaScript، لذا لن تحتاج إلى تثبيت أي برامج إضافية.

افتح محرِّر نصوص من اختيارك.
أنشِئ ملفًا جديدًا واحفظه بالامتداد .html (مثلاً، hello-p3djs.html).

كتابة صفحة HTML

للبدء، عليك إنشاء صفحة ويب تتضمّن بنية HTML أساسية:

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

إضافة JavaScript

بعد ذلك، عليك إضافة عنصر HTML مخصّص لتحميل الخريطة. تحتوي التعليمات البرمجية على عنصرَين:

gmp-map-3d يحتوي على المَعلمات المستخدَمة لتهيئة موضع الكاميرا الأولية والعرض.
script يحتوي على طلب تحميل Maps JavaScript API. احرص على استبدال YOUR_KEY بمفتاح واجهة برمجة التطبيقات.

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>index.html

تشغيل التطبيق

لتشغيل التطبيق وعرض الناتج، اتّبِع الخطوات التالية:

احفظ ملف HTML الذي أنشأته.
افتح الملف في متصفّح ويب (يمكنك النقر مرّتين على الملف أو سحبه إلى نافذة متصفّح أو النقر بزر الماوس الأيمن واستخدام "فتح باستخدام").
من المفترض أن تظهر لك الخريطة في نافذة المتصفّح.

تهانينا! لقد كتبت للتو تطبيقًا باستخدام "خرائط ثلاثية الأبعاد" من Google في Maps JavaScript API.

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

يمكنك إنشاء تجارب خرائط ثلاثية الأبعاد أكثر تعقيدًا باستخدام النماذج الحالية من Google samples.
يمكنك استكشاف الإمكانات الكاملة لـ "خرائط ثلاثية الأبعاد" في Maps JavaScript API من خلال قراءة مستندات المرجع.

البدء تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.