מתחילים

בחירת פלטפורמה: Android iOS JavaScript

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

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

הגדרת הסביבה

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

  1. פותחים כלי לעריכת טקסט.
  2. יוצרים קובץ חדש ושומרים אותו עם סיומת .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 במפתח ה-API שלכם.

<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>

הפעלת האפליקציה

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

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

מעולה! הרגע כתבתם אפליקציה באמצעות מפות Google בתלת-ממד ב-Maps JavaScript API.

השלבים הבאים

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