الحصول على مفتاح Maps Demo Key: يمكنك تجربة ميزات محدّدة من Maps JavaScript API و"حزمة أدوات خرائط Google الجاهزة للأماكن" بدون أي تكلفة باستخدام مفتاح Maps Demo Key، وبدون الحاجة إلى إدخال معلومات الفوترة.

تستخدم 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 من خلال قراءة المستندات المرجعية.

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