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

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

البدء

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

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

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

إعداد البيئة

قبل البدء في كتابة التعليمات البرمجية، يجب عليك إعداد بيئة تقوم بتشغيل 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.
يمكنك استكشاف الإمكانات الكاملة للخرائط الثلاثية الأبعاد في Maps JavaScript API من خلال قراءة المستندات المرجعية.

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