איך מתחילים?

במדריך הזה תלמדו איך ליצור את תוכנית ה-JavaScript הראשונה שלכם באמצעות מפות פוטוריאליסטיות בתלת-ממד במפות Google JavaScript: חלון פשוט שבו רואים את גשר שער הזהב ברקע.

בסיום המדריך אמורה להופיע המפה הבאה בסביבת הפיתוח:

הגדרת הסביבה

לפני שתתחילו לכתוב קוד, עליכם להגדיר סביבה שמשתמשת ב-JavaScript. במדריך זה, עליכם להשתמש בדפדפן אינטרנט בתור הסביבה. בכל דפדפני האינטרנט המודרניים יש תמיכה מובנית ב-JavaScript, כך שאין צורך להתקין תוכנות נוספות.

  1. פותחים כלי לעריכת טקסט לבחירתכם.
  2. יוצרים קובץ חדש ושומרים אותו בסיומת .html (למשל, hello-p3djs.html).

כתיבת דף HTML

בתור התחלה, עליך ליצור דף אינטרנט עם מבנה HTML בסיסי:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

הוספת JavaScript

בשלב הבא, מוסיפים קוד JavaScript כדי לטעון את המפה. הקוד מכיל שני רכיבים:

  • השדה gmp-map-3d מכיל את הפרמטרים שמשמשים לאתחול המיקום והתצוגה של המצלמה ההתחלתית.
  • script מכיל את הקריאה לטעון את API JavaScript של מפות Google. חשוב להחליף את YOUR_KEY במפתח ה-API.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

הפעלת התוכנית

כדי להריץ את התוכנית ולראות את הפלט, פועלים לפי השלבים הבאים:

  1. שומרים את קובץ ה-HTML שיצרתם.
  2. פותחים את הקובץ בדפדפן אינטרנט (אפשר ללחוץ לחיצה כפולה על הקובץ, לגרור אותו לחלון דפדפן או ללחוץ לחיצה ימנית ולהשתמש באפשרות 'פתיחה באמצעות').
  3. המפה אמורה להופיע בחלון הדפדפן.

כל הכבוד! בדיוק כתבת תוכנית באמצעות מפות Google פוטוריאליסטיות בתלת-ממד בממשק API של JavaScript ב-Google Maps.

השלבים הבאים

  • יצירת חוויות מורכבות יותר במפה בתלת-ממד באמצעות הדוגמאות הקיימות של Google.
  • רוצים לגלות את הפוטנציאל המלא של מפות תלת-ממד ב-API JavaScript של מפות Google? כדאי לקרוא את מסמכי התיעוד.