מתחילים

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

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

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

הגדרת הסביבה

לפני שמתחילים לכתוב קוד, צריך להגדיר סביבה שבה אפשר להריץ 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=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&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, מומלץ לקרוא את מאמרי העזרה.