מתחילים

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

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

הגדרת הסביבה

לפני שמתחילים לכתוב קוד, צריך להגדיר סביבה שבה פועלת 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 מכיל את הקריאה לטעינת Maps JavaScript API. חשוב להחליף את הערך 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" range="2000" tilt="75" heading="330"></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 Maps JavaScript API.

השלבים הבאים

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